`

导航和菜单的教程一

 
阅读更多
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>

如需转载烦请注明出处：W3CPLUShttp://www.w3cplus.com/
分享到：
| HTML中DL、DT、DD、em标记的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics