很有意思的两个菜单，第一个手动点击实现张开与关闭，第二个快速滑来滑去，菜单也跟着滑来滑去_三个菜单,显示第一个,点击菜单关闭,点击第二个菜单也可以关闭-CSDN博客

本文链接：https://blog.csdn.net/cilwfvip/article/details/7736724

HTML代码：

<html>
<head><title>纵向横向菜单实例</title>
<link type="text/css" rel="stylesheet" href="css/menu.css"/>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul >
<li class="main">

<a class="icon">  </a><a href="#">菜单1</a>
<ul ><li><a href="#">菜单11</a></li>
<li><a href="#">菜单12</a></li>
</ul>
</li>

<li class="main">
<a class="icon">  </a><a href="#">菜单2</a>
<ul ><li><a href="#">菜单21</a></li>
<li><a href="#">菜单22</a></li>
</ul>
</li>
<li class="main">
<a class="icon">  </a><a href="#">菜单3</a>
<ul ><li><a href="#">菜单31</a></li>
<li><a href="#">菜单32</a></li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ul >
<li class="hmain">

<a class="icon">  </a><a href="#">菜单1</a>
<ul ><li><a href="#">菜单11</a></li>
<li><a href="#">菜单12</a></li>
</ul>
</li>

<li class="hmain">
<a class="icon">  </a><a href="#">菜单2</a>
<ul ><li><a href="#">菜单21</a></li>
<li><a href="#">菜单22</a></li>
</ul>
</li>
<li class="hmain">
<a class="icon">  </a><a href="#">菜单3</a>
<ul ><li><a href="#">菜单31</a></li>
<li><a href="#">菜单32</a></li>
</ul>
</li>
</ul>

</body>
</html>

CSS代码：

ul,li{
list-style:none;
padding:0px;
margin:0px;
width:100px;

}
.main,.hmain{
margin-left:5px;

}
.main,.hmain{
background-image:url("images1/button-border.gif");
background-repeat:repeat-x;
font-size:20px;

}
.main ul{
background-color:#efefef;

display:none;
}
.hmain ul{
background-color:#efefef;
display:none;

}
.main li,.hmain li{
margin-top:1px;
font-size:15px;
padding:2px;
}
a{
text-decoration:none;
}
.main a,.hmain a{
color:white;
margin:2px;

}
.main li a,.hmain li a{color:black;
background-image:none;
}
.icon{
background-image:url("images/002.png");
background-repeat:no-repeat;
}
.hmain{
float:left;
}

JS代码：

$(function(){

//第一个菜单点击事件
$(".main").click(function(){
$(this).children("ul").slideToggle();
var Li=$(this).siblings("li");

$(Li).children("ul").slideUp();
if($(this).children(".icon").css("background-image").indexOf("002.png")>0){

if($(Li).children(".icon").css("background-image")!=$(this).children(".icon").css("background-image")){
$(this).children(".icon").css("background-image","url('css/images/004.png')");
$(Li).children(".icon").css("background-image","url('css/images/004.png')");

}else{$(this).children(".icon").css("background-image","url('css/images/004.png')");
$(Li).children(".icon").css("background-image","url('css/images/002.png')");

}

}else{

if($(Li).children(".icon").css("background-image")!=$(this).children(".icon").css("background-image")){
$(this).children(".icon").css("background-image","url('css/images/002.png')");
$(Li).children(".icon").css("background-image","url('css/images/002.png')");

}else{$(this).children(".icon").css("background-image","url('css/images/002.png')");
}
$(Li).children(".icon").css("background-image","url('css/images/004.png')");

}
});

//第二个菜单用hover实现
$(".hmain").hover(function(){

$(this).children("ul").slideDown()
},function(){

$(this).children("ul").slideUp();
});
$(".hmain ul li").click(function(){
alert("click");
})
})