导航和菜单的教程一
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
首先我们需要一个正常而又清晰的导航菜单结构，一般我们都是这样写的：
第二步：CSS Code
上面我们完成了基本结构，接下来我们要使用样式来美化他，不过这里和平时美化稍有不同，因为还需要考虑到使用样式控制下拉菜单的显示与隐藏功能。别的不说，我们直接上代码才一关键：
1、顶级导航样式
上面主要修饰的是顶级导航的样式，接下来看第二步。
2、二级菜单样式
这里有一个关键地方： 菜单加载进页面时，所有子级菜单项都是被隐藏,
然后我们利用的是CSS的":hover"来实现，当鼠标次级导航的父元素上时，他才被显示，当鼠标离开时又被隐藏：
只是在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属性来制作，请看三角实现的代码：
如果对这种制作方法感兴趣的，可以点击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、三级（或更深层级）样式
前面两步都是一级二级菜单样式，其实三级菜单或者说四级菜单，他们的基本样式都和前面的一样，只不过是一个位置的不同而以 二级菜单通常都是在一级导航的下面，而三级菜单通常是在二级的右边，四级就是三级的右边，依些类推放置。下面我们来看其代码：
这里的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实现的方法一：
2、jQuery实现的方法二：
这里我们主要使用了jQuery中的.hover()方法来控制子菜单的显示与否，当然我们带可以使用.mouseover()和.mouseout()方法来代替.hover()方法；而且这里还使用了.slideDown()方法，让动更显示更生动，当然大家还可以配合jquery.effects.core.js使用。具体效果，大家可以点击Demo，此例中和Demo稍有不同，感兴趣的可以查看代码，或直接将本例代码Copy到你本地，就能正常运行。
到此，一个生动而轻便的多级导航就完成了。在这个实例中，我们一起见证了两点：其一，在现代浏览器中使用纯CSS也一样能制作出靓丽好看的多级导航；其二，不使用任何jQuery插件，也能制作兼容性强，外观好看的多级导航菜单。如果你不在需要兼容IE6,你完全可以使用纯CSS来制作多级菜单。不知道你有没有心动，有心动就动手吧，自力更生，才能丰衣足食。
2011-09-29更新
如需转载烦请注明出处：W3CPLUS http://www.w3cplus.com/
先了解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/