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.