Stripped Back Responsive Off-Canvas Navigation Plugin For jQuery

File Size: 39.5 KB
Views Total: 2575
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

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

<script src=""></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">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<a href="#" id="ocm-close-btn" class="ocm-close-btn">Close Menu</a> </nav>


Main content goese here.


4. Initialize the plugin and done.

$(document).ready(function() {

Change log:


  • 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.