Blueprint - 滑动和推动菜单插件_导航菜单_展开收缩_滑动菜单_底部菜单

本文演示了Blueprint在不同位置六种滑动菜单效果。

淘建站为您提供更多_导航菜单_展开收缩_滑动菜单_底部菜单，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 310 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：导航菜单 > 展开收缩难易程度：初级

菜单HTML代码

<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
    <h3>菜单</h3>
    <a href="http://www.sucaiq.com/js">jQuery特效</a>
    <a href="http://www.sucaiq.com/js/11-0-0-0">表单代码</a>
    <a href="http://www.sucaiq.com/js/12-0-0-0">悬浮层/弹出层</a>
    <a href="http://www.sucaiq.com/js/149-0-0-0">手机特效</a>
    <a href="http://www.sucaiq.com/js/119-0-0-0">html5</a>
    <a href="http://www.sucaiq.com/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');
};