jq+css+html打造下拉导航菜单实例

相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了，直接上code。

Html部分

 1  <div class="_nav">
 2         <ul id="sddm">
 3             <li><a href="/Home/Index" id="a_nav_Home" class="a_nav_Menu">Home</a>
 4                 <div id="nav_Home" class="div_nav_Menu">
 5                 </div>
 6             </li>
 7             <li><a href="#" id="a_nav_Employee" class="a_nav_Menu">Employee</a>
 8                 <div id="nav_Employee" class="div_nav_Menu">
 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                 </div>
15             </li>
16             <li><a href="#" id="a_nav_Billing" class="a_nav_Menu">Billing</a>
17                 <div id="nav_Billing" class="div_nav_Menu">
18                     <a href="#">B Test1</a>
19                     <a href="#">B Test2</a>
20                 </div>
21             </li>
22             <li><a href="#" id="a_nav_Forecast" class="a_nav_Menu">Forecast</a>
23                 <div id="nav_Forecast" class="div_nav_Menu">
24                     <a href="#">F Test1</a>
25                     <a href="#">F Test2</a>
26                     <a href="#">F Test3</a>
27                 </div>
28             </li>
29         </ul>
30     </div>

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 })