Tiny Bootstrap Off-canvas Navigation Plugin With jQuery

This is a lightweight jQuery plugin that transforms the regular Bootstrap nav component into a mobile-friendly, off-canvas push menu on small screen devices (smaller than 767px).

How to use it:

1. Insert the Bootstrap Offcanvas Navigation plugin's files into your Bootstrap page.

<link rel="stylesheet" href="bootstrap-offcanvas-navigation.min.css">
<script src="bootstrap-offcanvas-navigation.min.js"></script>

2. Include the fastclick library to remove click delays on modern browsers.

<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>

3. Create a normal Bootstrap navbar for your website.

<nav class="navbar navbar-default">
  <div class="navbar-header clearfix">
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-close close" href="">&times;</a>
  </div>
  <div class="navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-nav-group">Group 1</li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li class="navbar-nav-group">Group 2</li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      ...
    </ul>
  </div>
</nav>

4. Create a container overlay for the offcanvas navigation when opened. That's it.

<div class="container-overlay"></div>

---

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