jQuery仿qq浏览器动画切换导航效果

收藏

分享一个上下切换子菜单的动画效果，你可以很简单的应用到你的网站主题上。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

一级菜单

<div id="navList" class="navlist-wrap">
    <div class="navlist clearfix">
        <a href="javascript:void(0);" class="nav-btn" data-device="#androidItem">Android<span>&nbsp;&nbsp;&nbsp;</span></a>
        <a href="javascript:void(0);" class="nav-btn" data-device="#iphoneItem">iPhone<span>&nbsp;&nbsp;&nbsp;</span></a>
        <a href="javascript:void(0);" class="nav-btn" data-device="#ipadItem">iPad<span>&nbsp;&nbsp;&nbsp;</span></a>
        <a href="javascript:void(0);" class="nav-btn" data-device="#pcItem">PC<span>&nbsp;&nbsp;&nbsp;</span></a>
        <a href="javascript:void(0);" class="nav-btn" data-device="#macItem">MAC<span>&nbsp;&nbsp;&nbsp;</span></a>
    </div>
</div>

子菜单代码

<div id="expandZone" class="expand active">
    <div class="download">
        <div id="ipadItem" class="item">
            <div class="download-list">
                <a href="http://www.erdangjiade.com/" class="btn zj"><span class="icon"></span><span class="text">直接下载安装包</span></a>
                <a href="http://www.erdangjiade.com/" class="btn apple"><span class="icon"></span><span class="text">AppStore免费下载</span></a>
                <a href="http://www.erdangjiade.com/" class="btn itools"><span class="icon"></span><span class="text">itools一键安装</span></a>
            </div>
        </div>
        <div id="pcItem" class="item">
            <div class="download-list">
                <a href="http://www.erdangjiade.com/" class="btn zj"><span class="icon"></span><span class="text">直接下载安装包</span></a>
            </div>
        </div>
        <div id="macItem" class="item">
            <div class="download-list">
                <a href="http://www.erdangjiade.com/" class="btn zj"><span class="icon"></span><span class="text">直接下载安装包</span></a>
            </div>
        </div>
    </div>
    <div id="closeBtn" class="close-btn"></div>
</div>

jquery菜单切换效果

$('#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 .download').animate({
            marginLeft: mlValue
        });
    } else {
        $('#expandZone .download').css({
            marginLeft: mlValue
        });
    }
    var device = $(this).data('device');
    $(this).addClass('btn-active').siblings().removeClass('btn-active');
    $(device).addClass('item-active').siblings().removeClass('item-active');
    $('#expandZone').animate({
        height: '130px'
    }).addClass('active');
    return false;
});

$('#expandZone #closeBtn').on('click',
function() {
    $('#expandZone').animate({
        height: '0px'
    },
    function() {
        $(this).removeClass('active');
        $('#navList .btn-active').removeClass('btn-active');
    });
    return false;
});