jQuery手机响应式全屏菜单从天而降

收藏

只是一个全屏弹出式导航插件，点击菜单按钮，会从顶部弹出全屏菜单，右上方有点击关闭按钮。

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

查看演示

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

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

菜单html代码

<nav> 
    <ul class="cd-primary-nav"> 
        <li class="cd-label">主菜单</li> 
        <li><a href="http://www.erdangjiade.com">首页</a></li> 
        <li><a href="http://www.erdangjiade.com/js">jQuery</a></li> 
        <li><a href="http://www.erdangjiade.com/php">PHP</a></li> 
        <li><a href="http://www.erdangjiade.com/templates">模板</a></li> 
    </ul> 
</nav>

main.js

var MQL = 1170;

//primary navigation slide-in effect
if ($(window).width() > MQL) {
    var headerHeight = $('.cd-header').height();
    $(window).on('scroll',
            {
                previousTop: 0
            },
    function() {
        var currentTop = $(window).scrollTop();
        //check if user is scrolling up
        if (currentTop < this.previousTop) {
            //if scrolling up...
            if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
                $('.cd-header').addClass('is-visible');
            } else {
                $('.cd-header').removeClass('is-visible is-fixed');
            }
        } else {
            //if scrolling down...
            $('.cd-header').removeClass('is-visible');
            if (currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed'))
                $('.cd-header').addClass('is-fixed');
        }
        this.previousTop = currentTop;
    });
}

$('.cd-primary-nav-trigger').on('click', function() {
    $('.cd-menu-icon').toggleClass('is-clicked');
    $('.cd-header').toggleClass('menu-is-open');

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if ($('.cd-primary-nav').hasClass('is-visible')) {
        $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
            $('body').removeClass('overflow-hidden');
        });
    } else {
        $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
            $('body').addClass('overflow-hidden');
        });
    }
});