Blueprint - 滑动和推动菜单插件

收藏

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

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

查看演示

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

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

菜单HTML代码

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