<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.navlist{position:absolute;top:10px;}
a{text-decoration:none;color:#fff;}
.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:#fff;}
.expand .close-btn{width:120px;height:20px;background:url(图片1.png) 0 0 no-repeat;position:absolute;left:50%;bottom:-2px;margin-left:-60px;cursor:pointer;}</style>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<script type="text/javascript">
// $(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({marginLeft: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).removeClass("active");
// $("#menuList .btn-active").removeClass("btn-active");
// });
// return false;
// });
// });// $(function(){
// if($(this).hasClass('btn-active')){$('#expandZone #closeBtn').cilck();return false;}
// var curIndex=$(this).index(),mlValue="-"+curIndex*100+'%';
// if($('#expandZone').hasClass('active')){$('#expandZone .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 #closeBtn').on('click',function(){$('#expandZone').animate({height:'0px'},function(){$(this).removeClass('active');$('#navList .btn-active').removeClass('btn-active');});return false;});s
// });//不知道那里出错了玛德 $(function () {
//navlist
$('#navList').on('click', '.nav-btn', function (event) {
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({ marginLeft: 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).removeClass('active');
$('#navList .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></div>
<div id="expandZone" class="expand">
<div class="expdiv">
<div class="expdiv-list"><a href="#">慕课网主页</a></div>
<div class="expdiv-list"><a href="#" id="a4">前端课程</a><a href="#">手机开发</a><a href="#">课程开发</a></div>
<div class="expdiv-list"><a href="#">js</a><a href="#">css</a><a href="#">jquery</a></div>
<div class="expdiv-list">个人信息：</div>
<div class="expdiv-list">公司地址：北京市西城区德外大街10号</div>
</div>
<div id="closeBtn" class="close-btn"></div>
</div>
</body>
</html>
