Jquery implements a dynamic menu in the same way as jquery's pop-up window, and uses JavaScript to operate css.
The procedure can be divided into the following steps:
• Create an html page containing the menu to be expressed
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> jquery Example 2: jquery menu </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Link type = "text/css" rel = "stylesheet" href = "css/menu.css" mce_href = "css/menu.css">
<Mce: script type = "text/javascript" src = "jslib/jquery. js" mce_src = "jslib/jquery. js"> </mce: script>
<Mce: script type = "text/javascript" src = "jslib/jquerymenu. js" mce_src = "jslib/jquerymenu. js"> </mce: script>
</Head>
<Body>
<Ul>
<A href = "#" mce_href = "#"> I am menu 1 </a>
<Li> I am submenu 1 </li>
<Li> I am submenu 2 </li>
</Ul>
<Ul>
<A href = "#" mce_href = "#"> I am menu 2 </a>
<Li> I am submenu 3 </li>
<Li> I am submenu 4 </li>
</Ul>
<Div id = "content"> </div>
</Body>
</Html>
• Create a css file to control menu display
Copy codeThe 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
Copy codeThe 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 ");
});
});