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

收藏

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

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

查看演示

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

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

手机菜单列表和关闭按钮

<nav id="main-nav">
    <ul>
        <li><a href="http://www.erdangjiade.com/js"><span>jQuery</span></a></li>
        <li><a href="http://www.erdangjiade.com/templates"><span>模板</span></a></li>
        <li><a href="http://www.erdangjiade.com/php"><span>PHP</span></a></li>
    </ul>
    <a href="http://www.erdangjiade.com/js" class="cd-close-menu">Close<span></span></a>
</nav>

点击显示菜单和关闭菜单

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)');
    }
});