Pushy is responsive menu navigation with CSS transforms and transitions. This project is inspired by the Move Off-Canvas menu. This plugin is for creating off-board navigation, multi-level as I’ve seen in many mobile apps.
Features
- Uses CSS transforms & transitions.
- Smooth performance on mobile devices.
- jQuery animation fallback for IE 7 – 9.
- The menu closes when a link is selected.
- The menu closes when the site overlay is selected.
- Auto-collapsible submenus.
- Left or right menu position.
- It’s responsive!
Must Read: Push Menu Plugin That Slides Out An Off-canvas Navigation | jQuery.SecretNav
How to make use of it:
1. Include the jQuery library and jQuery pushy plugin within the web 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 help.
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
3. Create the aspect menu from nested HTML lists as follows:
<nav class="pushy pushy-left">
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li class="pushy-submenu">
<button>Submenu 3</button>
<ul>
<li class="pushy-link"><a href="#">Item 1</a></li>
<li class="pushy-link"><a href="#">Item 2</a></li>
<li class="pushy-link"><a href="#">Item 3</a></li>
</ul>
</li>
<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 HTML for the background overlay when the menu is opened.
<div class="site-overlay"></div>
5. Create a menu toggle button in your essential content.
<div id="container"> <div class="menu-btn">☰ Menu</div> YOUR MAIN CONTENT </div>
6. Set the targeted menu item when the menu is opened utilizing the data-focus attribute:
<nav class="pushy pushy-left" data-focus="#target">
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li class="pushy-submenu">
<button>Submenu 3</button>
<ul>
<li class="pushy-link"><a href="#">Item 1</a></li>
<li class="pushy-link"><a href="#">Item 2</a></li>
<li class="pushy-link"><a href="#">Item 3</a></li>
</ul>
</li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>7. Change the default class for toggling the menu:
<nav class="pushy pushy-right" data-menu-btn-class=".my-menu-btn"> ... </nav> <button class="my-menu-btn">Menu</button>
Browser Compatibility
Must Read: [Off-Canvas] Simple and Clean Side Navigation Menu With Dropdowns | jSide Menu
| Desktop | Mobile |
|---|---|
| IE 9-11 | Chrome (Android) |
| MS Edge | Safari (iOS) |
| Chrome | |
| Firefox | |
| Safari (Mac) |
See Also –
Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav
JavaScript Library for Off-Canvas Menus (mobile style) | offcanvas.js
[Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile
See Demo And Download
Official Website(christophery): Click Here
This superior jQuery/javascript plugin is developed by christophery. For extra Advanced usage, please go to the official website.
