jQuery做的横向菜单和竖向的菜单
以前自己做了菜单结构，在做网页开发的时候经常会用到，所以收藏一下，对自己有用html页面：
<ul>
<li class="main">
<a href="#">菜单项1</a>
<ul >
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项2</a>
<ul >
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项42</a></li>
</ul>
</li>
</ul>
<br/>
<br/>
<ul>
<li class="hmain">
<a href="#">菜单项1</a>
<ul >
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项2</a>
<ul >
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项42</a></li>
</ul>
</li>
</ul>
jQuery代码：
$(document).ready(function(){
//页面中的dom装载完成后执行
$(".main > a").click(function(){
//alert("fd");
//找到主菜单项对应的子菜单项
var ulNode = $(this).next("ul");
//一种方法
/*if(ulNode.css("display")=="none"){
ulNode.css("display","block");
}else{
ulNode.css("display","none");
}*/
//一种方法
//ulNode.show("fast");//slow normal fast显示
//ulNode.hide();//隐藏
//一种方法
//ulNode.toggle();//自动的判断数据的存在或不存在，然后显示，隐藏
//一种方法
//ulNode.slideDown();//也可以加参数slow normal fast
//ulNode.sildeUp();
//最好的方式
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
},function(){
$(this).children("ul").slideUp();
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");
}
}
}
css处理：
ul,li{
/*清除ul和li的小圆点*/
list-style:none;
}
ul{
/*清掉ul前面的空格*/
padding:0;
margin:0;
}
.main,.hmain{
background-image:url(../images/title.gif);
background-repeat:repeat-x;
width:120px;
}
.main li,.hmain li{
background-color:#eeeeee;
}
a{
text-decoration:none;
dispaly:inline-block;/*解决ie6的*/
padding-left:20px;
display:block;
display:inline-block;
width:100px;
padding-top:3px;
padding-buttom:3px;
}
.main a,.hmain a{
color:#fff;
background-image:url(../images/collapsed.gif);
background-repeat:no-repeat;
background-position:3px center;
}
.main li a,.hmain li a{
color:black;
background-image:none;
}
.main ul,.hmain ul{
display:none;
}
.hmain{
float:left;
margin-right:1px;
}
页:
[1]