Cool Animated Side Menus with Sliding and Pushing Effects

In this tutorial we're going to create animated side menus with cool slide out and slide in effects. It makes it easier to create vertical or horizontal menus that can slide out from any of the edges of your page.  Please check the demo page to view more examples.

See also:

• jQuery Plugin For Responsive Side Menu - sidr
• jQuery Plugin For Sliding Sidebar Menu - jQuery Sidebar
• Three-Dimensional and Space Efficient Menu - Meny

View more:

• Top 50 Off-canvas Navigation jQuery Plugins

How to use it

1. Create a side menu 

<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>

2. Create a button to trigger/close the sliding effect

<button id="showLeft">Show/Hide Left Slide Menu</button>

The CSS

1. 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;
}

2. 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;
}

3. Vertical menu that slides from the left

.cbp-spmenu-left {
left: -240px;
}
.cbp-spmenu-left.cbp-spmenu-open {
left: 0px;
}

4. Transitions

.cbp-spmenu, .cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}

The javascript

1. Include Classie plugin to apply class helper functions

<script src="js/classie.js"></script>

2. The javascript

<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
body = document.body;

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

function disableOther( button ) {
if( button !== 'showLeft' ) {
classie.toggle( showLeft, 'disabled' );
}
}
</script>

---

This awesome jQuery plugin is developed by MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.