一套固定的菜单，可以从任何一页的边缘滑出。这两个菜单，幻灯片从左边和右边也可以用在身体的左侧或右侧，分别组合，因此被“Push”。
有例子，如何触发开启和关闭的菜单和一些例子媒体查询。
HTML代码
<!-- body has the class "cbp-spmenu-push" -->
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<div class="container">
<div class="main">
<section>
<h2>Slide Menus</h2>
<!-- Class "cbp-spmenu-open" gets applied to menu -->
<button id="showLeft">Show/Hide Left Slide Menu</button>
<button id="showRight">Show/Hide Right Slide Menu</button>
<button id="showTop">Show/Hide Top Slide Menu</button>
<button id="showBottom">Show/Hide Bottom Slide Menu</button>
</section>
<section class="buttonset">
<h2>Push Menus</h2>
<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
<button id="showLeftPush">Show/Hide Left Push Menu</button>
<button id="showRightPush">Show/Hide Right Push Menu</button>
</section>
</div>
</div>
CSS代码
/* General styles for all menus */
.cbp-spmenu {
background: #47a3da;
position: fixed;
}
.cbp-spmenu h3 {
color: #afdefa;
font-size: 1.9em;
padding: 20px;
margin: 0;
font-weight: 300;
background: #0d77b6;
}
.cbp-spmenu a {
display: block;
color: #fff;
font-size: 1.1em;
font-weight: 300;
}
.cbp-spmenu a:hover {
background: #258ecd;
}
.cbp-spmenu a:active {
background: #afdefa;
color: #47a3da;
}
/* Orientation-dependent styles for the content of the menu */
.cbp-spmenu-vertical {
width: 240px;
height: 100%;
top: 0;
z-index: 1000;
}
.cbp-spmenu-vertical a {
border-bottom: 1px solid #258ecd;
padding: 1em;
}
.cbp-spmenu-horizontal {
width: 100%;
height: 150px;
left: 0;
z-index: 1000;
overflow: hidden;
}
.cbp-spmenu-horizontal h3 {
height: 100%;
width: 20%;
float: left;
}
.cbp-spmenu-horizontal a {
float: left;
width: 20%;
padding: 0.8em;
border-left: 1px solid #258ecd;
}
/* Vertical menu that slides from the left or right */
.cbp-spmenu-left {
left: -240px;
}
.cbp-spmenu-right {
right: -240px;
}
.cbp-spmenu-left.cbp-spmenu-open {
left: 0px;
}
.cbp-spmenu-right.cbp-spmenu-open {
right: 0px;
}
/* Horizontal menu that slides from the top or bottom */
.cbp-spmenu-top {
top: -150px;
}
.cbp-spmenu-bottom {
bottom: -150px;
}
.cbp-spmenu-top.cbp-spmenu-open {
top: 0px;
}
.cbp-spmenu-bottom.cbp-spmenu-open {
bottom: 0px;
}
/* Push classes applied to the body */
.cbp-spmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.cbp-spmenu-push-toright {
left: 240px;
}
.cbp-spmenu-push-toleft {
left: -240px;
}
/* Transitions */
.cbp-spmenu,
.cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* Example media queries */
@media screen and (max-width: 55.1875em){
.cbp-spmenu-horizontal {
font-size: 75%;
height: 110px;
}
.cbp-spmenu-top {
top: -110px;
}
.cbp-spmenu-bottom {
bottom: -110px;
}
}
@media screen and (max-height: 26.375em){
.cbp-spmenu-vertical {
font-size: 90%;
width: 190px;
}
.cbp-spmenu-left,
.cbp-spmenu-push-toleft {
left: -190px;
}
.cbp-spmenu-right {
right: -190px;
}
.cbp-spmenu-push-toright {
left: 190px;
}
}
JavaScript代码
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
menuRight = document.getElementById( 'cbp-spmenu-s2' ),
menuTop = document.getElementById( 'cbp-spmenu-s3' ),
menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
showLeft = document.getElementById( 'showLeft' ),
showRight = document.getElementById( 'showRight' ),
showTop = document.getElementById( 'showTop' ),
showBottom = document.getElementById( 'showBottom' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
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' );
};
function disableOther( button ) {
if( button !== 'showLeft' ) {
classie.toggle( showLeft, 'disabled' );
}
if( button !== 'showRight' ) {
classie.toggle( showRight, 'disabled' );
}
if( button !== 'showTop' ) {
classie.toggle( showTop, 'disabled' );
}
if( button !== 'showBottom' ) {
classie.toggle( showBottom, 'disabled' );
}
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
if( button !== 'showRightPush' ) {
classie.toggle( showRightPush, 'disabled' );
}
}