标签：
jQuery如何实现竖向二级导航菜单:
二级导航菜单在网页设计中数不胜数，有横向导航菜单，也有竖向导航菜单。在个人的印象中，好像介绍实现横向导航的教程比较多，所以在这里咱们就单独介绍一下如何使用jQuery实现竖向导航菜单，这里只介绍如何实现此种功能，对于效果的美观度，可以自行修改设计。下面简单介绍一下如何实现此效果:
静态代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> body { font-size:12px; padding:0px; margin:0px; } #menu,#menu ul { list-style-type:none; margin: 0; padding: 0; width:160px; } #menu a { display:block; text-decoration: none; } #menu li { margin-top: 1px; } #menu li ul { display:none; } #menu li a { background:#ccc; color: #fff; padding:5px; } #menu li ul li a { background-color:green; color:#000; padding-left:20px; } </style> </head> <body> <ul id="menu"> <li> <a href="#">div+css专区</a> <ul> <li><a href="#">CSS学习</a></li> <li><a href="#">div+css教程</a></li> </ul> </li> <li> <a href="#">jQuery专区</a> <ul> <li><a href="#">实例教程</a></li> <li><a href="#">jQuery教程</a></li> <li><a href="#">jQuery特效</a></li> </ul> </li> <li> <a href="#">交流专区</a> <ul> <li><a href="#">搜索优化</a></li> <li><a href="#">运营交流</a></li> </ul> </li> </ul> </body> </html>
以上代码是代码的代码，这个时候二级菜单式是隐藏的。需要特别注意的是，二级菜单的ul是嵌套在li元素中，之所以这样，是为了便于jQuery代码的处理，比如当鼠标指针离开附近li的时候，二级菜单就可以隐藏，否则不容易当鼠标指针一旦一级菜单的li，二级菜单就会隐藏，无法选中二级菜单。为静态代码添加jQuery代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> body { font-size:12px; padding:0px; margin:0px; } #menu,#menu ul { list-style-type:none; margin: 0; padding: 0; width:160px; } #menu a { display:block; text-decoration: none; } #menu li { margin-top: 1px; } #menu li ul { display:none; } #menu li a { background:#ccc; color: #fff; padding:5px; } #menu li ul li a { background-color:green; color:#000; padding-left:20px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ jQuery.mymenu=function(selector){ $(selector).click(function(){ $(this).find("ul").css("display","block"); }); $(selector).mouseleave(function(){ $(this).find("ul").css("display","none"); }) } $.mymenu("#menu li"); }) </script> </head> <body> <ul id="menu"> <li> <a href="#">div+css专区</a> <ul> <li><a href="#">CSS学习</a></li> <li><a href="#">div+css教程</a></li> </ul> </li> <li> <a href="#">jQuery专区</a> <ul> <li><a href="#">实例教程</a></li> <li><a href="#">jQuery教程</a></li> <li><a href="#">jQuery特效</a></li> </ul> </li> <li> <a href="#">交流专区</a> <ul> <li><a href="#">搜索优化</a></li> <li><a href="#">运营交流</a></li> </ul> </li> </ul> </body> </html>
以上代码实现了我们想要的效果，不是太美观，不过框架和方法已经有了，可以根据需要自行修饰。
原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0427/242.html
标签：
原文地址：http://www.cnblogs.com/softwhy/p/4630740.html
