JS three ways to implement the two-level Drop-down menu in the navigation menu _javascript skills

We are in Taobao, Sohu and other large sites can see the use of some of the two Drop-down menu, such as the following picture. So how do you implement the level two Drop-down menu in the navigation menu bar? The following small series for everyone to share the realization of ideas.

But how do you implement a similar picture? In fact, we have at least three ways to implement, below, I enclose the code for your reference.

1. Use HTML and CSS only

<meta charset= "UTF-8" > <title>Document</title> <style> *{margin:0;padding:0;list-style:
None;text-decoration:none;} #nav {width:500px;height:40px;background: #ccc; margin:0 auto;} ul{background: #aaa} ul li{float:left; display:block; ight:40px; line-height:40px; Padding:0 20px;
Position:relative;} UL Li:hover{background: #cea; UL li ul li{float:none}/* Key one: The level two menu is set to display:none;*/ul Li ul{position:absolute;top:40p x;left:0;
Display:none;} UL Li ul li:hover{background:red./* Key two: In the two level menu subordinate to the first level menu, set to display:block;*/ul Li:hover Ul{display:block; </style > <div id= "nav" > <ul> <li><a href= "> Home </a></li> <li><a href=" "> Auto </a> <ul> <li><a href= "#" > Audi </a> </li> <li><a href= "#" > Dodge </a> </li> </ul> </li> <li><a href= "> Mobile </a> <ul> <li><a href=" # "> Millet </a> </li> <li><a href= "#" &GT, Huawei </a> </li> </ul> </li> <li><a href= "> Contact us </a></li> </ul> </div>

We can see that this method is better, and it ensures a complete separation of structure and performance.

2. With JAVASC

<! DOCTYPE htm>  

Using JavaScript is cumbersome, and there is no separation between structure and behavior (although you can try to create a DOM in JavaScript that makes structure and behavior separate but cumbersome), it is not recommended.

3. Implement with jquery

jquery is a JavaScript library where we can download the latest version of the library file on the jquery Web site, where the compressed files are for the product, and the compressed files are easy for developers to learn and debug. After downloading to this computer, you need to reference the library file to HTML, because jquery is also javascript in nature, so the reference is as follows:

<script src= "path name" ></script>

The code for implementing the Level two Drop-down menu in jquery is as follows:

<meta charset= "UTF-8" > <title>Document</title> <style> *{margin:0;padding:0;list-style:
None;text-decoration:none;} #nav {width:500px;height:40px;background: #ccc; margin:0 auto;} ul{background: #aaa} ul li{float:left; display:block; ight:40px; line-height:40px; Padding:0 20px;
Position:relative;} UL Li:hover{background: #cea; UL Li ul Li{float:none;} ul li ul{position:absolute;top:40px;left:0; Display:none} ul Li ul li:hover{background:red;} </style> <div id= "nav" > <ul> <li><a href= "" > Home </a> </li> <li class= "Navmenu" ><a href= "" > Auto </a> <ul> <li><a href= "#" > Audi </a > </li> <li><a href= "#" > Dodge </a> </li> </ul> </li> <li class= "Navmenu" ><a href= "" > Mobile </a> <ul> <li><a href= "#" > Millet </a> </li> <li><a href= "#" > Huawei </a> </li> </ul> </li> <li><a href= "" > Contact us </a></li> </ul> </div> <!--key one: Introduce jquery library file--> script type= "Text/javascript
"> $ (Function () {$ (". Navmenu "). MouseOver (function () {$ (this). Children (" UL ")-Show ();})}
Key two: Correct use of Jquey syntax to complete the behavior. $ (function () {$ (". Navmenu"). Mouseout (function () {$ (this). Children ("ul"). Hide ();})}/script>

Obviously, using jquery is very convenient.

The final realization effect is as follows;

That is, when the mouse across the first level menu, there will be a corresponding level two menu.

The above is a small set of JS to introduce three ways to implement the navigation menu in the two Drop-down menu, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!