JQuery implements a gorgeous horizontal drop down menu
- 2020-03-30 01:00:32
- OfStack
Before often see the website has menu display, the mouse move up on the drop-down effect, very gorgeous, after watching JQuery video, found that the implementation is also quite easy.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201312/201312191802051.gif? 2013111918232 ">
In Html, by < Ul> And < Li> The tag writes out the required elements.
Outermost < Ul> Elements in < Li> That is menu item 1, menu item 2, and menu item 3. The drop-down menus are under each main menu. If the outermost layer of the menu is ul, each main menu in one layer is placed in a li.
CSS
In Html, the js files jquery. Js and menu.js are referenced, in which menu.js is as follows:
The gorgeous drop-down menu is complete. Implementation is very simple, but the small points are very fragmentary. For example:.main a and.main> The difference of a is that the former chooses to use the element of the class of.main to contain all the a nodes, while the latter only selects the a node among the children of. Main.
This kind of example application is very strong, the use in the website lets the interface appear more beautiful, the example just see 3, seize the time to continue to see...
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201312/201312191802051.gif? 2013111918232 ">
In Html, by < Ul> And < Li> The tag writes out the required elements.
<body>
<ul>
<li class="hmain">
<a href="#"> A menu item 1</a>
<ul>
<li>
<a href="#"> Sub menu item 11</a>
</li>
<li>
<a href="#"> Sub menu item 12</a>
</li>
</ul>
</li>
<li class="hmain">
<a href="#"> A menu item 2</a>
<ul>
<li>
<a href="#"> Sub menu item 21</a>
</li>
<li>
<a href="#"> Sub menu item 22</a>
</li>
</ul>
</li>
<li class="hmain">
<a href="#"> A menu item 3</a>
<ul>
<li>
<a href="#"> Sub menu item 31</a>
</li>
<li>
<a href="#"> Sub menu item 32</a>
</li>
</ul>
</li>
</ul>
</body>
Outermost < Ul> Elements in < Li> That is menu item 1, menu item 2, and menu item 3. The drop-down menus are under each main menu. If the outermost layer of the menu is ul, each main menu in one layer is placed in a li.
CSS
ul,li{
list-style:none;
}
ul{
padding:0;
margin:0;
}
.hmain{
background-image:url(../images/title.gif); //The little triangle in the front
background-repeat:repeat-x;
width:120px;
}
li{
background-color:#EEEEEE; //Background image overlays background color
}
a{
//Cancel all underscores
text-decoration:none;
padding-left:20px;
display:block;
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>
In Html, the js files jquery. Js and menu.js are referenced, in which menu.js is as follows:
$(document).ready(function(){
//The code that is executed when the DOM in the page has been loaded
$(".main> a,.hmain a").click(function(){
//Find the submenu item for the main course 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"));
});
});
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')");
}
}
}
The gorgeous drop-down menu is complete. Implementation is very simple, but the small points are very fragmentary. For example:.main a and.main> The difference of a is that the former chooses to use the element of the class of.main to contain all the a nodes, while the latter only selects the a node among the children of. Main.
This kind of example application is very strong, the use in the website lets the interface appear more beautiful, the example just see 3, seize the time to continue to see...