Cool Animated Side Menus with Sliding and Pushing Effects

Cool Animated Side Menus with Sliding and Pushing Effects
File Size: 17.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: Free for personal use
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

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:

The HTML

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>

For more Advanced Usages, please check the demo page or visit the official website.