Fullscreen Navigation with Animated Burger Toggle Using jQuery - fatNav

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

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.