jQuery Off-Canvas Sidebar Navigation Plugin - Form5 Offcanvas

Form5 Offcanvas is another jQuery side menu plugin for creating an off-canvas sidebar navigation that is positioned outside of the viewport and slides in when clicking the toggle button. The main content will be 'pushed' to the right when the off-canvas navigation is activated.

How to use it:

1. Load the basic stylesheet file in the head section of your page.

<link rel="stylesheet" href="form5-offcanvas.min.css">

2. Load the jQuery javascript library and jQuery Form5 Offcanvas plugin in the footer of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script src="form5-offcanvas.min.js"></script> 

3. Markup html structure.

<main>
Main content
</main>
<offcanvas>
<ul>
<li><a href="#_">Navigation item 1</a></li>
<li><a href="#_">Navigation item 2</a></li>
<li><a href="#_">Navigation item 3</a></li>
...
</ul>
</offcanvas>

4. Create a link to toggle the navigation.

<a href="#toggle-canvas" class="toggle-canvas">Toggle canvas</a>

5. Call the plugin and we're done.

<script>
$(function(){
$('offcanvas').offcanvas({
canvas: ['main','.toggle-canvas']
});
});
</script>

Change log:

v1.1.2 (2014-01-31)

• Implement uniqueID to allow for multiple offcanvas sidebars on same page + implement usage of event namespacing

---

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