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>

View Code

CSS部分

/*********************------------------------------Menu 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                     }

View Code

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

View Code

 

 

这里只是简单实现一下，如果页面要求比较高，可能就不是很实用了，这个只是当时接了一个私活，因为比较注重业务而不是code所以就写的比较快。

作　　者：请叫我头头哥
出　　处：http://www.cnblogs.com/toutou/
关于作者：专注于微软平台的项目开发。如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角“推荐”一下。您的鼓励是作者坚持原创和持续写作的最大动力！