Lightweight jQuery Off-canvas Sliding Navigation Plugin

Yet another jQuery navigation plugin for creating a sticky multi-level top menu bar that will be converted into a mobile-friendly off-canvas sliding navigation on small screen devices. Useful for responsive websites to provide an user-friendly and efficient navigation system. The navigation will slide out from the edge from the left side of the screen when clicking or touching the toggle button, with a nice CSS3 transition effect. 

How to use it:

1. Include the required CSS into the head tag.

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

2. Include jQuery javascript library and the jQuery Sassy Off-Canvas Navigation plugin in the document.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/off_canvas_nav.js"></script>

3. Create the Html for the toggle button.

<div class="off_canvas_container slide">
<div class="off_canvas_top_menu slide">
<div class="off_canvas_toggles"> <span class="back_btn"></span> <span class="close_btn">X</span> </div>
</div>
</div>

4. Create the Html for the multi-level navigation menu.

<header class="top_layer slide">
<ul class="nav_toggle burger">
<li></li>
<li></li>
<li></li>
</ul>
<nav class="dropdown">
<ul>
<li><a href="">Level One 1</a>
<ul>
<li><a href="">Level Two 1</a></li>
<li><a href="">Level Two 2</a></li>
<li><a href="">Level Two 3</a></li>
<li><a href="">Level Two 4</a></li>
<li><a href="">Level Two 5</a>
<ul>
<li><a href="">Level Three 1</a></li>
<li><a href="">Level Three 2</a></li>
<li><a href="">Level Three 3</a>
<ul>
<li><a href="">Level Four 1</a></li>
<li><a href="">Level Four 2</a></li>
<li><a href="">Level Four 3</a></li>
<li><a href="">Level Four 4</a></li>
<li><a href="">Level Four 5</a></li>
<li><a href="">Level Four 6</a></li>
<li><a href="">Level Four 7</a></li>
<li><a href="">Level Four 8</a></li>
<li><a href="">Level Four 9</a></li>
<li><a href="">Level Four 10</a></li>
<li><a href="">Level Four 11</a></li>
<li><a href="">Level Four 12</a></li>
</ul>
</li>
<li><a href="">Level Three 4</a></li>
</ul>
</li>
<li><a href="">Level Two 6</a></li>
<li><a href="">Level Two 7</a></li>
<li><a href="">Level Two 8</a></li>
</ul>
</li>
<li><a href="">Level One 2</a></li>
<li><a href="">Level One 3</a></li>
<li><a href="">Level One 4</a>
<ul>
<li><a href="">Level Two 1</a></li>
<li><a href="">Level Two 2</a></li>
<li><a href="">Level Two 3</a></li>
<li><a href="">Level Two 4</a></li>
<li><a href="">Level Two 5</a></li>
<li><a href="">Level Two 6</a></li>
<li><a href="">Level Two 7</a></li>
<li><a href="">Level Two 8</a></li>
</ul>
</li>
<li><a href="">Level One 5</a></li>
<li><a href="">Level One 6</a></li>
<li><a href="">Level One 7</a></li>
<li><a href="">Level One 8</a></li>
<li><a href="">Level One 9</a></li>
<li><a href="">Level One 10</a></li>
</ul>
</nav>
</header>

4. Initialize the plugin and set the appropriate jQuery selectors for the navigation.

<script>
offCanvasNav({
nav_toggle: ".nav_toggle",
target_nav: ".dropdown"
});
</script>

Change log:

2014-05-15

• Fixed nested nav bugs on mobile

2014-05-15

• bug fixes

2014-05-13

• Fixed Scrolling Issues on iOS Devices

2014-05-13

• updated nav-next-btn hover state, updated sass variables for btn hover states
• Fixed window-resize bug so the animation doesn't glitch on resize

---

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