fullpage全屏响应式手机导航菜单

这是一个全屏响应式手机菜单插件,点击右下角的菜单按钮,会从头而降菜单列表。

JS代码

jQuery(document).ready(function($) { 
    //open menu 
    $('.cd-menu-trigger').on('click', function(event) { 
        event.preventDefault(); 
        $('#cd-main-content').addClass('move-out'); 
        $('#main-nav').addClass('is-visible'); 
        $('.cd-shadow-layer').addClass('is-visible'); 
    }); 
    //close menu 
    $('.cd-close-menu').on('click', function(event) { 
        event.preventDefault(); 
        $('#cd-main-content').removeClass('move-out'); 
        $('#main-nav').removeClass('is-visible'); 
        $('.cd-shadow-layer').removeClass('is-visible'); 
    }); 
 
    //clipped image - blur effect 
    set_clip_property(); 
    $(window).on('resize', function() { 
        set_clip_property(); 
    }); 
 
    function set_clip_property() { 
        var $header_height = $('.cd-header').height(), 
                $window_height = $(window).height(), 
                $header_top = $window_height - $header_height, 
                $window_width = $(window).width(); 
        $('.cd-blurred-bg').css('clip', 'rect(' + $header_top + 'px, ' + $window_width + 'px, ' + $window_height + 'px, 0px)'); 
    } 
});
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录