垂直菜单的布局

最新推荐文章于 2025-07-11 16:49:04 发布

发哥1997

最新推荐文章于 2025-07-11 16:49:04 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：未分类

本文链接：https://blog.youkuaiyun.com/yabushandaxue/article/details/47116605

未分类专栏收录该内容

53 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="app.css">
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

</head>
<body>
<ul>
<li class="main"><a href="#">菜单1</a>
<ul>
<li><a><a href="">子菜单1</a></li>
<li><a><a href="">子菜单2</a></li>

</ul>
</li>
<li class="main"><a href="#">菜单2</a>
<ul>
<li><a><a href="">子菜单1</a></li>
<li><a><a href="">子菜单2</a></li>

</ul>
</li>
<li class="main"><a href="#">菜单3</a>
<ul>
<li><a><a href="">子菜单1</a></li>
<li><a><a href="">子菜单2</a></li>

</ul>
</li>
</ul>
</body>
<script src="app.js"></script>

</html>

app.js:

$(document).ready(function(){

$(".main>a").click(function(){
var ulNode=$(this).next("ul");
/*if(ulNode.css("display")=="none"){
ulNode.css("display","block");
}else{
ulNode.css("display","none");
}*/

//ulNode.toggle("slow");//slow，normal，fast三种样式，还可以填写数字

ulNode.slideToggle("slow");

})
})

app.css:

ul,li{
list-style: none;

}
ul{
padding:0;
margin:0;
}
.main{
background-image: url(images/title.gif);
background-repeat: repeat-x;/*x轴重复*/
width: 100px;
}
li{
background-color: #eeeeee;
}

a{
text-decoration: none;
padding-left: 20px;
display: block;
width: 80px;
padding-top: 3px;
padding-bottom: 3px;
}

.main a{
color: white;
background-image: url(images/fangxiang.jpg);
background-repeat: no-repeat;/*不允许重复*/
background-position: 3px center;
}
.main li a{
color: black;
background-image: none;
}

.main ul{
display: none;
}