Implementation of Dynamic menu by jquery _ jquery

This article mainly introduces the sample code for jquery to implement a dynamic menu. For more information, see jquery. It is similar to the jquery pop-up window that uses JavaScript to operate css.

The procedure can be divided into the following steps:

• Create an html page containing the menu to be expressed

The Code is as follows:

Jquery Example 2: jquery menu

I am menu 1

• I am submenu 1


• I am submenu 2

I am menu 2

• I am submenu 3


• I am submenu 4

• Create a css file to control menu display

The Code is as follows:

/* To prevent all li nodes from displaying small dots, you can use the css Tag selector */
Li {
/* Remove the dot before the list */
List-style: none;
/* Indent effect */
Margin-left: 18px;
/* Hide the menu */
Display: none;
}
A {
/* Text display mode */
Text-decoration: none;
}

• Create a JavaScript file to control menu display

The Code is as follows:

/*
* Click the main menu. The sub-menu is displayed. Click the main menu again to hide the sub-menu.
* You need to write code so that the onclick event is added to the main menu during loading so that the submenu can be displayed when you click the main menu.
* Registration page Loading Method
*/
$ (Document). ready (function (){
// Var uls = $ ("ul ");
// Locate node a under ul
Var as =$ ("ul> ");
As. click (function (){
// First find the li in the current ul, and then display the li
// Obtain the clicked ul Node
Var aNode = $ (this );
// Find all the li nodes under the clicked ul Node
Var lis = aNode. nextAll ("li ");
// Display or hide ul's li subnodes
Lis. toggle ("slow ");
});
});