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

File Size: 41.3 KB
Views Total: 22989
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.