Lightweight jQuery Off-canvas Sliding Navigation Plugin

Lightweight jQuery Off-canvas Sliding Navigation Plugin
File Size: 36.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.