相信导航栏下拉菜单是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 })
随时随地看视频
