jQuery combined with CSS to create dynamic drop-down menu_jquery

When a large submenu needs to be placed in a limited navigation menu space, we usually use a drop-down menu to make up for the lack of space. This article will show you how to use jQuery and CSS to create a dynamic drop-down menu in the least amount of time.

XHTML
The first thing is to introduce the jquery library into the head part of the page, which is necessary.

<script type="text/javascript" src="js/jquery.js"></script> 

Then I used an unordered list to build the menu.

<ul class="menu"> 
  <li><a href="#">首页</a></li> 
  <li><a href="#">服务</a></li> 
  <li><a href="#">案例</a></li> 
  <li><a href="#">关于</a></li> 
  <li><a href="#">BLOG</a></li> 
</ul> 

It is clear at a glance and looks very simple. Since the drop-down menu is closed at first, I also need to create a visible button that can trigger the drop-down. This article directly uses a picture as the trigger button for convenience. And place the picture at the top of the menu list

<img src="nav.gif" width="184" height="32" class="menu_head" /> 

CSS
Create CSS styles for the menus respectively, please see the code:

.menu_head{border:1px solid #998675; background:#f30} 
.menu{display:none; width:184px; border:1px solid #998675; border-top:none} 
.menu li{list-style:none; background:#493e3b} 
.menu li a{padding:10px; display:block;color:#fff; text-decoration:none;} 
.menu li a:hover{font-weight:bold;} 
.menu li.alt{background:#362f2d;} 

It is worth noting that the .menu li.alt style is used to distinguish odd and even lines and line breaks, which will be reflected in the jquery code below.
jQuery
In the jQuery code, first I need to distinguish the drop-down menu rows, and give the even rows a style: alt. Then add a click trigger event for the picture button, and the drop-down menu can be switched when the button is clicked.

$(function(){ 
  $(".menu li:even").addClass("alt"); 
  $("img.menu_head").click(function(){ 
    $(".menu").slideToggle("fast"); 
  }); 
}); 

Note, I used jQuery’s slideToggle method to display and hide the menu in a sliding manner, and the effect is very smooth.

The above is the shared jQuery combined with CSS to create a dynamic drop-down menu. I hope it will be helpful to everyone's learning.