Three Ways to Implement Second-Level Dropdown Menu in Navigation Menu in JavaScript

　　We can see some secondary dropdown menus used on large websites like Taobao, Sogou, etc., such as the following picture. So how to implement the secondary dropdown menu in the navigation menu bar? Below, the editor shares the implementation ideas.

But how to implement a similar image? In fact, there are at least three ways to do it. Below, I attach the code for your reference.

1.Only using html and css

<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; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
/*Key point one: Set the secondary menu to 'display: none';*/
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
/*Key point two: Set 'display: block' when hovering over the primary menu subordinate to the secondary menu*/
ul li:hover ul{display: block;}
</style>
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Car</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="#">Xiaomi</a> </li>
<li><a href="#">Huawei</a> </li>
</ul>
</li>
<li><a href="">Contact Us</a></li>
</ul>
</div>

　　We can see that this method is quite good, as it ensures the complete separation of structure and presentation.

2.Using javasc

<!DOCTYPE htm>
<html lang="en">
<head >
<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; height: 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 onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Car</a>
<!-- Key point one: Set the time execution program within the primary title tag subordinate to the secondary title, 'this' represents the li element -->
<ul>
<li><a href="#">Audi</a> </li>
<li><a href="#">Dodge</a> </li>
</ul>
</li>
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">Mobile</a>
<ul>
<li><a href="#">Xiaomi</a> </li>
<li><a href="#">Huawei</a> </li>
</ul>
</li>
<li><a href="#">Contact us</a></li>
</ul>
</div> 
script>
function show(li){
var ul=li.getElementsByTagName("ul")[0];
// Key point two: Search for the tag with the name 'ul' within the object 'li', as there is only one secondary tag, the index is 0.
ul.style.display="block";
// Key three: When the mouse hovers over li, the display of the ul tag of its child element is block
}
function hide(li){
var ul=li.getElementsByTagName("ul")[0];
ul.style.display="none";
// Key four: When the mouse leaves the li, the display of its child element ul is none
}
/script>

Implementing with JavaScript is more complicated, and the structure and behavior are not separated here (although it is possible to use DOM to create separation of structure and behavior in JavaScript, but it is very cumbersome), not recommended.

3Implement with jQuery

　　jQuery is a JavaScript library that we can download the latest version of the library file from the jQuery official website. The compressed file is used for products, and the uncompressed file is for developers to learn and debug. After downloading to the local machine, the library file needs to be referenced in the html, as jQuery is essentially JavaScript, so the reference method is:　　　

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

The following code implements a second-level dropdown menu using jQuery:

<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; height: 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="">Car</a>
<ul>
<li><a href="#">Audi</a> </li>
<li><a href="#">Dodge</a> </li>
</ul>
</li>
<li class="navmenu"><a href="">Phone</a>
<ul>
<li><a href="#">Xiaomi</a> </li>
<li><a href="#">Huawei</a> </li>
</ul>
</li>
<li><a href="">Contact Us</a></li>
</ul>
</div> 
<!-- Key one: Include the jQuery library file -->
script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
}
}
// Key two: Use jQuery syntax correctly to complete the behavior.
$(function(){
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
}
}
/script>

　Obviously, using jQuery is very convenient.

The final implementation effect is as follows;

The corresponding second-level menu will appear when the mouse hovers over the first-level menu.

The above-mentioned is the introduction of the editor to everyone about the three ways to implement the second-level dropdown menu in the navigation menu in JS, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. Thank you very much for your support of the Yell Tutorial website!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial