jQuery fatNav

Chubby fullscreen menu with nice hamburger toggle

Demo

Installation

Install via bower:

bower install jquery-fatNav

Or you can add jquery.fatNav.css and jquery.fatNav.js manually to your project

Usage

Create the menu in your HTML:

<div class="fat-nav">     <div class="fat-nav__wrapper">         <ul>             <li><a href="#">Menu item</a></li>             <li><a href="#">Menu item</a></li>             <li><a href="#">Menu item</a></li>             <li><a href="#">Menu item</a></li>         </ul>     </div> </div>

Call the javascript function:

$.fatNav();

Customizing hamburger color

Default state:

.hamburger .hamburger__icon,  .hamburger .hamburger__icon:before,  .hamburger .hamburger__icon:after {     background-color: red; }

Close button state:

.hamburger.active .hamburger__icon:before,  .hamburger.active .hamburger__icon:after {     background-color: green; }

Build

git clone https://github.com/Glitchbone/jquery-fatNav.git my_project npm install grunt

Author

Adrien Glitchbone

• https://twitter.com/glitchbone
• http://github.com/Glitchbone

License

jQuery fatNav is available under the MIT license. See the LICENSE file for more information.