Jquery实现纵向横向菜单
第一个菜单实现的是点击菜单项显示相应的子菜单项，三角变为向下的三角。下面的菜单鼠标移动到菜单项显示对应的子菜单项，鼠标移开子菜单消失。
下面介绍它的代码部分：
html代码：
head代码部分添加标题及引用：
<spanstyle="font-family:KaiTi_GB2312;font-size:18px;"><head> <title>JQuery实战-菜单效果</title> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <linktype="text/css"rel="stylesheet"href="css/menu.css"/> <scripttype="text/javascript"src="js/jquery.js"></script> <scripttype="text/javascript"src="js/menu.js"></script> </head></span>
body部分编辑菜单项内容，通过嵌套的ul和li来表示，菜单最外层为ul，一层每个主菜单放在一个li中。如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套就可以构建多层的菜单。
<spanstyle="font-family:KaiTi_GB2312;font-size:18px;"><body> <ul> <liclass="main"> <ahref="#">菜单项1</a> <ulstyle="display:none;"> <li> <ahref="#">子菜单项11</a> </li> <li> <ahref="#">子菜单项12</a> </li> </ul> </li> <liclass="main"> <ahref="#">菜单项2</a> <ul> <li> <ahref="#">子菜单项21</a> </li> <li> <ahref="#">子菜单项22</a> </li> </ul> </li> <liclass="main"> <ahref="#">菜单项3</a> <ul> <li> <ahref="#">子菜单项31</a> </li> <li> <ahref="#">子菜单项32</a> </li> </ul> </li> </ul> <br/> <ul> <liclass="hmain"> <ahref="#">菜单项1</a> <ul> <li> <ahref="#">子菜单项11</a> </li> <li> <ahref="#">子菜单项12</a> </li> </ul> </li> <liclass="hmain"> <ahref="#">菜单项2</a> <ul> <li> <ahref="#">子菜单项21</a> </li> <li> <ahref="#">子菜单项22</a> </li> </ul> </li> <liclass="hmain"> <ahref="#">菜单项3</a> <ul> <li> <ahref="#">子菜单项31</a> </li> <li> <ahref="#">子菜单项32</a> </li> </ul> </li> </ul> </body></span>
css代码部分
1.浏览器中的ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进
2.list-style属性值为none,可清除ul和li前面的小圆点。
3.清除缩进值，padding和margin都为0，其中IE6IE7需要把margin为0的时候才可以清除缩进值。
<spanstyle="font-family:KaiTi_GB2312;font-size:18px;">ul,li{
list-style:none;/*//清除ul和li上默认的小圆点*/
}
ul{
/*清除子菜单的缩进值*/
padding:0;
margin:0;
}
.main,.hmain{
background-image:url(../images/title.gif);/*指定背景图*/
background-repeat:repeat-x;
width:120px;
}
li{
background-color:#EEEEEE;
}
a{
/*取消所有的下划线*/
text-decoration:none;
padding-left:20px;
display:block;
display:inline-block;/*解决ie6不兼容的问题*/
width:100px;
padding-top:3px;
padding-bottom:3px;
}
.maina,.hmaina{
color:white;/*主菜单标签颜色为白色*/
background-image:url(../images/collapsed.gif);
background-repeat:no-repeat;
background-position:3pxcenter;/*图片位置在中间*/
}
.mainlia,.hmainlia{
/*子菜单项*/
color:black;
background-image:none;/*不使用图片*/
padding-left:18px;
}
.mainul,.hmainul{
/*子菜单隐藏*/
display:none;
}
.hmain{
float:left;/*浮动显示*/
margin:1px;
}</span>
menu.js代码：
1.maina选择使用了.main这个class的元素内部所有的a节点
2.main>a选择.main子节点中的a节点
<spanstyle="font-family:KaiTi_GB2312;font-size:18px;">$(document).ready(function(){
//页面的Dom已经装载完成时，执行的代码
$(".main>a,.hmaina").click(function(){
//找到主菜单项对应的子菜单项
varulNode=$(this).next("ul");
////根据情况收缩菜单
//if(ulNode=$.css("display")=="none"){
//ulNode.css("display","block");
//}else{
//ulNode.css("display","none");
//}
//ulNode.show("normal");//设置展开的速度，可以是nomal,slow,fast
//ulNode.hide();
//ulNode.toggle();//toggle设置展开或者收缩
//卷帘效果，向上或者向下
//ulNode.slideDown();
//ulNode.slideUp;
ulNode.slideToggle();
});
//麻烦的方法
//$(".hmain>a").hover(function(){
//$(this).next("ul").slideDown();
//}.Function(){
//varulNode=$(this).next("ul");
//vartimeoutId=setTimeout(function(){
//})
//ulNode.slideUp();
//},300);
//ulNode.hover(function(){
//clearTimeout(timeoutId);
//}.function(){
//$(this).slideUp();
//});
/********实现鼠标移动到指定主菜单后子菜单自动显示*****/
$(".hmain").hover(function(){
$(this).children("ul").slideDown();
},function(){
$(this).children("ul").slideUp();
});
});
/*
*修改主菜单的指示图标随着子菜单的变化而变化
*
*/
functionchangeIcon(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')");
}
}
}
</span>
以上就是本文的全部内容，希望能够帮助大家更好的实现制作菜单效果。