你的位置:首页 > Java教程

[Java教程]jq+css+html简单实现导航下拉菜单


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

Html部分

 1 <div class="_nav"> 2     <ul id="sddm"> 3       <li><a href="http://www.cnblogs.com//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 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 })

View Code

 

 

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

注:本文为原创作品,转载请注入出处