jquery 實現下拉式功能表

標籤：

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實現下拉式功能表

jquery 實現下拉式功能表