Creating An Off-canvas Navigation Menu With jQuery and CSS3

A jQuery based off-canvas navigation menu with subtle CSS3 transitions. When clicking the toggle button, a side menu will slide out from the edge of the page and push the main content to the right.

Basic Usage:

1. Create a side navigation menu using Html unordered lists.

<div id="slide-menu">
<ul class="navigation">
<li id="close"><a href="#"><img src="navi.png" alt="Close"></a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

2. Style the side menu via CSS.

#slide-menu {
margin-left: -250px;
left: 0;
width: 250px;
background: #222;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
font-family: Roboto, sans-serif;
color: #fff;
font-weight: 100;
font-size: 1.5em;
}
.navigation {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.navigation li {
line-height: 40px;
text-indent: 20px;
}
.navigation li a {
color: #999;
display: block;
padding: 20px 0;
text-decoration: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.navigation li a:hover {
color: #fff;
background: rgba(98,200,191,.5);
text-decoration: none;
padding-left: 20px;
}
.navigation li a:active, .navigation li a:focus {
text-decoration: none
}

3. Create a button used to toggle the side menu.

<div id="push"> <a href="#">Menu</a> </div>

4. Include the jQuery library at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

5. The javascript.

<script>
$(document).ready(function () {
$('#push, #close').click(function () {
var $navigacia = $('body, #slide-menu'),
val = $navigacia.css('left') === '250px' ? '0px' : '250px';
$navigacia.animate({
left: val
}, 300)
});
});
</script>

---

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