jQuery制作多级导航菜单

前面在《jQuery+Superfish制作下拉菜单》中介绍了使用jQueryJoel Birch写的Superfish插件制作下拉导航菜单。使用起来是方便,而且还可以制作出不同的导航,功能强大,但有时我们只是需要做一个多级导航菜单,没有必要使用插件来制作。假使我们不需要兼容IE6这个浏览器的话,我们完全可以使用纯CSS来制作一个多级导航。比如说写的《Pure CSS Vertical Menu 》就是一个纯CSS制作的导航。那么今天我也要介绍一个不用插件制作的导航,而且用户不支持js的情况下,在现代浏览器中多级导航菜单功能也正常。首先可以看下面的一个Demo

目标

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

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

第一步:HTML Markup

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

			<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、顶级导航样式

			/*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、二级菜单样式

			/* 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;
			}
		

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

			#nav li ul {
				display: none;
				position: absolute;
				left: 0;
				top: 100%;
				padding: 0; margin: 0;
			}
		

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

			#nav li:hover > ul {
				display: block;
			}
		

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

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

			/*向下的三角形*/
			.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、三级(或更深层级)样式

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

			/* SUBSUB Menu */
			#nav li ul li ul {
				display: none;
			}
			#nav li ul li:hover ul {
				left: 100%;
				top: 0;
			}
		

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

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

CSS Code

			/* 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版本库导进来:

			<script type="text/javascript" src="../js/jquery.min.js"></script>
		

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

1、jQuery实现的方法一:

			$(document).ready(function(){
				//遍历#nav中的所有li
				$('#nav').find('li').each(function(){
					//如果li中含有ul
					if($(this).find('ul').length > 0) {
						//插入span.hasChildren,(三角标志)
						$('<span class="hasChildren" />').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实现的方法二:

			$(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 class="hasChildren" />');
								}
							});

							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更新

<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

返回顶部