jQuery弹出侧边栏滑动菜单

本文用了不到20行jQuery代码展示了隐藏的侧边栏弹出效果。

分类：导航菜单 > 滑动导航难易：高级

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

菜单html代码

<a href="#cd-nav" class="cd-nav-trigger">Menu 
    <span class="cd-nav-icon"></span>
    <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
    <circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
    </svg>
</a>

导航菜单区域html代码

<div class="cd-navigation-wrapper">
    <div class="cd-half-block">
        <h2>导航菜单</h2>
        <nav>
            <ul class="cd-primary-nav">
                <li><a href="http://www.sucaihuo.com" class="selected">首页</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>
    </div>
</div>

main.js

jQuery(document).ready(function($) {
    var isLateralNavAnimating = false;
    //o打开或关闭导航菜单
    $('.cd-nav-trigger').on('click', function(event) {
        event.preventDefault();
        //若动画正在进行，则停止 
        if (!isLateralNavAnimating) {
            if ($(this).parents('.csstransitions').length > 0)
                isLateralNavAnimating = true;

            $('body').toggleClass('navigation-is-open');
            $('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
                //动画结束
                isLateralNavAnimating = false;
            });
        }
    });
});