特效菜单栏水平导航栏

 
  一、页面布局 
 

   五个一级标题对应五个二级标题 所有箭头等图标、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>

背景图片

 
  点击打开链接 
 

特效菜单栏 水平导航栏

猜你喜欢

特效菜单栏水平导航栏