主要是利用jQuery来实现垂直菜单和水平菜单。实现效果如图：
第一步，创建一个HTML文件，如图，包含两个ul。当然把jquery库也引入进去了。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="jquery-3.1.0.min.js"></script> <link rel="stylesheet" href="app.css" type="text/css"> <title>menu</title> </head> <body> <!--垂直菜单--> <ul> <li class="main"> <a href="#">菜单1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> <li class="main"> <a href="#">菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> <li class="main"> <a href="#">菜单3</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> </ul> <br/> <br/> <br/> <!--水平菜单--> <ul> <li class="hmain"> <a href="#">菜单1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> <li class="hmain"> <a href="#">菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> <li class="hmain"> <a href="#">菜单3</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> </ul> <script type="text/javascript" src="app.js"></script> </body> </html>
第二步，给菜单设置样式，包括颜色，背景图片，a标签等等的样式。
ul,li{ list-style: none; } ul{ padding: 0; margin: 0; } .main,.hmain{ background-image:url(img/1.png) ; background-repeat: repeat-x; width: 100px; } li{ background-color: #cccccc; } a{ text-decoration: none; padding-left: 20px; display: block; width: 80px; padding-top: 3px; padding-bottom: 3px; } .main a,.hmain a{ color: white; background-image: url("img/y.png"); 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-right: 1px; }
第三步，就是利用jQuery给菜单设置响应效果了。其中，垂直菜单的原理是：当点击这个a标签时，把子菜单的display属性变为block，再次点击，更改为none。这里可以用if-else的条件判断，然后设置css（）方法，或者用hide/show/toggle，slideDown/slideUp方法。而水平菜单，用到的是hover属性，划过ul时的效果显示状态。
最后就是小图标的变化。用css修改方法即可。
$(document).ready(function(){ $(".main>a").click(function(){ var ulNode=$(this).next("ul"); //if(ulNode.css("display")=="none"){ // ulNode.css("display","block"); //}else{ // ulNode.css("display","none"); //} //ulNode.show(); //ulNode.hide(); //ulNode.toggle(3000);//数字，slow，normal，fast //ulNode.slideDown(); //ulNode.slideUp(); 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.css("background-image").indexOf("y.png")>=0){ mainNode.css("background-image","url('img/x.png')"); }else{ mainNode.css("background-image","url('img/y.png')"); } }
如需工程文件，可以留下邮箱。。