照例，先上代码，
HTML代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实践3-菜单效果</title> <script src="https://www.jb51.net/script/jquery-1.8.2.js"></script> <script src="https://www.jb51.net/script/menu.js"></script> <link href="https://www.jb51.net/CSS/menu.css" /> </head> <body> <ul> <li> <a href="#" >菜单项1 </a> <ul> <li><a href="#" >子菜单项1.1</a></li> <li><a href="#" >子菜单项1.2</a></li> <li><a href="#" >子菜单项1.3</a></li> </ul> </li> <li> <a href="#" >菜单项2 </a> <ul> <li><a href="#" >子菜单项2.1</a></li> <li><a href="#" >子菜单项2.2</a></li> <li><a href="#" >子菜单项2.3</a></li> </ul> </li> <li> <a href="#" >菜单项3 </a> <ul> <li><a href="#" >子菜单项3.1</a></li> <li><a href="#" >子菜单项3.2</a></li> <li><a href="#" >子菜单项3.3</a></li> </ul> </li> </ul> <br /> <br /> <br /> <br /> <ul> <li> <a href="#" >菜单项1 </a> <ul> <li><a href="#" >子菜单项1.1</a></li> <li><a href="#" >子菜单项1.2</a></li> <li><a href="#" >子菜单项1.3</a></li> </ul> </li> <li> <a href="#" >菜单项2 </a> <ul> <li><a href="#" >子菜单项2.1</a></li> <li><a href="#" >子菜单项2.2</a></li> <li><a href="#" >子菜单项2.3</a></li> </ul> </li> <li> <a href="#" >菜单项3 </a> <ul> <li><a href="#" >子菜单项3.1</a></li> <li><a href="#" >子菜单项3.2</a></li> <li><a href="#" >子菜单项3.3</a></li> </ul> </li> </ul> </body> </html>
CSS代码：
ul, li { /*清除ul和li前面的原点*/ list-style: none; } ul { /*清除子菜单的缩进值*/ padding: 0; margin: 0; } .main, .hmain { /*给出菜单栏背景图片*/ background-image: url(../img/菜单效果/title.gif); background-repeat: repeat-x; width: 120px; } li { background-color: #EEEEEE; } a { /*取消所有的下划线*/ text-decoration: none; padding-left: 20px; display: block; display: inline-block; width: 100px; padding-top: 3px; padding-bottom: 3px; } .main a, .hmain a{ color: white; background-image: url(../img/菜单效果/collapsed.gif); background-repeat: no-repeat; background-position: 3px center; } .main li a, .hmain li a{ color: black; background-image: none; } .main ul, .hmain ul{ display: none; } .hmain { float: left; margin-left:1px; }
JavaScript代码：
$(document).ready(function () { //页面中的DOM已经装载完成时，执行的代码 $(".main > a").click(function () { ////找到主菜单项对应的子菜单项 var ulNode = $(this).next("ul"); ulNode.slideToggle(); changeIcon($(this)); }); //简化成下列代码 $(".hmain ").hover(function () { $(this).children("ul").slideDown(); changeIcon($(this).children("a")); }, function () { $(this).children("ul").slideUp(); changeIcon($(this).children("a")); }); }); //修改主菜单的指示图标 function changeIcon(mainNode) { if (mainNode) { if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) { mainNode.css("background-image", "url('img/菜单效果/expanded.gif')"); } else { mainNode.css("background-image", "url('img/菜单效果/collapsed.gif')"); }; }; };
这次代码稍微有点长，但是对于一目十行的大神们来说这都不算啥！
总结
HTML知识点：
页面中的菜单项可以通过嵌套的ul和li来表示
菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单
浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进。Opera浏览器比较特殊，li的标识符和其他浏览器不同
CSS知识点：
list-style属性值为none时，可以清除ul和li前面的小圆点
清除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只有margin也为0的时候才可以清除缩进值