最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2015-08-21 06:37浏览(1464)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery仿qq浏览器动画切换导航效果
分类:导航菜单 > 动画导航 难易:初级
查看演示 下载资源: 110

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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;
});
标签: qq导航菜单
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/398.html
评论1
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 沙发
    08-03 11:58
    qq562140910
    不错,不错~~
1 2