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

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

分类：导航菜单 > 动画导航难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

菜单html代码

<nav> 
    <ul class="cd-primary-nav"> 
        <li class="cd-label">主菜单</li> 
        <li><a href="http://www.sucaihuo.com">首页</a></li> 
        <li><a href="http://www.sucaihuo.com/js">jQuery</a></li> 
        <li><a href="http://www.sucaihuo.com/php">PHP</a></li> 
        <li><a href="http://www.sucaihuo.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');
        });
    }
});