This time I will share jQuery Plugin and tutorial about Minimalist Navigation Drawer Plugin With jQuery – Push Menu, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="pushmenu.css"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<script src="pushmenu.js"></script> |
2. The html structure for the navigation drawer.
1 |
<div id="pm_menu" class="pm_close"> |
3. Create a button to toggle the navigation drawer.
1 |
<button id="open">Open</button> |
4. The JavaScript to active the navigation drawer.
1 |
$('#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.
