菜单HTML代码

<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
    <h3>菜单</h3>
    <a href="https://jy.tp.yuanmeng.life/js">jQuery特效</a>
    <a href="https://jy.tp.yuanmeng.life/js/11-0-0-0">表单代码</a>
    <a href="https://jy.tp.yuanmeng.life/js/12-0-0-0">悬浮层/弹出层</a>
    <a href="https://jy.tp.yuanmeng.life/js/149-0-0-0">手机特效</a>
    <a href="https://jy.tp.yuanmeng.life/js/119-0-0-0">html5</a>
    <a href="https://jy.tp.yuanmeng.life/js/8-0-0-0">导航菜单</a>
</nav>

演示一：显示/隐藏左滑动菜单

showLeft = document.getElementById('showLeft');
showLeft.onclick = function() {
    classie.toggle(this, 'active');
    classie.toggle(menuLeft, 'cbp-spmenu-open');
    disableOther('showLeft');
};

演示二：显示/隐藏右滑动菜单

showRight.onclick = function() {
    classie.toggle(this, 'active');
    classie.toggle(menuRight, 'cbp-spmenu-open');
    disableOther('showRight');
};

演示三：显示/隐藏顶部菜单

showTop.onclick = function() {
    classie.toggle(this, 'active');
    classie.toggle(menuTop, 'cbp-spmenu-open');
    disableOther('showTop');
};

演示四：显示/隐藏底部菜单

showBottom.onclick = function() { classie.toggle(this, 'active'); classie.toggle(menuBottom, 'cbp-spmenu-open'); disableOther('showBottom'); };

演示五：显示/隐藏左菜单（推动）

showLeftPush.onclick = function() {
    classie.toggle(this, 'active');
    classie.toggle(body, 'cbp-spmenu-push-toright');
    classie.toggle(menuLeft, 'cbp-spmenu-open');
    disableOther('showLeftPush');
};

演示六：显示/隐藏右菜单（推动）

showRightPush.onclick = function() {
    classie.toggle(this, 'active');
    classie.toggle(body, 'cbp-spmenu-push-toleft');
    classie.toggle(menuRight, 'cbp-spmenu-open');
    disableOther('showRightPush');
};