Responsive Push Menu Plugin For jQuery - uNav
File Size: | 47.3 KB |
---|---|
Views Total: | 4749 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

uNav is a simple-to-use jQuery responsive menu plugin that automatically transforms the regular dropdown menu into a push menu with off-canvas style on mobile and tablet devices. Smooth animations based on CSS3 transitions and transforms.
How to use it:
1. Load the main stylesheet style.unav.css
in the document's head
section.
<link rel="stylesheet" href="style.unav.css">
2. Create a normal site navigation as follows:
<div id="navigation"> <button> <span>Toggle menu</span> </button> <nav> <a href="#">Link 1</a> <a href="#">Link 2</a> <div> <a href="#">Link 3</a> <div> <a href="#">Link 3.1</a> <a href="#">Link 3.2</a> <a href="#">Link 3.3</a> <a href="#">Link 3.4</a> <a href="#">Link 3.5</a> </div> </div> <a href="#">Link 4</a> </nav> </div>
3. Load jQuery JavaScript library and the JavaScript file jquery.unav.js
at the end of the document.
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="jquery.unav.js"></script>
4. Initialize the responsive menu by calling the function on the top container. Done.
$(function(){ $('#navigation').uNav(); });
This awesome jQuery plugin is developed by Ins-V. For more Advanced Usages, please check the demo page or visit the official website.