jQuery Plugin For Off Screen Sliding Menu with CSS3 Transitions - Drawer

Yet another mobile-style navigation drawer plugin for easily implement an off screen sliding menu into your website. When you click on a toggle, a sidebar navigation will slide out from the left/right edge of your screen and push the main content to the right or left. Works perfect on modern browsers that support CSS3 transitions.

How to use it:

1. Include the jQuery Drawer plugin after JQuery library before closing body tag.

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

2. Create markup for a left sliding menu.

<div id="primary-menu" class="menu menu-left">
<ul>
...
</ul>
</div>

3. Create a toggle button to open the sliding menu.

<div class="content"> 

Your main content goes here

<a href="#" id="primary-menu-toggle" class="menu-toggle"></a>

</div>

4. Call the plugin with option settings.

<script>
$(function() {
$('#primary-menu-toggle').drawer({
menu: '#primary-menu',
push: '.content',
class: 'menu-open'
});
});
</script>

5. All the available options and callbacks.

<script>
$(function() {
$('#primary-menu-toggle').drawer({
menu: '#menu', // Menu element
push: '.push', // Container element to push
side: 'left', // left or right
speed: 400,
class: 'open', // CSS class to apply to the menu element when it is open

// Callback API
open: function(settings) {},
close: function(settings) {}
});
});
</script>

6. The CSS to style the sliding menu.

.container, .content {
position: relative;
}
.container {
overflow: hidden;
}
.content {
z-index: 1;
width: 100%;
overflow: auto;
background: #fff;
}
.menu {
position: absolute;
top: 0;
z-index: 0;
width: 75%;
background: #0b79e5;
visibility: hidden;
opacity: 0;
}
.menu-left {
left: 0;
}
.menu-right {
right: 0;
}
.menu-open {
visibility: visible;
opacity: 1;
}
.menu-toggle {
display: block;
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
text-align: center;
background: #0b79e5;
}
.menu-toggle::after {
content: "\2630";
color: #fff;
}
#primary-menu-toggle {
position: absolute;
}
#primary-menu-toggle {
top: 20px;
left: 20px;
}

---

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