一、页面布局
五个一级标题对应五个二级标题 所有箭头等图标、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>
背景图片