jQuery Plugin For Mobile Style Push & Slide Menus - Pushy

Pushy is a lightweight jQuery plugin for creating mobile App-style push & slide menus that slide out from any sides of your screen when toggled.

How to use it:

1. Include the jQuery Javascript library and the jQuery pushy plugin at the bottom of your Html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/pushy.js"></script>

2. Include the required component.css in the header for general styles.

<link rel="stylesheet" href="css/component.css">

3. Create an vertical slide menu as follows.

<nav class="na-menu na-menu-vertical na-menu-left" id="na-menu-s1">
  <h3>Menu</h3>
  <a href="#">This</a>
  <a href="#">That</a> 
  <a href="#">Those</a> 
  <a href="#">These</a>
</nav>

4. Create a toggle button to open/close the slide menu.

<button id="showLeft">Left</button>

Change log:

2014-08-25

• added scrolling transition
• added shrinking nav bar on scroll

---

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