jQury实现垂直与横 向二级菜单
第一、横 向二级级级联菜单
写css代码 具体实例css代码如下：
.hxdiv {
float:left;
margin-left:10px;
}
.hxdiv ul,.zxdiv ul{
list-style:none;
padding:0px;
margin:0px;
}
.hxli{
background-image:url("/images/1.png");
background-repeat:repeat-x;
width:120px;
line-height:30PX;
margin-right:1px;
text-align:center;
float:left;
}
.hxli a{
text-decoration:none;
color:white;
display:block;
display:inline-block;
width:120px;
}
.hxli li a{
color:black;
}
.hxli ul{
margin:0px;
display:none;
}
.hxli ul li{
background:#d9d9d9;
width:120px;
}
html文件代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="/static/bq.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="/static/bq.js"/>
<script type="text/javascript" src="/static/jqury.js"/>
</head>
<body>
<div class="hxdiv">
<ul>
<li class="hxli">
<a href="#">标签效果1</a>
<ul>
<li><a href="#">子效果1</a></li>
<li><a href="#">子效果2-2</a></li>
</ul>
</li>
<li class="hxli">
<a href="#">标签效果2</a>
<ul>
<li><a href="#">子效果2-1</a></li>
<li><a href="#">子效果2-2</a></li>
</ul>
</li>
<li class="hxli">
<a href="#">标签效果3</a>
<ul>
<li><a href="#">子效果3-1</a></li>
<li><a href="#">子效果3-2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
第二、垂直二级级级联菜单
写css代码 具体实例css代码如下：
.zxdiv {
float:left;
margin-left:100px;
width:500px;
min-height:200px;
height:auto;
}
.zxli{
background-image:url("/images/1.png");
background-repeat:repeat-x;
width:120px;
line-height:30PX;
margin-right:1px;
text-align:center;
}
.zxli a{
text-decoration:none;
color:white;
display:block;
display:inline-block;
width:120px;
}
.zxli li a{
color:black;
}
.zxli ul{
margin:0px;
display:none;
}
.zxli ul li{
background:#d9d9d9;
width:120px;
}
html文件代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="/static/bq.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="/static/bq.js"/>
<script type="text/javascript" src="/static/jqury.js"/>
</head>
<body>
<div class="zxdiv">
<ul>
<li class="zxli">
<a href="#">标签效果1</a>
<ul>
<li><a href="#">子效果1</a></li>
<li><a href="#">子效果2-2</a></li>
</ul>
</li>
<li class="zxli">
<a href="#">标签效果2</a>
<ul>
<li><a href="#">子效果2-1</a></li>
<li><a href="#">子效果2-2</a></li>
</ul>
</li>
<li class="zxli">
<a href="#">标签效果3</a>
<ul>
<li><a href="#">子效果3-1</a></li>
<li><a href="#">子效果3-2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
第三、建一个名为bq的js文件,具体代码如下：
$(document).ready(function(){
$('.hxli,.zxli').hover(function(){
$(this).children("ul").slideDown();
},function(){
$(this).children("ul").slideUp();
});
//或者这样写：
$('.hxli,.zxli').mouseover(function(){
$(this).children("ul").css("display","block")
}).mouseout(function(){
$(this).children("ul").css("display","none")
})
})