前言
假使我们不需要兼容IE6这个浏览器的话,我们完全可以使用纯CSS来制作一个多级导航。比如说Devin R. Olsen写的《Pure CSS Vertical Menu 》就是一个纯CSS制作的导航。那么今天我也要介绍一个不用插件制作的导航,而且用户不支持js的情况下,在现代浏览器中多级导航菜单功能也正常。首先可以看下面的一个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 > 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 > 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; } |
如果对这种制作方法感兴趣的,可以点击Matt写的《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 > 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 |
<script type="text/javascript" src="../js/jquery.min.js"></script> |
下面接着看实现功能的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 > 0) { //插入span.hasChildren,(三角标志) $('<span />').appendTo($(this).children(":first")); //给li绑定一个hover事件 $(this).hover(function(){ //:hover状态,显示子菜单 $(this).find('>ul').stop(true,true).slideDown(); },function(){ //mouseout状态隐藏子菜单 $(this).find('>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('<span />'); } }); this.navLi.hover(function(){ $(this).find('>ul').stop(true,true).slideDown(); },function(){ $(this).find('>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
暂无评论