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

Pushy is a super tiny (~1kb) jQuery plugin for creating an off-canvas 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.

<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>
...
</ul>
</nav>

4. Create the side overlay.

<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>

Changelog:

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.