jquery implementation of the vertical Drop-down menu example detailed "with demo source download" _jquery

This example describes the vertical drop-down menu of jquery implementations. Share to everyone for your reference, specific as follows:

When we browse the Web and use Word to edit the text, we can see the horizontal pull of the figure, with the horizontal menu, we can better layout the entire interface to achieve the desired effect, then how these horizontal menu is implemented in code, When we browse or use when she is present in front of us, after learning jquery, small weave gradually see her beautiful face, Next, the small series mainly explains how to achieve the vertical drop-down menu through jquery.

The first step is to write the HTML code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >  

Let's take a look at the effects of the operation:

The above implementation has a preliminary model of the vertical menu, but there seems to be an imperfect place, the main menu has a small black dots in front of the submenu, there are small white dots, there is no stereo effect, do not worry about CSS can help us solve the above problems, and then, write CSS code, as follows:

ul,li{
 /* Clear UL and Li on the default small dot
 /list-style:none;
}
ul{
 /* Clears the Indent value of submenu * * *
 padding:0;
 margin:0
}
. main{
 Background-image:url (.. /images/title.gif);
 Background-repeat:repeat-x;
 width:120px;
}
li{
 background-color: #EEEEEE;
}
a{
 /* Cancel all underline
 /text-decoration:none;
 padding-left:20px;
 Display:block;
 Display:inline-block;
 width:100px;
 padding-top:3px;
 Padding-bottom:3px
}
. Main a{
 Color:white;
 Background-image:url (.. /images/collapsed.gif);
 Background-repeat:no-repeat;
 BACKGROUND-POSITION:3PX Center;
Main Li a{
  color:black;
  Background-image:none
}
. Main ul{
 display:none;
}

Add CSS code, in the display of what will be the surprise to us?

The display of the above figure is already closer to the effect we want to achieve, but this still can not be clicked, so we also need to write JS code, the corresponding, in JS we also want to build two files, a jquery a menu, given the more jquery code, So small series has uploaded related resources, the need for small partners can click on the end of the link to download, and then, we write menu code to the finishing page to add capacity, the code is as follows:

$ (document). Ready (The function () {
 //The DOM in the page has been loaded complete, the code executed is
 $ (". Main > a"). Click (function () {
  // Find the submenu item corresponding to the primary menu item
  var ulnode =$ (this). Next ("ul");
  /*
  if (ulnode.css ("display") = = "None")
  {
   ulnode.css ("Display", "block");
  } else{
   ulnode.css ("Display", "none");
  }
  * * *
  menu appears animation effect * * *
  ulnode.show ("slow");//normal fast
  //unlnode.hide ();
  Ulnode.toggle ();
  //ulnode.slidedown ("slow");
  Ulnode.slideup;
  Ulnode.sildetoggle ();
 })

Add JS code, now realize the effect is not the same as we think, as shown in the following figure:

The above is the small series to achieve the vertical drop-down menu of the whole process, since you can achieve the vertical drop-down menu, then the horizontal Drop-down menu How to achieve it, more vertical menu to achieve the process of what is not the same place NIE, this process is the process of our growth, where the horizontal menu small series is not introduced, Full instance code click here to download the site . Small partners who need to be able to down and study for themselves.

More interested readers of jquery-related content can view the site: "jquery form Operation Tips", "jquery common Plug-ins and Usage summary", "jquery operation JSON data techniques Summary", "JQuery Extended Skills Summary", " jquery drag-and-drop effects and tips summary, jquery table (table) Operation tips Summary, "jquery Ajax Usage Summary", "jquery common Classic Effects Summary", "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

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