In the past, I often saw a menu display on the website, and the drop-down effect will appear when you move the mouse up. The following is an introduction to this page, the following describes the horizontal drop-down menu implemented by JQuery. Previously, the menu display of the website is often seen. The drop-down effect is displayed when you move the cursor up. After watching the JQuery video, it is also easy to implement.
In Html
And
- The tag writes the required elements.
The Code is as follows:
-
Menu item 1
-
Sub-menu item 11
-
Sub-menu item 12
-
Menu item 2
-
Sub-menu item 21
-
Sub-menu item 22
-
Menu item 3
-
Sub-menu item 31
-
Sub-menu item 32
The most peripheral
Element
- That is, menu item 1, menu item 2, and menu item 3. The drop-down menu is under each main menu. If the outermost menu is ul, each main menu is placed in one li, if there is a sub-menu, create a new ul in the li of this main menu, and then nest it in order to build a multi-level menu.
CSS
The Code is as follows:
Ul, li {
/* Clear the dots On ul and li */
List-style: none;
}
Ul {
/* Clear the indent value of the sub-menu */
Padding: 0;
Margin: 0;
}
. Hmain {
Background-image: url (../images/title.gif); // The Front triangle
Background-repeat: repeat-x;
Width: 120px;
}
Li {
Background-color: # EEEEEE; // The background image overwrites the background color.
}
A {
// Cancel all underlines
Text-decoration: none;
Padding-left: 20px;
Display: block;/* block set elements can be filled with areas */
Display: inline-block;
Width: 100px;
Padding-top: 3px;
Padding-bottom: 3px;
}
. Hmain {
Color: white;
Background-image: url (../images/collapsed.gif );
Background-repeat: no-repeat;
Background-position: 3px center;
}
. Hmain li {
Color: black;
Background-image: none;
}
. Hmain ul {
Display: none;
}
. Hmain {
Float: left;
Margin-right: 1px;
}
The js files jquery. js and menu. js are referenced in Html. menu. js is as follows:
The Code is as follows:
$ (Document). ready (function (){
// Code executed when the DOM on the page has been loaded
$ (". Main> a,. hmain a"). click (function (){
// Find the sub-menu item corresponding to the main menu item
Var ulNode = $ (this). next ("ul ");
UlNode. slideToggle ();
ChangeIcon ($ (this ));
});
$ (". Hmain"). hover (function (){
$ (This). children ("ul"). slideToggle ();
ChangeIcon ($ (this). children (""));
}, Function (){
$ (This). children ("ul"). slideToggle ();
ChangeIcon ($ (this). children (""));
});
});
/*
* Modify the indicator icon of the main menu.
*/
Function changeIcon (mainNode ){
If (mainNode ){
If(mainNode.css ("background-image"). indexOf ("collapsed.gif")> = 0 ){
MainNode.css ("background-image", "url ('images/expanded.gif ')");
} Else {
MainNode.css ("background-image", "url ('images/collapsed.gif ')");
}
}
}
In this way, the brilliant drop-down menu is complete. The implementation is very simple, but the small knowledge points in it are very fragmented. Example :. main a and. main> a. The former is used. main, this class Element Content all a nodes, the latter only select. a node in the child node of main.
This example has a strong applicability. If you use it on a website to make the interface look more beautiful, you can see three examples. Take the time to continue reading them...