Minimalist Navigation Drawer Plugin With jQuery - Push Menu

Minimalist Navigation Drawer Plugin With jQuery - Push Menu
File Size: 3.99 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Push Menu is a very small (~2kb unminified) jQuery plugin used to create an Android style navigation drawer (also known as off-canvas menu) that slides in from the left side of the webpage. Smooth slide in animations based on CSS3 transitions and transforms.

How to use it:

1. Load the latest version of jQuery library together with the jQuery push menu plugin's JavaScript and CSS into the webpage.

<link rel="stylesheet" href="pushmenu.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="pushmenu.js"></script>

2. The html structure for the navigation drawer.

<div id="pm_menu" class="pm_close">
  Navigation here
</div>

3. Create a button to toggle the navigation drawer.

<button id="open">Open</button>

4. The JavaScript to active the navigation drawer.

$('#pm_menu').pushmenu({ button : "#open" });

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