您的位置：首页 > Web前端 > JQuery

Jquery实现初级特效导航

2016-05-11 22:01 411 查看

HTML代码：

<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="#">首页二级菜单</a>
</div>
<div class="expdiv-list">
<a href="#">语文二级菜单</a>
<a href="#">语文二级菜单</a>
<a href="#">语文二级菜单</a>
</div>
<div class="expdiv-list">
<a href="#">数学二级菜单</a>
<a href="#">数学二级菜单</a>
<a href="#">数学二级菜单</a>
</div>
<div class="expdiv-list">
<a href="#">英语二级菜单</a>
<a href="#">英语二级菜单</a>
<a href="#">英语二级菜单</a>
</div>
<div class="expdiv-list">
<a href="#">关于我们二级菜单</a>
</div>
</div>
<!-- 上拉箭头-->
<div id="closeBtn" class="close-btn"></div>
</div>
</body>

css代码：

.navList{
position: absolute;
top:10px;
}
a{
text-decoration: none;
color: white;
font-size: 20px;
}
.navList a{
color: #666;
padding: 100px;
}
.expand{
height: 0;
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;
}
.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;
}

js代码：

<script type="text/javascript" src="js/jquery-1.12.3.min.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");
}
//给激活的按钮一个Class,以便第二次点击时可关闭..
$(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;
});
});
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航