
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">☰ 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.
- Publication date: 25.04.2019
- Source