导航和菜单的教程一

jQuery制作多级导航菜单( 说的很详细)  http://www.w3cplus.com/jquery/how-to-build-and-enhance-more-level-navigation-menu

先了解css选择器http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
注意: 多元素的组合选择器
E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
E > F 子元素选择器,匹配所有E元素的子元素F
E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
E:hover 匹配鼠标悬停其上的E元素

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

第一步:HTML Markup
首先我们需要一个正常而又清晰的导航菜单结构,一般我们都是这样写的:
<body>
	<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>
</body>


第二步: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》) http://www.w3cplus.com/ten-most-common-ie-bugs-and-how-to-fix-them-part-2,以致于我们使用纯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;
}

如果对这种制作方法感兴趣的,可以点击Matt写的《How to Create DIV Shapes Like Triangles and Circles》 http://blog.mattforhire.ca/2011/08/10/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;
}

这里的left和top很特别,使得left之上级的后面,并与最后一个li的top同样水平为什么使用li:hover? E:hover 匹配鼠标悬停其上的E元素.
此处也是利用“li:hover”来控制下拉菜单的显示和隐藏功能。

其实到此为此,我们这个多级菜单导航功能在现代浏览器中就可以正常运行了,但由于在"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 http://www.w3cplus.com/

你可能感兴趣的:(教程)