Responsive Push Menu Plugin For jQuery - uNav
| File Size: | 47.3 KB |
|---|---|
| Views Total: | 4788 |
| 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.











