Cool Animated Side Menus with Sliding and Pushing Effects

File Size: 17.4 KB
Views Total: 171136
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

View more:

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.