Simple jQuery & CSS3 Based Off-canvas Sidebar Navigation

A super simple jQuery script to create an Off-canvas sidebar menu for navigation. The navigation will slide out from the left side of the page with a smooth CSS3 transition effect once you click the toggle button.

How to use it:

1. Include the required jQuery library directly from a CDN.

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

2. Create a button to toggle the off-canvas navigation.

<div id="menu-toggle">
<img src="menu.png" width=20 height=20 alt="Menu"></img>
</div>

3. Create a menu using Html unordered list.

<nav id="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Login</a>
<a href="#">A Link</a>
<a href="#">Another Link</a>
</nav>

4. The CSS to style the menu.

#menu {
transition: all 0.3s ease;
position: fixed;
width: 0%;
top: 0;
left: -200px;
background: rgb(0, 0, 0);
height: 100%;
z-index: 999;
box-shadow: 0px 0px 10px black;
}
#menu a {
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
border-radius: 100px;
transition: all 0.2s ease;
}
#menu a:hover {
background: rgb(50, 50, 50);
}
#menu-toggle {
position: fixed;
top: 20px;
left: 0;
background: rgb(0, 100, 100);
z-index: 1000;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: all 0.3s ease;
}
#menu-toggle:hover {
cursor: pointer;
}
#menu.open {
left: 0;
width: 200px;
display: block;
}
#menu-toggle.open {
left: 200px;
}

5. The javascript to enable the navigation.

$(document).ready(function () {
$('#menu-toggle').click(function(){
if($('#menu').hasClass('open')){
$('#menu').removeClass('open');
$('#menu-toggle').removeClass('open');
}else{
$('#menu').addClass('open');
$('#menu-toggle').addClass('open');
}
});
});

---

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