jquery 实现下拉菜单

浏览数：22 / 时间：2015年06月09日

Jquery 是一个轻量的框架，个人认为非常好用，今天就写一个非常简单的例子，实现下拉菜单功能；

首先肯定要在页面引用jquery.js  版本不限 ；

接下来把=====================html贴出来：

 

Html代码  技术分享
  1. <div class=”header_menu”>  
  2.         <ul>  
  3.             <li class=”menuli” id=”xtgl_menu”>系统管理</li>  
  4.             <li class=”menuli” id=”ggsq_menu”>干管所勤</li>  
  5.             <li class=”menuli” id=”bhz_menu”>保护站</li>  
  6.             <li class=”menuli” id=”mcjy_menu”>木材检验</li>  
  7.             <li class=”menuli” id=”slgh_menu”>森林管护</li>  
  8.         </ul>  
  9.     </div>  
  10.   
  11. <div class=”display movediv” id=”slgh_menu_div”>  
  12.     <ul>  
  13.         <li class=”redli”>出勤管理</li>  
  14.         <li class=”redli”>巡视管理</li>  
  15.         <li class=”redli”>现场取证</li>  
  16.         <li class=”redli”>问题处置</li>  
  17.     </ul>  
  18. </div>  
  19. <div class=”display movediv” id=”mcjy_menu_div”>  
  20.     <ul>  
  21.         <li class=”redli”>位置监测</li>  
  22.         <li class=”redli”>检验管理</li>  
  23.     </ul>  
  24. </div>  
  25. <div class=”display movediv” id=”bhz_menu_div”>  
  26.     <ul>  
  27.         <li class=”redli”>出勤管理</li>  
  28.         <li class=”redli”>监管信息</li>  
  29.     </ul>  
  30. </div>  
  31. <div class=”display movediv” id=”ggsq_menu_div”>  
  32.     <ul>  
  33.         <li class=”redli”>出勤管理</li>  
  34.         <li class=”redli”>监管信息</li>  
  35.     </ul>  
  36. </div>  
  37. <div class=”display movediv” id=”xtgl_menu_div”>  
  38.     <ul>  
  39.         <li class=”redli”>权限管理</li>  
  40.         <li class=”redli”>设备管理</li>  
  41.     </ul>  
  42. </div>  

 

===========================css样式：

Css代码  技术分享
  1. /**头部菜单**/  
  2. .header_menu{  
  3.     float:right;  
  4.     width: 50%;  
  5.     height: 100%;  
  6.     cursor: pointer;  
  7.       
  8. }  
  9.   
  10. .header_menu ul{  
  11.     list-style: none;  
  12.     height: 100%;  
  13.   
  14. }  
  15. .header_menu ul li{  
  16.     float: right;  
  17.     width: 20%;  
  18.     color:white;  
  19.     font-size:14px;  
  20.     padding-top: 55px;  
  21.     font-weight: bold;  
  22. }  
  23.   
  24. .display{  
  25.     display: none;  
  26. }  
  27. .display ul{  
  28.     list-style: none;  
  29.     width: 100px;  
  30. }  
  31. .display ul li{  
  32.     padding-top:10px;  
  33.     padding-bottom: 5px;  
  34.     padding-left:5px;  
  35.     cursor: pointer;  
  36.     font-size: 14px;  
  37. }  
  38. .movediv{  
  39.     position: fixed;  
  40.     left: 0px;  
  41.     top:0px;  
  42.     font-size: 14px;  
  43.     white;  
  44.     border:1px solid white;  
  45. }  
  46. .redcolor{  
  47.     #a0c9e6;  
  48. }  
  49.   
  50.    

 

=======================js脚本

Js代码  技术分享
  1. $(function() {  
  2.     // 菜单绑定事件  
  3.     initMenuListener();  
  4.     // 下拉菜单绑定事件  
  5.     initSubMenuHover();  
  6.     // 下拉菜单颜色改变  
  7.     initSubMenuLiHover();  
  8. });  
  9.   
  10. /** 
  11.  * 头部菜单绑定滑过事件 
  12.  */  
  13. function initMenuListener() {  
  14.   
  15.     $(“.menuli”).hover(function() {  
  16.         var hideDivId = $(this).attr(“id”) + “_div”;  
  17.         // 得到菜单的位置  
  18.         var left = $(this).offset().left;  
  19.         var top = $(this).offset().top;  
  20.         var height = $(this).outerHeight();//outerHeight是获取高度，包括内边距，height是也是获取高度，不过只包括文本高度  
  21.   
  22.         $(“#” + hideDivId).show();  
  23.         $(“#” + hideDivId).css(“left”, left);  
  24.         $(“#” + hideDivId).css(“top”, top + height);  
  25.   
  26.     }, function() {  
  27.         // 将原来的菜单隐藏  
  28.         $(“.display”).hide();  
  29.     });  
  30. }  
  31. /** 
  32.  * 下拉菜单绑定事件 
  33.  */  
  34. function initSubMenuHover() {  
  35.     $(“.display”).hover(function() {  
  36.         $(this).show();  
  37.     }, function() {  
  38.         $(this).hide();  
  39.     });  
  40. }  
  41. /** 
  42.  *  下拉菜单改变颜色 
  43.  */  
  44. function initSubMenuLiHover() {  
  45.     $(“.redli”).hover(function() {  
  46.         $(this).addClass(“redcolor”);  
  47.     }, function() {  
  48.         $(this).removeClass(“redcolor”);  
  49.     });  
  50. }  

 

效果如下：

技术分享

jquery实现下拉菜单

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 com src html 问题 http si class style 代码 com src html 问题 http si

相关文章

随机文章

您可能还喜欢

您可能还喜欢