jQuery仿qq浏览器动画切换导航效果_导航菜单_动画导航_qq_导航菜单

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

淘建站为您提供更多_导航菜单_动画导航_qq_导航菜单，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 315 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：导航菜单 > 动画导航难易程度：初级

一级菜单

<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.sucaiq.com/" class="btn zj"><span class="icon"></span><span class="text">直接下载安装包</span></a>
                <a href="http://www.sucaiq.com/" class="btn apple"><span class="icon"></span><span class="text">AppStore免费下载</span></a>
                <a href="http://www.sucaiq.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.sucaiq.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.sucaiq.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;
});