相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code。
Html部分1
2
3
Home4
5
6
7
Employee8
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
Billing17
18 B Test1
19 B Test2
20
21
22
Forecast23
24 F Test1
25 F Test2
26 F Test3
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 })