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

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

Html部分1  

2         

3             

Home

4                 

5                 

6             

7             

Employee

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             

Billing

17                 

18                     B Test1

19                     B Test2

20                 

21             

22             

Forecast

23                 

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