Used to see the site has a menu of the display, the mouse moved up on the effect of pulling down, very gorgeous, after watching jquery video, found that the implementation is also very easy.
In HTML, write the required elements through the <ul> and <li> tags.
Copy Code code as follows:
<body>
<ul>
<li class= "Hmain" >
<a href= "#" > menu item 1</a>
<ul>
<li>
<a href= "#" > Submenu Items 11</a>
</li>
<li>
<a href= "#" > Submenu Items 12</a>
</li>
</ul>
</li>
<li class= "Hmain" >
<a href= "#" > menu item 2</a>
<ul>
<li>
<a href= "#" > Submenu Items 21</a>
</li>
<li>
<a href= "#" > Submenu Items 22</a>
</li>
</ul>
</li>
<li class= "Hmain" >
<a href= "#" > menu item 3</a>
<ul>
<li>
<a href= "#" > Submenu Items 31</a>
</li>
<li>
<a href= "#" > Submenu Items 32</a>
</li>
</ul>
</li>
</ul>
</body>
The outermost <ul> element <li> is menu item 1, menu item 2, menu item 3, drop down menu under each main menu, if the menu outermost is UL, one layer each main menu puts in an Li, if have submenu, in this main menu of Li in establish new UL, You can then build multiple layers of menus in a nested sequence.
In CSS
Copy Code code as follows:
ul,li{
/* Clear the small dots on UL and Li * *
List-style:none;
}
ul{
/* Clears the Indent value of submenu * *
padding:0;
margin:0;
}
. hmain{
Background-image:url (. /images/title.gif); Front of the small triangle
Background-repeat:repeat-x;
width:120px;
}
li{
Background-color: #EEEEEE;//Background picture overlay background color
}
a{
//Remove all underscores
Text-decoration:none;
padding-left:20px;
Display:block/* Block set elements can be filled with zones/
Display:inline-block;
width:100px;
padding-top:3px;
padding-bottom:3px;
}
. hmain a{
Color:white;
Background-image:url (.. /images/collapsed.gif);
Background-repeat:no-repeat;
BACKGROUND-POSITION:3PX Center;
}
. hmain li a{
color:black;
Background-image:none;
}
. hmain ul{
Display:none;
}
. hmain{
Float:left;
margin-right:1px;
}<strong>
</strong>
The HTML refers to the JS file Jquery.js and Menu.js, where Menu.js is as follows:
Copy Code code as follows:
$ (document). Ready (function () {
The code that executes when the DOM in the page is already loaded
$ (".main> a,.hmain a"). Click (function () {
Find the submenu 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 ("a"));
},function () {
$ (this). Children ("ul"). Slidetoggle ();
Changeicon ($ (this). Children ("a"));
});
});
/*
* Modify the main Menu indicator icon
*/
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 ')");
}
}
}
This gorgeous pull-down menu is complete. The implementation is very simple, but the small knowledge points in the inside is very fragmented. For example:. Main A and. Main>a, the former chooses to use the element content of this class of the. Main, all Node A, which selects only the a node in the child node of the. Main.
This example application is very strong, in the Web site to make the interface appear more beautiful, examples to see 3, seize the time to continue to see ...
