jQuery以圆形动画打开菜单

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

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

菜单结构

<nav>
    <ul class="cd-primary-nav">
        <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>

var overlayNav = $('.cd-overlay-nav'),
        overlayContent = $('.cd-overlay-content'),
        navigation = $('.cd-primary-nav'),
        toggleNav = $('.cd-nav-trigger');

//inizialize navigation and content layers
layerInit();
$(window).on('resize', function() {
    window.requestAnimationFrame(layerInit);
});

//open/close the menu and cover layers
toggleNav.on('click', function() {
    if (!toggleNav.hasClass('close-nav')) {
        //it means navigation is not visible yet - open it and animate navigation layer
        toggleNav.addClass('close-nav');

        overlayNav.children('span').velocity({
            translateZ: 0,
            scaleX: 1,
            scaleY: 1,
        }, 500, 'easeInCubic', function() {
            navigation.addClass('fade-in');
        });
    } else {
        //navigation is open - close it and remove navigation layer
        toggleNav.removeClass('close-nav');

        overlayContent.children('span').velocity({
            translateZ: 0,
            scaleX: 1,
            scaleY: 1,
        }, 500, 'easeInCubic', function() {
            navigation.removeClass('fade-in');

            overlayNav.children('span').velocity({
                translateZ: 0,
                scaleX: 0,
                scaleY: 0,
            }, 0);

            overlayContent.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
                overlayContent.children('span').velocity({
                    translateZ: 0,
                    scaleX: 0,
                    scaleY: 0,
                }, 0, function() {
                    overlayContent.removeClass('is-hidden')
                });
            });
            if ($('html').hasClass('no-csstransitions')) {
                overlayContent.children('span').velocity({
                    translateZ: 0,
                    scaleX: 0,
                    scaleY: 0,
                }, 0, function() {
                    overlayContent.removeClass('is-hidden')
                });
            }
        });
    }
});

function layerInit() {
    var diameterValue = (Math.sqrt(Math.pow($(window).height(), 2) + Math.pow($(window).width(), 2)) * 2);
    overlayNav.children('span').velocity({
        scaleX: 0,
        scaleY: 0,
        translateZ: 0,
    }, 50).velocity({
        height: diameterValue + 'px',
        width: diameterValue + 'px',
        top: -(diameterValue / 2) + 'px',
        left: -(diameterValue / 2) + 'px',
    }, 0);

    overlayContent.children('span').velocity({
        scaleX: 0,
        scaleY: 0,
        translateZ: 0,
    }, 50).velocity({
        height: diameterValue + 'px',
        width: diameterValue + 'px',
        top: -(diameterValue / 2) + 'px',
        left: -(diameterValue / 2) + 'px',
    }, 0);
}