Fullscreen Navigation with Animated Burger Toggle Using jQuery - fatNav
File Size: | 24.7 KB |
---|---|
Views Total: | 14480 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

fatNav is a minimalist jQuery navigation menu to create an animated hamburger toggle that reveals a fullscreen navigation menu with zoomIn & zoomOut animations.
How to use it:
1. Import jQuery library and the jQuery fatNav plugin's stylesheet & JavaScript into your web page.
<link href="dist/jquery.fatNav.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src="dist/jquery.fatNav.js"></script>
2. The html to create a normal navigation menu.
<div class="fat-nav"> <div class="fat-nav__wrapper"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Category</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </div> </div>
3. Call the plugin and we're done.
$.fatNav();
This awesome jQuery plugin is developed by Glitchbone. For more Advanced Usages, please check the demo page or visit the official website.