jq+css+html打造下拉導航選單例項

相信導航欄下拉選單是web開發最常見的一個item了.這裡就不做介紹了，直接上code。

Html部分

 1  

 2         

 3             


 4                 

 5                 
 6             
 7             


 8                 

 9                     @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
10                     @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
11                     @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
12                     @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
13                     @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
14                 
15             
16             


17                 

18                     
19                     
20                 
21             
22             


23                 

24                     
25                     
26                     
27                 
28             
29         
30     

CSS部分

 1 #sddm {
 2             margin: 0 auto;
 3         }
 4 
 5             #sddm li {
 6                 margin: 0;
 7                 padding: 0;
 8                 list-style: none;
 9                 float: left;
10                 font: bold 12px arial;
11             }
12 
13                 #sddm li a {
14                     display: block;
15                     margin: 0 1px 0 0;
16                     padding: 4px 10px;
17                     width: 60px;
18                     color: #49AB6E;
19                     text-align: center;
20                     text-decoration: none;
21                 }
22 
23                     #sddm li a:hover {
24                         background: #49AB6E;
25                         color: white;
26                     }
27 
28             #sddm div {
29                 position: absolute;
30                 visibility: hidden;
31                 margin: 0;
32                 padding: 0;
33             }
34 
35                 #sddm div a {
36                     position: relative;
37                     display: block;
38                     margin: 0;
39                     width: auto;
40                     white-space: nowrap;
41                     text-align: center;
42                     text-decoration: none;
43                     background: #49AB6E;
44                     color: white;
45                     font: 12px arial;
46                 }
47 
48                     #sddm div a:hover {
49                         background: #E5D6B8;
50                         color: white;
51                     }

JS部分

 1 var timeout = 1;
 2 var closetimer = 0;
 3 var ddmenuitem = 0;
 4 
 5 // close showed layer
 6 function mclose() {
 7     if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 8 }
 9 
10 // cancel close timer
11 function mcancelclosetime() {
12     if (closetimer) {
13         window.clearTimeout(closetimer);
14         closetimer = null;
15     }
16 }
17 
18 // close layer when click-out
19 document.onclick = mclose;
20 // -->
21 
22 $(function () {
23     // open hidden layer
24     $(".a_nav_Menu").mouseover(function () {
25         var currentId = $(this).attr("id");
26 
27         // cancel close timer
28         mcancelclosetime();
29 
30         // close old layer
31         if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
32         $("#" + currentId.replace("a_","")).width($("#" + currentId).parent().width() - 1);
33         $("#" + currentId).css({ "background": "#49AB6E", "color": "white" });
34 
35         // get new layer and show it
36         ddmenuitem = document.getElementById(currentId.replace("a_", ""));
37         ddmenuitem.style.visibility = 'visible';
38     });
39 
40     // go close timer
41     $(".a_nav_Menu").mouseout(function () {
42         var currentId = $(this).attr("id");
43         $("#" + currentId).css({ "background": "", "color": "#49AB6E" });
44         
45         closetimer = window.setTimeout(mclose, timeout);
46     });
47 
48     // go close timer
49     $(".div_nav_Menu").mouseout(function () {
50         var currentId = $(this).attr("id");
51         $("#a_" + currentId).css({ "background": "", "color": "#49AB6E" });
52         closetimer = window.setTimeout(mclose, timeout);
53     });
54 
55     $(".div_nav_Menu").mouseover(function () {
56         var currentId = $(this).attr("id");
57         $("#a_" + currentId).css({ "background": "#49AB6E", "color": "white" });
58         mcancelclosetime();
59     });
60 })