Detailed examples of the vertical drop-down menu implemented by jQuery [Download demo source code] And jquerydemo

Detailed examples of the vertical drop-down menu implemented by jQuery [Download demo source code] And jquerydemo

This example describes the vertical drop-down menu implemented by jQuery. We will share this with you for your reference. The details are as follows:

When we browse the Web page and use word to edit the text, we can see the horizontal drop-down figure. With the horizontal menu, we can better layout the entire interface, to achieve what we want, how can we implement these horizontal menus with code? How can we present them to us when we browse or use them? After learning JQuery, xiaobian gradually sees her beautiful appearance. Next, I will explain how to implement a vertical drop-down menu through jquery.

Step 1: Compile 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 running effect:

The above implementation has initially had a portrait menu model, but there seems to be something imperfect. There are black dots in front of the main menu and white dots in front of the sub menu, there is no three-dimensional effect, so don't worry about css to help us solve the above problem. Then, write the css Code as follows:
Ul, li {/* clear the default dot on ul and li */list-style: none;} ul {/* clear the indent value of the sub-menu */padding: 0; margin: 0 ;}. main {background-image: url (.. /images/title.gif); background-repeat: repeat-x; width: 120px;} li {background-color: # EEEEEE ;} a {/* cancel all underlines */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 ;}
After the css code is added, what kind of surprises will it bring to us during display?

The display effect is closer to our desired implementation effect, but this still cannot be clicked. Therefore, we also need to write js Code, corresponding, in js, we also need to create two files, one jquery and the other menu. In view of the large amount of jquery code, the editor has uploaded relevant resources. If you need it, you can click the link at the end of the article to download it, next, we will compile the menu code to add behavior capabilities to the page. The Code is as follows:
$ (Document ). ready (function () {// code executed when the DOM in the page has been loaded $ (". main> "). click (function () {// find the sub-menu item var ulNode = $ (this) corresponding to the main menu item ). next ("ul");/* if(ulNode.css ("display") = "none") {ulNode.css ("display", "block ");} else {ulNode.css ("display", "none");} * // The animation effect displayed in the menu */ulNode. show ("slow"); // normal fast // unlNode. hide (); // ulNode. toggle (); // ulNode. slideDown ("slow"); // ulNode. slideUP; ulNode. sildeToggle ();});})
After adding JavaScript code, is the current implementation the same as we thought, as shown in:

The above is the whole process of the vertical drop-down menu implemented by xiaobian. Since the vertical drop-down menu can be implemented, how can the horizontal drop-down menu be implemented, what are the differences in the implementation process of the vertical menu, nie? This process is the process of our growth. Here, the horizontal menu editor will not introduce it one by one. Click here for the complete instance code.Download from this site. If you need it, you can go down and study it yourself.