一、页面布局
五个一级标题对应五个二级标题 所有箭头等图标、icon用一张背景图片完成
二级标题外有个容器expdiv(控制显示哪部分二级标题 通过marginLeft控制,容器溢出隐藏)
容器外有个滑动层expand(控制二级菜单显示或隐藏 初始高度为0 隐藏)
//容器设置为500% 每一个二级菜单width为20%
底部有个关闭按钮
二、js
1、显示二级菜单
$('.nav-btn').on('click', function () { //一级菜单点击事件
var iNow=$(this).index(); //当前索引
var marginLeft='-'+iNow*100+'%';
//显示对应二级菜单 根据当前索引*100%
if ($(this).hasClass('btn-active')){
//如果当前一级菜单有class('btn-active’) 是激活状态 点击触发关闭按钮
$('#closeBtn').trigger('click');//触发点击事件
// $('#closeBtn').click();//或者这么写 查找点击事件
}
if ($(".expand").hasClass('active')) { //如果滑动层是激活状态
$('.expdiv').animate({marginLeft:marginLeft});//是激活状态 动画显示改变marginLeft
}
else { //不激活状态 直接设置css
$('.expdiv').css('marginLeft',marginLeft);
$('.expand').animate({ //动画改变滑动层高 显示二级菜单
height:130
}).addClass('active'); //添加class(’active‘) 区分滑动层激活状态
}
$(this).addClass('btn-active').siblings().removeClass('btn-active');
//添加类判断是否当前一级菜单为激活状态 激活状态再次点击收起二级菜单
//清除兄弟的激活状态
});
2、关闭二级菜单
$('#closeBtn').on('click',function () {
$('.expand').animate({ //动画关闭
height:0
},function () {
$(this).removeClass('active');//并且移除class(’active) 下次点击一级菜单才能执行if语句
});
});
背景图片
$('.nav-btn').on('click', function () {
var iNow=$(this).index();
var marginLeft='-'+iNow*100+'%';//显示对应二级菜单
if ($(this).hasClass('btn-active')){
$('#closeBtn').trigger('click');//触发点击事件
// $('#closeBtn').click();//查找点击事件
}
if ($(".expand").hasClass('active')) {
$('.expdiv').animate({marginLeft:marginLeft});//激活状态 动画
}
else { //不激活状态 直接设置css
$('.expdiv').css('marginLeft',marginLeft);
$('.expand').animate({
height:130
}).addClass('active');
}
$(this).addClass('btn-active').siblings().removeClass('btn-active');//添加类判断是否当前a为激活状态 激活状态再次点击收起二级菜单
});
$('#closeBtn').on('click',function () {
$('.expand').animate({
height:0
},function () {
$(this).removeClass('active');//移除class 下次点击一级菜单执行if语句
});
});
* {
margin: 0;
padding: 0;
}
.logo {
height: 86px;
width: 256px;
margin-top: 25px;
background: url("images/logo.jpg");
}
#navList{
width: 1050px;
margin: 0 auto;
position: relative
}
.top-nav .navlist {
position: absolute;
right: 130PX;
top: -40PX
}
.top-nav .navlist .nav-btn {
float: left;
margin-left: 60px;
color: #666;
vertical-align: middle;
text-decoration: none
}
.navlist .nav-btn span {
background: url(images/broswer_home.png) no-repeat -29px -145px;
display: inline-block;
width: 16px;
height: 16px;
margin-left: 4px;
vertical-align: middle;
}
.navlist .btn-active span { /*激活状态下 箭头改变*/
background: url(images/broswer_home.png) no-repeat -8px -145px;
*background-position: -5px -145px
}
.top-nav .expand {
height: 0;
background-color: #fff9a8;
overflow: hidden;
position: relative;
width: 100%
}
.expand .expdiv {
height: 130px;
width: 500%; /*五个链接*/
}
.expand .expdiv .item {
float: left;
width: 20% /*20%*500%=100%*/
}
#closeBtn {
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;
}
.expdiv .expdiv-list {
text-align: center;
height: 56px;
padding: 37px;
color: White
}
.expdiv .expdiv-list .btn {
display: inline-block;
text-decoration: none;
color: #586e91;
font-size: 18px;
line-height: 24px;
margin: 0 28px;
cursor: pointer
}
.expdiv .expdiv-list .btn:hover {
color: #7896af
}
.expdiv-list .btn .icon {
background-repeat: no-repeat;
background-image: url(images/broswer_home.png);
background-position: -4px 0;
height: 56px;
width: 56px;
float: left
}
.expdiv-list .btn:hover .icon {
background-position: -5px -57px
}
.expdiv-list .btn .text {
float: left;
padding: 16px 0 16px 16px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特效菜单</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<h1 class="logo"></h1>
<div class="top-nav">
<div id="navList">
<div class="navlist clearfix">
<a href="#" class="nav-btn">首页<span> </span></a>
<a href="#" class="nav-btn">课程大厅<span> </span></a>
<a href="#" class="nav-btn">学习中心<span> </span></a>
<a href="#" class="nav-btn">个人中心<span> </span></a>
<a href="#" class="nav-btn">关于我们<span> </span></a>
</div>
</div>
<div class="expand">
<div class="expdiv">
<div class="item">
<div class="expdiv-list">
<a href="#" target="_blank" class="btn"><span class="icon"></span>
<span class="text">主页</span></a>
</div>
</div>
<div class="item">
<div class="expdiv-list">
<a href="#" target="_blank" class="btn"><span class="icon"></span>
<span class="text">前端课程</span></a>
<a href="#" target="_blank" class="btn"><span class="icon"></span>
<span class="text">手机开发</span></a>
<a href="#" target="_blank" class="btn"><span class="icon"></span>
<span class="text">后台编程</span></a>
</div>
</div>
<div class="item">
<div class="expdiv-list">
<a href="#" target="_blank" class="btn"><span class="icon"></span>
<span class="text">Javascript</span></a>
<a href="#" target="_blank" class="btn"><span class="icon"></span>
<span class="text">CSS</span></a>
<a href="#" target="_blank" class="btn"><span class="icon"></span>
<span class="text">JQuery</span></a>
</div>
</div>
<div class="item">
<div class="expdiv-list">
你好啊
</div>
</div>
<div class="item">
<div class="expdiv-list">
李银河
</div>
</div>
</div>
<div id="closeBtn">
</div>
</div>
</div>
<script type="text/javascript" src="../Scripts/jquery.js"></script>
<script src="js.js"></script>
</body>
</html>
背景图片