为什么我跟老师照着敲得,第一是背景图没有占100%;第二点击收起没有效果,哪位大神有时间给解释一下呗!!!
求解??
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>特效菜单</title>
<style>
.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.2.min.js"></script>
<script>
$(function(){
$("#menuList").on("click","a",function(){
if($(this).hasClass("btn-active")){
$("#expandZone #closeBtn").click();
return false;
}
var curIndex=$(this).index(),mlValue="-"+curIndex*100+"%";
if($("#expandZone").hasClass("active")){
$("#expandZone .expdiv").animate({marginLeft:mlValue});
}else{
$("#expandZone .expdiv").css({margineLft:mlValue});
$("#expandZone").animate({height:"130px"}).addClass("active");
}
$(this).addClass("btn-active").siblings().removeClass("btn-active");
return false;
})
$("#expandZone closeBtn").on("click",function(){
$("#expandZone").animate({height:"0px"},function(){
$(this).relativeClass("active");
$("menuList .btn-active").removeClass("btn-active");
});
return false;
});
})
</script>
</head>
<body>
<div id="menuList"><!--一级菜单-->
<a href="#">首页</a>
<a href="#">课程大厅</a>
<a href="#">学习中心</a>
<a href="#">关于我们</a>
<a href="#">个人中心</a>
<div id="expandZone"><!--二级菜单展开层-->
<div><!--二级菜单集合层-->
<div><!--二级菜单-->
<a href="#">慕课网主页</a>
</div>
<div>
<a href="#">前端课程</a>
<a href="#">手机开发</a>
<a href="#">后台编程</a>
</div>
<div>
<a href="#">javascript</a>
<a href="#">css</a>
<a href="#">jQuery</a>
</div>
<div>
个人信息
</div>
<div>
公司地址:111111111
</div>
</div>
<div id="closeBtn"><!--关闭按钮-->
</div>
</div>
</div>
</body>
</html>