Responsive Sliding Sidebar Navigation Plugin With jQuery - crbnMenu

crbnMenu is a lightweight jQuery plugin for creating an accordion-style collapsible sidebar navigation with sub menus on your webpage. The plugin also has the ability to collapse the sidebar navigation into a hamburger toggle nav menu for better user experience on mobile devices.

View more:

• Top 50 Off-canvas Navigation jQuery Plugins

How to use it:

1. Load Font Awesome Iconic Font (OPTIONAL) and the jQuery crbnMenu plugin's main CSS file in the head section of the html document.

<link rel="stylesheet" href="font-awesome.min.css">
<link rel="stylesheet" href="styles.css">

2. Create the sidebar navigation from nested html lists as this:

<div class="menu-container">
  <div class="crbnMenu">
    <div class="link-stack">
      <span class="brand">CRBNMenu v.1</span>
      <a id="nav-toggle" class="nav-toggle">
        <span></span>
      </a>
    </div>
    <ul class="menu">
      <li>
        <a class="nav-link" href="#">
          <span>Link 1</span> 
          <span class="menu-toggle"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
        </a>
        <ul>
          <li>
              <a href="#">Submenu 1_1</a>
          </li>
          <li>
              <a href="#">Submenu 1_2</a>
          </li>
          <li>
              <a href="#">Submenu 1_3</a>
          </li>
          </li>
        </ul>
      </li>
        <li>
          <a class="nav-link" href="#">
            <span>Link 2</span>
            <span class="menu-toggle"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
          </a>
          <ul>
            <li>
              <a href="#">Submenu 2_1</a>
            </li>
            <li>
              <a href="#">Submenu 2_2</a>
            </li>
            <li>
              <a href="#">Submenu 2_3</a>
            </li>
          </ul>
        </li>
    </ul>
  </div>
  <div class="content">
    Main Content Here
  </div>
</div>

3. Load jQuery library and the jQuery crbnMenu plugin's script at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="crbnMenu.js"></script>

4. Initialize the sidebar navigation and done.

$('.menu').crbnMenu();

5. Decide whether or not to hide the active menu.

$('.menu').crbnMenu({
  hideActive: true
});

---

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