<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.navList{
position: absolute;
top: 10px;
}
a{
text-decoration:none;
color: white;
}
.navList a {
margin-left: 60px;
color: #666;
}
.expand{
height:0px;
background-color: #333d4d;
overflow: hidden;
position: relative;
top: 30px;
width: 100%;
}
.expdiv{
height: 130px;
width: 500%;
}
.expdiv-list{
width: 20%;
text-align: center;
float: left;
line-height: 110px;
color: White;
}
.expand .close-btn{
width: 120px;
height: 20px;
background:url(images/broswer_home.png) no-repeat -13px -117px;
position: absolute;
left: 50%;
bottom: -2px;
margin-left: -60px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menuList").on("click","a",function(){
if($(this).hasClass("btn-active")){
$("#expandZone #close-Btn").click();
return false;
}
var curIndex=$(this).index();
var mlValue="-"+curIndex*100+"%";
if($("#expandZone").hasClass("active")){
$(".expdiv").animate({marginLeft:mlValue});
}
else{
$("#expandZone .expdiv").css({marginLeft:mlValue});
$("#expandZone").animate({height:"130px"}).addClass("active");
}
$("this").addClass("btn-active").siblings().removeClass("btn-active");
return false;
});
$("#expandZone #close-Btn").on("click",function(){
$("#expandZone").animate({height:"0px"},function(){
$(this).removeClass("active");
$("#menuList .btn-active").removeClass("btn-active");
});
return false;
});
});
</script>
</head>
<body>
<div id="menuList" class="navList">
<a href="#">首页</a>
<a href="#">课程大厅</a>
<a href="#">学习中心</a>
<a href="#">你的信息</a>
<a href="#">关于我们</a>
</div>
<div id="expandZone" class="expand">
<div class="expdiv">
<div class="expdiv-list">
<a href="#">关于我们1</a>
</div>
<div class="expdiv-list">
<a href="#">反反复复2</a>
</div>
<div class="expdiv-list">
<a href="#">vvv1</a><a href="#">关vv2</a><a href="#">关vvvss</a>
</div>
<div class="expdiv-list">
<a href="#">关删除们1</a><a href="#">关vv</a><a href="#">防水层们</a>
</div>
<div id="close-Btn" class="close-btn">
</div>
</div>
<div></div>
</div>
</body>
</html>
这条代码有什么作用？？我感觉可以不要这条程序的
相关分类