轩枫阁

首页 / Web前端 / 授人以渔 / JQuery / jQuery制作多级导航菜单

jQuery制作多级导航菜单

阅读：7226 评论：0 作者：ivan 分类：JQuery、授人以渔

前言

假使我们不需要兼容IE6这个浏览器的话，我们完全可以使用纯CSS来制作一个多级导航。比如说写的《Pure CSS Vertical Menu 》就是一个纯CSS制作的导航。那么今天我也要介绍一个不用插件制作的导航，而且用户不支持js的情况下，在现代浏览器中多级导航菜单功能也正常。首先可以看下面的一个Demo。

目标

今天主要目标制作一个像下图所示的导航菜单

level-fourth-demo
这个导航有一个最大的特点：在现代浏览器中无需任何脚本也支持下拉菜单的功能。

第一步：HTML Markup

首先我们需要一个正常而又清晰的导航菜单结构，一般我们都是这样写的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<ul id="nav">
    <li><a href="">Home</a></li>
    <li>
        <a href="">About</a>
        <ul>
            <li><a href="">About Us</a></li>
            <li><a href="">About Team</a></li>
            <li>
                <a href="">About You</a>
                <ul>
                    <li><a href="">More About Us</a></li>
                    <li><a href="">More About Team</a></li>
                    <li><a href="">More About You</a>
                        <ul>
                            <li><a href="">level4</a></li>
                            <li><a href="">level4</a></li>
                            <li><a href="">level4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Blog</a></li>
</ul>

 

第二步：CSS Code

上面我们完成了基本结构，接下来我们要使用样式来美化他，不过这里和平时美化稍有不同，因为还需要考虑到使用样式控制下拉菜单的显示与隐藏功能。别的不说，我们直接上代码才一关键：

1、顶级导航样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*Menu*/
#nav {
        background: #e5e5e5;
        float: left;
        margin: 0; padding: 0;
        border: 1px solid white;
        border-bottom: none;
}
#nav li a,
#nav li {
        float: left;
}
#nav li {
        list-style: none;
        position: relative;
}
#nav li a {
        padding: 1em 2em;
        text-decoration: none;
        color: white;
        background: #292929;
        background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
        background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
        border-right: 1px solid #3c3c3c;
        border-left: 1px solid #292929;
        border-bottom: 1px solid #232323;
        border-top: 1px solid #545454;
}
#nav li a:hover {
        background: #2a0d65;
        background: -moz-linear-gradient(top, #11032e, #2a0d65);
        background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

上面主要修饰的是顶级导航的样式，接下来看第二步。

2、二级菜单样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Submenu */
.hasChildren {
        position: absolute;
        width: 0px; height: 0px;
        border: 5px solid #000;
        border-color: #fff #000 #000;
        background: black;
        right : 0;
        bottom: 18px;
}
 
#nav li ul .hasChildren {
        border-color: #000 #000 #000 #fff;
        bottom: 20px;
        right: 5px;
}
#nav li ul {
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        padding: 0; margin: 0;
}
#nav li:hover &gt; ul {
        display: block;
}
#nav li ul li,
#nav li ul li a {
        float: none;
}
* html #nav li ul li {
        display: inline; /* for IE6 */
}
#nav li ul li a {
        width: 150px;
        display: block;
}

这里有一个关键地方：菜单加载进页面时，所有子级菜单项都是被隐藏,

1
2
3
4
5
6
7
#nav li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 0; margin: 0;
}

然后我们利用的是CSS的”:hover”来实现，当鼠标次级导航的父元素上时，他才被显示，当鼠标离开时又被隐藏：

1
2
3
#nav li:hover &gt; ul {
    display: block;
}

只是在IE6的浏览器中并不支持“li:hover”功能（具体解决办法可以参考《浏览器兼容之旅的第四站:IE常见Bug——part2》），以致于我们使用纯CSS制作下拉导航存在一个隐患，但对于弃用了IE6的朋友，那是没有问题的。

另外我们这里使用的三角标志也是纯CSS的制作，如上图所示，具体实现方法：我们采用元素的0宽度和高度，并使用元素的border属性来制作，请看三角实现的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*向下的三角形*/
.hasChildren {
        position: absolute;
        width: 0px; height: 0px;
        border: 5px solid #000;
        border-color: #fff #000 #000;
        background: black;
        right : 0;
        bottom: 18px;
}
/*向右的三角形*/
#nav li ul .hasChildren {
        border-color: #000 #000 #000 #fff;
        bottom: 20px;
        right: 5px;
}

如果对这种制作方法感兴趣的，可以点击写的《How to Create DIV Shapes Like Triangles and Circles》。

3、三级（或更深层级）样式

前面两步都是一级二级菜单样式，其实三级菜单或者说四级菜单，他们的基本样式都和前面的一样，只不过是一个位置的不同而以二级菜单通常都是在一级导航的下面，而三级菜单通常是在二级的右边，四级就是三级的右边，依些类推放置。下面我们来看其代码：

1
2
3
4
5
6
7
8
/* SUBSUB Menu */
#nav li ul li ul {
        display: none;
}
#nav li ul li:hover ul {
        left: 100%;
        top: 0;
}

此处也是利用“li:hover”来控制下拉菜单的显示和隐藏功能。

那么最后样式就如下所示：

CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/* MENU */
#nav {
    background: #e5e5e5;
    float: left;
    margin: 0; padding: 0;
    border: 1px solid white;
    border-bottom: none;
}
#nav li a,
#nav li {
    float: left;
}
#nav li {
    list-style: none;
    position: relative;
}
#nav li a {
    padding: 1em 2em;
    text-decoration: none;
    color: white;
    background: #292929;
    background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
    background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
    border-right: 1px solid #3c3c3c;
    border-left: 1px solid #292929;
    border-bottom: 1px solid #232323;
    border-top: 1px solid #545454;
}
#nav li a:hover {
    background: #2a0d65;
    background: -moz-linear-gradient(top, #11032e, #2a0d65);
    background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
    position: absolute;
    width: 0px; height: 0px;
    border: 5px solid #000;
    border-color: #fff #000 #000;
    background: black;
    right : 0;
    bottom: 18px;
}
 
#nav li ul .hasChildren {
    border-color: #000 #000 #000 #fff;
    bottom: 20px;
    right: 5px;
}
#nav li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 0; margin: 0;
}
#nav li:hover &gt; ul {
    display: block;
}
#nav li ul li,
#nav li ul li a {
    float: none;
}
* html #nav li ul li {
    display: inline; /* for IE6 */
}
#nav li ul li a {
    width: 150px;
    display: block;
}
/* SUBSUB Menu */
#nav li ul li ul {
    display: none;
}
#nav li ul li:hover ul {
    left: 100%;
    top: 0;
}

其实到此为此，我们这个多级菜单导航功能在现代浏览器中就可以正常运行了，但由于在”IE6″下不支持“li:hover”致使无法正常运行，而IE6相对来说还是蛮多人在使用，那么为了让其达到一样的效果，我们就接着使用jQuery，让这个多级导航菜单在各浏览器中都能运行。

第三步：jQuery Code

前面也说了，达到前面DEMO展示的效果，在现代浏览器中到上面一步就算功德圆满了，可是还有一个IE6，我们只好使用JQuery方法来辅助完成，首先在第一步将jQuery版本库导进来：

1
&lt;script type="text/javascript" src="../js/jquery.min.js"&gt;&lt;/script&gt;

下面接着看实现功能的jQuery代码

1、jQuery实现的方法一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
    //遍历#nav中的所有li
    $('#nav').find('li').each(function(){
            //如果li中含有ul
            if($(this).find('ul').length &gt; 0) {
                    //插入span.hasChildren，（三角标志）
                    $('&lt;span /&gt;').appendTo($(this).children(":first"));
                    //给li绑定一个hover事件
                    $(this).hover(function(){
                            //:hover状态，显示子菜单
                            $(this).find('&gt;ul').stop(true,true).slideDown();
                    },function(){
                            //mouseout状态隐藏子菜单
                            $(this).find('&gt;ul').stop(true,true).hide();
                    });
            }
    });
});

2、jQuery实现的方法二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function(){
var site = function(){
    this.navLi = $('#nav li').children('ul').hide().end();
    this.init();
}
 
site.prototype = {
    init : function(){
         this.setMenu();
    },
    //Enables the slideDown menu, and adds suppert for IE6
    setMenu: function(){
        $.each(this.navLi,function(){
            if($(this).children('ul')[0]) {
                 $(this).append('&lt;span /&gt;');
            }
        });
 
        this.navLi.hover(function(){
            $(this).find('&gt;ul').stop(true,true).slideDown();
        },function(){
            $(this).find('&gt;ul').stop(true,true).hide();
        });
    }
}
 
new site();
});

这里我们主要使用了jQuery中的.hover()方法来控制子菜单的显示与否，当然我们带可以使用.mouseover()和.mouseout()方法来代替.hover()方法；而且这里还使用了.slideDown()方法，让动更显示更生动，当然大家还可以配合jquery.effects.core.js使用。具体效果，大家可以点击Demo，此例中和Demo稍有不同，感兴趣的可以查看代码，或直接将本例代码Copy到你本地，就能正常运行。

到此，一个生动而轻便的多级导航就完成了。在这个实例中，我们一起见证了两点：其一，在现代浏览器中使用纯CSS也一样能制作出靓丽好看的多级导航；其二，不使用任何jQuery插件，也能制作兼容性强，外观好看的多级导航菜单。如果你不在需要兼容IE6,你完全可以使用纯CSS来制作多级菜单。不知道你有没有心动，有心动就动手吧，自力更生，才能丰衣足食。

2011-09-29更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
   $(document).ready(function(){
    $('#nav ul').css({"display":"none"});//Opera Fix
      $('#nav li').each(function(){
        if($(this).find('ul').length>0) {
            $('<span class="hasChildren" />').appendTo($(this).children(":first"));
                $(this).hover(function(){
                    $(this).find('ul:first').css({"visibility":"visible","display":"none"}).show();                
                },function(){
                    $(this).find('ul:first').css({"visibility":"hidden"});
                });
            }
        });            
    });
</script>

 

转载自：W3CPLUS

标签：、

本文标题：jQuery制作多级导航菜单 - 轩枫阁

转载请务必注明出处，欢迎分享

如果觉得我的文章对您有用，欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
422/470
424/470

相关阅读

文章评论

  • 暂无评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间