The jquery Library brings us a lot of convenience. It is easy to use jquery to implement a simple drop-down menu, but there are also different implementation methods. Today, I wrote a drop-down menu using jquery, referring to SexyDropDownMenu2010 of XiaofengWang. Some of the items are worth recording. Abstract:
The jquery Library brings us a lot of convenience. It is easy to use jquery to implement a simple drop-down menu, but there are also different implementation methods. Today, I wrote a drop-down menu using jquery, referring to SexyDropDownMenu2010 of Xiaofeng Wang. Some of the items are worth recording.
Implementation:
First, let's talk about his code (It's too long to paste all the Code ),
I. ul list in html
- Home
- Tutorials
- Ch1
- Ch2
- Ch21
- Ch211
- Ch2111
- Ch21111
- Ch21112
- Ch21113
- Ch21114
- Ch21115
- Ch21116
- Ch2112
- Ch2113
- Ch2114
- Ch2115
- Ch212
- Ch213
- Ch214
- Ch22
- Ch23
- Ch3
- Resources
- Sub Nav Link
- Sub Nav Link
- About Us
- Advertise
- Submit
- Contact Us
There is a menu structure with six layers of depth, such
Ii. js part (css will not be posted)
$ (Document ). ready (function () {// Part 1 // Top Menu // Only shows drop down trigger when js is enabled (Adds empty span tag after ul. submenu1 *) $ ("ul. submenu1 "). parent (). append (""); // The second part $ ("ul. topmenu li span "). click (function () {// When trigger is clicked... // Following events are applied to the submenu1 itself (moving submenu1 up and down) // Drop down the submenu1 on click $ (this ). parent (). find ("ul. submenu1 "). slideDown ('fast '). show (); // after clicking it, bind the hover handler to it. It seems like a clever place $ (this ). parent (). hover (function () {}, function () {// When the mouse hovers out of the submenu1, move it back up $ (this ). parent (). find ("ul. submenu1 "). slideUp ('low');}); // Following events are applied to the trigger (Hover events for the trigger )}). hover (function () {// On hover over, add class "hover" $ (this ). addClass ("hover") ;}, function () {// On Hover Out // On hover out, remove class "hover" $ (this ). removeClass ("hover") ;}; // Part 3 $ ("ul. topmenu li ul. submenu1 li "). hover (function () {$ (this ). find ("ul. submenu11: first "). show ("slow") ;}, function () {$ (this ). find ("ul. submenu11: first "). hide ("fast ");});});
Part 1:
Added a trigger button for the menu.
Part 2:
A processing function bound to a click event
After the trigger button is clicked, the hover processing function is bound to the li at the outermost layer of the drop-down menu.
Bind the hover function to the outermost li layer. Here, the processing function writes no processing when the mouse is hovering over li (the first function is blank), and li collapse when the mouse leaves.
In this way, the ul menu is displayed in the li at the outermost layer, so that the menu will not be automatically collapsed, that is, when the mouse leaves the entire menu, li will automatically collapse.
Part 3:
Binds the ul hover event nested in the menu to expand and collapse the next menu.
$ (This ). find ("ul. submenu11: first) is also a clever way to use find to obtain the descendant of each element in the current matched element set, and use "ul. submenu11: first "is used to filter the next generation elements of an activity.
At the same time, a collapsed processing function is bound to the next menu, Which is used together with the collapsed function bound to the outermost li in the trigger menu. This function is used to automatically collapse the menu.
Summary:
It shows the strength and flexibility of jquery filters and the elegant chain Syntax of jquery.
The following is a simple implementation of the jQuery horizontal drop-down menu.
JQuery horizontal drop-down menu implementation