Jquery实战——横纵向的菜单

　　横纵向的菜单效果，点击纵向菜单显示其子菜单。鼠标指向横菜单的时候。显示其子菜单，鼠标离开，子菜单隐藏。

　　HTML代码：

<span style="font-size:18px;"><!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>横纵向的菜单</title>

    <link href="css/menu.css" rel="stylesheet" />

    <script src="js/JQuery.js"></script>

    <script src="js/menu.js"></script>

</head>

<body>

    <ul>

        <li class="main"><a href="#">菜单项1</a>

            <ul>

                <li><a href="#">菜单项11</a></li>

                <li><a href="#">菜单项12</a></li>

            </ul>

        </li>

        <li class="main"><a href="#">菜单项2</a>

            <ul>

                <li><a href='#'>菜单项21</a></li>

                <li><a href="#">菜单项22</a></li>

            </ul>

        </li>

        <li class="main"><a href="#">菜单项3</a>

            <ul>

                <li><a href="#">菜单项31</a></li>

                <li><a href="#">菜单项32</a></li>

            </ul>

        </li>

    </ul>

    <br />

    <br />

    <br />

     <ul>

        <li class="hmain"><a href="#">菜单项1</a>

            <ul>

                <li><a href="#">菜单项11</a></li>

                <li><a href="#">菜单项12</a></li>

            </ul>

        </li>

        <li class="hmain"><a href="#">菜单项2</a>

            <ul>

                <li><a href='#'>菜单项21</a></li>

                <li><a href="#">菜单项22</a></li>

            </ul>

        </li>

        <li class="hmain"><a href="#">菜单项3</a>

            <ul>

                <li><a href="#">菜单项31</a></li>

                <li><a href="#">菜单项32</a></li>

            </ul>

        </li>

    </ul>

</body>

</html>

</span>

　　CSS代码：

<span style="font-size:18px;">body {

}

ul,li{

    /*清除菜单前面的点和圈*/

    list-style:none;

}

ul {

    padding:0;

    margin:0;

}

.main ,.hmain {

    background-image:url(../images/title.gif);

    background-repeat:repeat-x;

    width:100px;

}

li{

    background-color:#999;

}

a{

    /*取消全部的下划线*/

       text-decoration:none;

       padding-left:15px;

       display:block ;   /*让a标签充满这个区域*/

       /*针对IE6*/

       display:inline-block;

       width:85px;

       padding-top:3px;

       padding-bottom:3px;

}

.main a , .hmain a{

    color:white;

    background-image:url(../images/collapsed.gif);

    background-repeat:no-repeat;

    background-position:3px center;

}

.main li a, .hmain li a {

    color:black;

    background-image:none;

}

.main ul , .hmain ul{

    display:none;

}

.hmain{

    float:left;

    margin-left:1px;

}</span>

　　JQuery代码：

<span style="font-size:18px;">$(function () {

    $(".main > a , .hmain > a").click(function () {

        //找到主菜单相应的子菜单

        var ulNode = $(this).next("ul");

        //if (ulNode.css("display") == "none") {

        //     ulNode.css("display", "block");

        //} else {

        //    ulNode.css("display", "none");

        //}

        //ulNode.show("normal");//slow, fast, 500

        //ulNode.hide();

        //ulNode.toggle();//显示和隐藏。自己主动推断

        //ulNode.slideDown("slow");//显示

        //ulNode.slideUp();//隐藏

        ulNode.slideToggle();

        changeIcon($(this));

    });

    $(".hmain").hover(function () {

        $(this).children("ul").show("fast");

        changeIcon($(this).children("a"));

    }, function () {

        $(this).children("ul").hide("fast");

        changeIcon($(this).children("a"));

    });

});

//改动主菜单的指示图标

function changeIcon(mainNode) {

    if (mainNode) {

        if (mainNode.css("background-image").indexOf("collapsed.gif")>=0) {

            mainNode.css("background-image", "url(../images/expanded.gif)");

        } else {

            mainNode.css("background-image", "url(../images/collapsed.gif)");

        }

    }

}</span>

1.HTML总结：

1.页面中的菜单项能够通过嵌套ul和li来表示

2.CSS总结：

1.list-style属性为none时能够清除ul和li前面的小圆点

2.能够使用background-repeat来控制背景图的反复填充方式

