Creating A Simple Off-canvas Slide Panel Navigation with jQuery Pushy

Pushy is a super tiny (~1kb) jQuery plugin for creating an off-canvas, multi-level slide panel navigation as you've seen in many mobile Apps.

Click the toggle button will slide out a side panel navigation from the left side and push the main content to the right.

Basic Usage:

1. Include jQuery library and jQuery pushy plugin in the page.

<link rel="stylesheet" href="css/pushy.css">
<script src="jquery.min.js"></script>
<script src="js/pushy.min.js"></script>

2. Include modernizr.js for older IE support.

<script src="js/vendor/modernizr-2.6.2.min.js"></script>

3. Create the side menu from nested HTML lists as follows:

• pushy: required
• pushy-left: or pushy-right
• pushy-submenu: has sub menu

<nav class="pushy pushy-left">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li class="pushy-submenu">
      <button>Item 4</button>
      <ul>
          <li class="pushy-link"><a href="#">Item 4.1</a></li>
          <li class="pushy-link"><a href="#">Item 4.2</a></li>
          <li class="pushy-link"><a href="#">Item 4.3</a></li>
      </ul>
    </li>
  </ul>
</nav>

4. Create the HTML for the background overlay when the menu is opened.

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

5. Create a menu toggle button in your main content. Done.

<div id="container"> 
  <div class="menu-btn">&#9776; Menu</div>
  YOUR MAIN CONTENT
</div>

6. Set the focused menu item when the menu is opened using the data-focus attribute:

<nav class="pushy pushy-left" data-focus="#target">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li class="pushy-submenu">
      <button id="target">Item 4</button>
      <ul>
          <li class="pushy-link"><a href="#">Item 4.1</a></li>
          <li class="pushy-link"><a href="#">Item 4.2</a></li>
          <li class="pushy-link"><a href="#">Item 4.3</a></li>
      </ul>
    </li>
  </ul>
</nav>

7. Change the default class (.menu-btn) for toggling the menu:

<nav class="pushy pushy-right" data-menu-btn-selector=".my-menu-btn">
  ...
</nav>

<button class="my-menu-btn">Menu</button>

8. Customize the target container using the data-container-selector attribute:

<nav class="pushy pushy-right" data-container-selector="#custom-container">

Changelog:

v1.4.0 (2020-12-29)

• Renamed data-menu-btn-class attribute to data-menu-btn-selector
• Added the data-container-selector attribute
• Updated deprecated event handlers
• jQuery 3.x support

2020-11-03

• JS: removed submenu var

v1.3.0 (2019-06-26)

• Added the data-menu-btn-class attribute to change 'menu-btn' class for toggling menu

v1.2.0 (2019-04-25)

• Added support for a 3rd level submenu

---

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