[通用]jQuery下拉菜单-学习篇 - Web前端

学了一段时间的jQuery了，很少写些分享的东西，年底了，公司的项目基本处在停滞时间了，终于有时间可以写点东西了，下面花了一天总结了一款通用且很实用的jQuery下拉菜单，希望能给大家带来帮助：

html代码：

1. <ul class="hhgg-menubox" id="nav-categories">

2.  <li class="hhgg-wfdh">

3. <a href="#nogo" class="nav-rqspf">让球胜平负</a>

4.             <ul>        

5.            <li><a href="#">过关固定奖金</a></li>        

6.            <li><a href="#">单关浮动奖金</a></li>        

7.            </ul>        

8.              </li>          

9.              <li class="hhgg-wfdh jian-bg">        

10.             <a href="#nogo">总进球数</a>        

11.             <ul>        

12.               <li><a href="#">过关固定奖金</a></li>        

13.               <li><a href="#">单关浮动奖金</a></li>        

14.               </ul>        

15.              </li>              

16.              <li class="hhgg-wfdh jian-bg2">        

17.            <a href="#nogo">比分</a>        

18.            <ul>        

19.            <li><a href="#">过关固定奖金</a></li>        

20.            <li><a href="#">单关固定奖金</a></li>        

21.               </ul>        

22.             </li>      
    

23.             <li class="hhgg-wfdh"><a href="#">单场决胜</a></li>        

24. </ul>        

JQuery代码：

1. <scripttype="text/javascript"></script>        

2.            //两个参数，一个导航ul标签的id，一个是下拉菜单的显示速度，越小越        

3.            function zvMenu(ulElementId,speed){        

4.              //jq一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。        

5.              $("#"+ulElementId).children("li:has(ul)").hover( function(){        

6.             $(this).find("ul>li:last").addClass("li-last-s1");//给每个下拉菜单的最后一个li元素添加CSS样式，此处非必要        

7.             $(this).children("ul").slideDown(speed);//JQ的slideDown方法，显示下拉菜单        

8.              },function(){        

9.             $(this).children("ul").hide();//隐藏下拉菜单        

10.              });        

11.              //JQ动画，可选        

12.              $("#"+ulElementId).find("li>ul>li>a").hover(        

13.              function(){        

14.             $(this).Animate({paddingLeft:"30px"},speed);        

15.              },function(){        

16.             $(this).animate({paddingLeft:"20px"},speed);        

17.              });        

18.            }        

19.            $(function(){        

20.            zvMenu("nav-categorIEs",100);//下拉菜单函数调用        

21.            });        

22. </script>
    

注：记得调用公用JQ代码,例如：
<script type="text/JavaScript" src="http://888.gtimg.com/JS/public/jQuery-1.7.2.min.js?t=20120928"></script>

css代码：

1. .hhgg-menubox{position:relative;width:716px;height:28px;line-height:28px;border:solid #C5C5C5 1px;background:#f1f1f1;}        

2. .hhgg-wfdh{position:relative;float:left;}        

3. .hhgg-wfdh a{display:block;margin:0;padding:0 15px;}        

4. a.nav-rqspf{background:#DFDDDD}        

5. .hhgg-wfdh ul{position:absolute;width:89px;display:none;border:solid #C5C5C5;border-width:0 1px 1px 1px;background:#fff;left:-1px;}        

6. .hhgg-wfdh ul li a{padding:0 0 0 10px;margin:0;}        

7. .hhgg-wfdh ul li a:hover{background:#EFEEEE;}        

总结：我们在做页面的时候多处出现下拉菜单，掌握了上面的方法直接在JQ代码中添加，改变ID名字即可，如下：

1.            $(function(){        

2.            zvMenu("nav-categories",100);//        

3.            zvMenu("nav-categories2",100);//        

4.            zvMenu("nav-categories3",100);//        

5.            ...
   

6.            });        

这是一款比较好的多个下拉菜单的应用，并且应用起来很方便，各位大侠有建议或者问题直接留言，谢谢！

相关文章“[通用]jQuery之tab切换-学习篇”。