3. text-decoration属性值为none时，能够取消文字上的下划线

4,.display的值为none能够用于隐藏元素

3.JQuery总结：

1. .main a 和 .main >a不同之处是。前者选择使用了.main的这个class的元素内部的全部的a节点，后者仅仅选择了.main的子节点中的a节点

2. show，hide方法能够用于显示或隐藏元素，。没有參数时的效果和改动CSS的display属性效果一样。

參数能够是单位为毫秒的数字。或者是‘slow’。‘normal’，‘fast’这三个文字都能够来控制完毕显示或隐藏须要的时间。

3.toggle方法更为强大，能够省去推断元素是显示还是隐藏的状态。能够让显示的元素隐藏起来，能够让隐藏的元素显示出来，參数用法和show，hide同样。

Jquery实战——横纵向的菜单的更多相关文章

利用jQuery设计横/纵向菜单
在网页中,菜单扮演着"指路者"的角色.怎样设计一个人性化的菜单呢.以下小编带着大家一起做. 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...
JQuery实战总结二横向纵向菜单下拉效果图
记得以前在浏览了大多数网站的上面发现很多下拉的导航栏,觉得特别好玩,毕竟咱们是学习编程的嘛,对这下拉的效果还是挺感兴趣的,这种淡入淡出,随着鼠标移动的位置不同.有无等而出现不同的效果,给用户以神美感. ...
JQuery实战---窗口效果
在前面的相关博文中,小编对jquery的相关知识进行了简单的总结,关于jquery的很多小的知识点,都需要我们自己去动手和实践,一行行代码都需要我们自己亲自动手去敲,今天我们继续来学习jquery的相 ...
jquery实现多级下拉菜单
支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
jquery 只有二级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
web标准(复习)--4 纵向导航菜单及二级弹出菜单
今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表标签的默认样式 css派生选择器 css选择器的分组纵向二级列表相对定位和绝对定位一.纵向列表纵向列表或称为纵向导航 ...
JQUERY 插件开发——MENU（导航菜单）
JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...
jquery实战---标签页效果
在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

随机推荐

《跟老齐学Python Django实战》读后感
1.说一下这本书,讲解的很细致,内容选取足够入门Django. 2.在学习这本书要注意的几点: <1>如果你想跟着敲这本书的代码必须要安装:Django版本1.10.1(当然也可以玩玩新版 ...
web.xml中的dispatchservlet后，js，css，甚至gif都不能正常显示
这个可以说是很多初学Springmvc的人都会碰到一个令人头痛的问题那就是为什么我配置好web.xml中的dispatchservlet后,js,css,甚至gif都不能正常显示了我们来看看我们配 ...
/proc/mounts介绍
现在的 Linux 系统里一般都有这么三个文件:/etc/fstab,/etc/mtab,和 /proc/mounts,比较容易让人迷惑.简单解释一下. /etc/fstab 是只读不写的,它提供的是 ...
CSS&&xpath
1.元素选择器 <div class="wrap"> 直接选择文档元素div 2.类选择器 <div class="wrap"> 元素的 ...
洛谷P1554 梦中的统计题解
题目传送门这道题暴力又让我过了...数据真的很水(luogu) 暴力枚举n~m的每个数,再统计一次,交付评测...AC #include<bits/stdc++.h> using nam ...
Three.js基础探寻八——法向材质与材质的纹理贴图
4.法向材质法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的 ...
PHP实现插入排序
插入排序思想: 插入排序(Insertion Sort)的算法描述是一种简单直观的排序算法. 它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描, 找到相应位置并插入.插入排序 ...
提起Ajax请求的方式(POST)
前言 => 是ES6中的arrow function x=>x+6 就相当于 function(x){ return x+6; } 正文 XMLHttpRequest a=new XMLH ...
JS中关于换行的2个坑
//第一个为ul/ol使用中的li使用需要注意的地方 1.<ul id="banner_indicator"><li></li><li&g ...
nyoj 737 石子合并 http://blog.csdn.net/wangdan11111/article/details/45032519
http://blog.csdn.net/wangdan11111/article/details/45032519 http://acm.nyist.net/JudgeOnline/problem. ...

Jquery实战——横纵向的菜单

Jquery实战——横纵向的菜单的更多相关文章

随机推荐

热门专题