jq+css+html简单实现导航下拉菜单

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

Html部分

  <div class="_nav">
         <ul id="sddm">
             <li><a href="/Home/Index" id="a_nav_Home" class="a_nav_Menu">Home</a>
                 <div id="nav_Home" class="div_nav_Menu">
                 </div>
             </li>
             <li><a href="#" id="a_nav_Employee" class="a_nav_Menu">Employee</a>
                 <div id="nav_Employee" class="div_nav_Menu">
                     @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
                     @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
                     @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
                     @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
                     @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
                 </div>
             </li>
             <li><a href="#" id="a_nav_Billing" class="a_nav_Menu">Billing</a>
                 <div id="nav_Billing" class="div_nav_Menu">
                     <a href="#">B Test1</a>
                     <a href="#">B Test2</a>
                 </div>
             </li>
             <li><a href="#" id="a_nav_Forecast" class="a_nav_Menu">Forecast</a>
                 <div id="nav_Forecast" class="div_nav_Menu">
                     <a href="#">F Test1</a>
                     <a href="#">F Test2</a>
                     <a href="#">F Test3</a>
                 </div>
             </li>
         </ul>
     </div>

CSS部分

/*********************------------------------------Menu CSS------------------------*********************/

 #sddm {
             margin: 0 auto;
         }

             #sddm li {
                 margin:;
                 padding:;
                 list-style: none;
                 float: left;
                 font: bold 12px arial;
             }

                 #sddm li a {
                     display: block;
                     margin: 0 1px 0 0;
                     padding: 4px 10px;
                     width: 60px;
                     color: #49AB6E;
                     text-align: center;
                     text-decoration: none;
                 }

                     #sddm li a:hover {
                         background: #49AB6E;
                         color: white;
                     }

             #sddm div {
                 position: absolute;
                 visibility: hidden;
                 margin:;
                 padding:;
             }

                 #sddm div a {
                     position: relative;
                     display: block;
                     margin:;
                     width: auto;
                     white-space: nowrap;
                     text-align: center;
                     text-decoration: none;
                     background: #49AB6E;
                     color: white;
                     font: 12px arial;
                 }

                     #sddm div a:hover {
                         background: #E5D6B8;
                         color: white;
                     }

JS部分

 var timeout = 1;
 var closetimer = 0;
 var ddmenuitem = 0;

 // close showed layer
 function mclose() {
     if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 }

 // cancel close timer
 function mcancelclosetime() {
     if (closetimer) {
         window.clearTimeout(closetimer);
         closetimer = null;
     }
 }

 // close layer when click-out
 document.onclick = mclose;
 // -->

 $(function () {
     // open hidden layer
     $(".a_nav_Menu").mouseover(function () {
         var currentId = $(this).attr("id");

         // cancel close timer
         mcancelclosetime();

         // close old layer
         if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
         $("#" + currentId.replace("a_","")).width($("#" + currentId).parent().width() - 1);
         $("#" + currentId).css({ "background": "#49AB6E", "color": "white" });

         // get new layer and show it
         ddmenuitem = document.getElementById(currentId.replace("a_", ""));
         ddmenuitem.style.visibility = 'visible';
     });

     // go close timer
     $(".a_nav_Menu").mouseout(function () {
         var currentId = $(this).attr("id");
         $("#" + currentId).css({ "background": "", "color": "#49AB6E" });

         closetimer = window.setTimeout(mclose, timeout);
     });

     // go close timer
     $(".div_nav_Menu").mouseout(function () {
         var currentId = $(this).attr("id");
         $("#a_" + currentId).css({ "background": "", "color": "#49AB6E" });
         closetimer = window.setTimeout(mclose, timeout);
     });

     $(".div_nav_Menu").mouseover(function () {
         var currentId = $(this).attr("id");
         $("#a_" + currentId).css({ "background": "#49AB6E", "color": "white" });
         mcancelclosetime();
     });
 })

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

作　　者：请叫我头头哥

出　　处：http://www.cnblogs.com/toutou/

关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角“推荐”一下。您的鼓励是作者坚持原创和持续写作的最大动力！