Stripped Back Responsive Off-Canvas Navigation Plugin For jQuery

Off Canvas Menu is a lightweight jQuery plugin that converts a standard ul li based menu to a responsive off canvas sidebar navigation for small screen devices.

See also:

• jQuery Off-Canvas Sidebar Navigation Plugin - Form5 Offcanvas
• Creating A Simple Off-canvas Slide Panel Navigation with jQuery Pushy
• Creating An Off-canvas Navigation Menu With jQuery and CSS3

How to use it:

1. Load the necessary javascript files at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.offCanvasMenu-0.1.js"></script> 

2. Load the required jQuery Off Canvas Menu's CSS file in the head section of the page.

<link type="text/css" rel="stylesheet" href="offCanvasMenu.css">

3. Create the html for the off canvas navigation. The markup structure should be like this.

<div id="ocm-outer-page-wrapper">
<div id="ocm-page-wrapper">
<a href="#" id="ocm-open-btn" class="ocm-open-btn">Open Menu</a>
<nav class="ocm-main-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#" id="ocm-close-btn" class="ocm-close-btn">Close Menu</a> </nav>

<main>

Main content goese here.

</main>

4. Initialize the plugin and done.

<script>
$(document).ready(function() {
OffCanvasMenu.init();		
});
</script>

Change log:

2014-03-28

• small code fix in demo file

---

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