I believe the navigation drop-down menu is one of the most common items in Web development. I’m going to skip the introduction and go straight to code.

Html part

 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>
Copy the code

View Code

The CSS part

/*********************——————————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}Copy the code

View Code

JS part

 

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})Copy the code

View Code

 

 

This is just a simple implementation, if the page requirements are high, it may not be very practical, this is just a private job, because it is more focused on business rather than code so it is written faster.

About the author: Focus on basic platform project development. If you have any questions or suggestions, please feel free to comment! Copyright notice: The copyright of this article belongs to the author and the blog garden, welcome to reprint, but without the consent of the author must retain this statement, and give the original text link in a prominent place on the page of the article. For the record: all comments and messages will be answered as soon as possible. You are welcome to correct your mistakes and make progress together. Or directly message me to support the blogger: if you think the article is helpful to you, you can click on the lower right corner of the article “recommended”. Your encouragement is the author to adhere to the original and continuous writing of the biggest power! \