jquery combines CSS to make a dynamic pull-down menu _jquery

When you want to place a large submenu in a limited navigation menu space, we generally use the form of a Pull-down menu to make up for the lack of space. This article will take you with a minimum of time, using jquery and CSS combined to create a dynamic drop-down menu.

Xhtml
The first is to introduce the jquery library into the head section of the page, which is necessary.

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

Then I use an unordered list to build the menu.

<ul class= "Menu" > 
  <li><a href= "#" > Home </a></li> 
  <li><a href= "#" > Service </a></li> 
  <li><a href= "#" > Case </a></li> 
  <li><a href= "#" > About </a></li> 
  <li><a href= "#" >BLOG</a></li> 
</ul> 

At a glance, looks very concise, because the Drop-down menu is closed, I also want to create a visual trigger Drop-down button, this article for the convenience of directly using a picture as a trigger button. and place the picture at the top of the menu list

Css
to create a CSS style for the menu, 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 noteworthy that the. Menu Li.alt style is used to differentiate between odd and even line wrapping, as shown in the jquery code below.
JQuery
in the jquery code, first I want a drop-down menu row number to differentiate, to the even line one style: Alt. Then add a click Trigger event for the picture button, and you can toggle the Drop-down menu when the button is clicked.

$ (function () { 
  $ (". Menu Li:even"). AddClass ("alt"); 
  $ ("Img.menu_head"). Click (function () { 
    $ (". Menu"). Slidetoggle ("Fast");}); 
 

Attention , I use the jquery Slidetoggle method to slide the way to achieve the menu display and hide, the effect is very smooth.

The above is the sharing of jquery combined with CSS production dynamic Drop-down menu, I hope to help you learn.