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

Creating A Simple Off-canvas Slide Panel Navigation with jQuery Pushy
File Size: 52.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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.

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

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