相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code.
Html部分
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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部分
/*********************------------------------------Menu CSS------------------------*********************/
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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部分
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 })
这里只是简单实现一下,如果页面要求比较高,可能就不是很实用了,这个只是当时接了一个私活,因为比较注重业务而不是code所以就写的比较快。
作 者:请叫我头头哥
出 处:http://www.cnblogs.com/toutou/
关于作者:专注于基础平台的项目开发。如有问题或建议,请多多赐教!
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者直接私信我
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角“推荐”一下。您的鼓励是作者坚持原创和持续写作的最大动力!