The effect _jquery of the navigation Pull-down menu implemented by jquery

The example of this article describes the effect of the navigation Pull-down menu implemented by jquery. Share to everyone for your reference, specific as follows:

1. The effect is as shown in the picture:

2.html Code:

<div id= "Navigation" > <ul> <li><a href= "#" > Home </a></li> <li><a href= " # "> Shirt </a> <ul> <li><a href=" # "> short-sleeved shirt </a></li> <li><a href= 
  "#" > long-sleeved shirts </a></li> <li><a href= "#" > Sleeveless shirt </a></li> </ul> </li>
      <li><a href= "#" > Guardian dress </a> <ul> <li><a href= "#" > Cardigan </a></li> <li><a href= "#" > Set head Guardian dress </a></li> </ul> </li> <li><a href= "#" > Trousers </a> <ul> <li><a href= "#" > Casual pants </a></li> <li><a href= "#" > Khakis </a></li> <li><a href= "#" > Jeans </a></li> <li><a href= "#" > Shorts </ a></li> </ul> </li> <li><a href= "#" > Contact us </a></li> </ul> <

 /div>

3.jQuery Code:

Navigation effect (compatible IE6)/
*
1. Use the $ ("#navigation ul Li:has (UL)") function to select <li> elements that contain <ul> elements, and then add hover events
to them. 2. Within the first function of the hover event, use $ (this). Children ("UL") to locate the <ul> element inside the <li> element, and then use the Stop (TRUE,TRUE) statement to extend the navigation down by
3. Within the second function of the hover event, use the Stop (true,true). Slideup ("fast") statement to hide the navigation up to
4. The Stop (True,true) method was added before the two animation effects. The advantage of this is that you can empty the completed animation queue and move the animation you are performing to the end state
* * (
function () {
  $ ("#navigation ul Li:has (UL)"). Hover (function () {
   $ (this). Children ("ul"). Stop (true,true). Slidedown,
  },function () {
   $ (this). Children ("ul"). Stop (true,true). Slideup ("fast");
  })

More interested readers of jquery-related content can view the site topics: "jquery Extended Tips," "jquery common Plug-ins and Usage summary", "jquery drag-and-drop effects and tips summary", "jquery table (table) Operation Tips Summary", " A summary of Ajax usage in jquery, a summary of common classic effects in jquery, a summary of jquery animation and special effects usage, and a summary of jquery selector usage

I hope this article will help you with the jquery program design.