JQuery vertical drop-down menu implementation experience, jquery vertical drop-down menu

JQuery vertical drop-down menu implementation experience, jquery vertical drop-down menu

The jquery Library brings us a lot of convenience. It is worthy of being a lightweight DOM framework. In the previous blog, I briefly introduced the basic knowledge of jquery and some small demos of jquery, we look forward to your guidance. Using jquery to implement a simple horizontal and vertical menu, I believe that other friends have many implementation methods. Today, I wrote a horizontal and vertical Menu Using JQuery, use the blog to share with your friends the experience of implementing the horizontal and vertical menu in the small Editor.

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:

 

<Span style = "font-size: 18px;"> <span style = "font-size: 18px;"> <span style = "font-size: 18px; "> <! 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:

<Span style = "font-size: 18px;"> <span style = "font-size: 18px;"> <span style = "font-size: 18px; "> 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 ;}</span> </span>
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 one menu. In view of the large amount of jquery code, the editor has uploaded relevant resources. If you need it, you can download it at this link, next, we will compile the menu code to add behavior capabilities to the page. The Code is as follows:

<Span style = "font-size: 18px;"> <span style = "font-size: 18px;"> <span style = "font-size: 18px; "> $ (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");} * // animation effect displayed in the menu */ulNode. show ("slow"); // normal fast // unlNode. hide (); // ulNode. toggle (); // ulNode. slideDown ("slow"); // ulNode. slideUP; ulNode. sildeToggle () ;}) </span>
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 we will not introduce the horizontal menu editor one by one. The following is the code for implementing the horizontal and vertical drop-down menus, click to download. If you need it, you can go down and study it yourself.
Small message: This blog post briefly introduces how to implement the vertical drop-down menu and briefly introduces the demo implementation process of the school, in the blog post, I will show you how to implement the vertical drop-down menu. My friends can study how to implement the horizontal drop-down menu. My BS summary is not complete ......