Lightweight Responsive Site Navigation System With jQuery

A lightweight, responsive menu system which turns a nested unordered list of menu links into a vertical off-canvas sliding menu on mobile view (screen size < 800px).

How to use it:

1. Load the style sheet menu.css in the head section, and the JavaScript file menu.js after jQuery library.

<link rel="stylesheet" href="css/menu.css">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="menu.min.js"></script>

2. Create a normal dropdown site navigation from a nested nav list as follows:

<nav class="menu">
  <div class="scroll-container">
    <li><a href="#">Home</a></li>
    <li class="has-sub"><a href="#">Category</a>
      <ul class="sub">
        <li><a href="#">Category 1</a></li>
        <li><a href="#">Category 2</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
  </div>
</nav>

3. That's it. When the webpage is displayed in the mobile view, the plugin will automatically generate an off-canvas menu where the menu items are cloned from the regular site navigation.

---

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