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>

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                     }

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 timer11 function mcancelclosetime() {12     if (closetimer) {13         window.clearTimeout(closetimer);14         closetimer = null;15     }16 }17 18 // close layer when click-out19 document.onclick = mclose;20 // -->21 22 $(function () {23     // open hidden layer24     $(".a_nav_Menu").mouSEOver(function () {25         var currentId = $(this).attr("id");26 27         // cancel close timer28         mcancelclosetime();29 30         // close old layer31         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 it36         ddmenuitem = document.getElementById(currentId.replace("a_", ""));37         ddmenuitem.style.visibility = 'visible';38     });39 40     // go close timer41     $(".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 timer49     $(".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/ 关于作者：专注于微软平台的项目开发。如有问题或建议，请多多赐教！ 版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。 特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我 声援博主：如果您觉得文章对您有帮助，可以点击文章右下角“推荐”一下。您的鼓励是作者坚持原创和持续写作的最大动力！