jQuery以圆形动画打开菜单

收藏

用手机打开演示页面会看到右上角有一个圆形菜单按钮，打开它主菜单会以圆形动画展现出来，右上角也会有关闭按钮哦。

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

查看演示

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

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

菜单结构

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

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