https://github.com/Glitchbone/jquery-fatNav

Chubby fullscreen menu with nice hamburger toggle
https://github.com/Glitchbone/jquery-fatNav

Last synced: 24 days ago
JSON representation

Chubby fullscreen menu with nice hamburger toggle

• Host: GitHub
• URL: https://github.com/Glitchbone/jquery-fatNav
• Owner: Glitchbone
• License: mit
• Created: 2015-04-17T12:31:32.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-09-08T12:05:58.000Z (about 7 years ago)
• Last Synced: 2024-08-01T02:34:51.704Z (4 months ago)
• Language: JavaScript
• Homepage: http://glitchbone.github.io/jquery-fatNav
• Size: 26.4 KB
• Stars: 82
• Watchers: 9
• Forks: 23
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jQuery fatNav

Chubby fullscreen menu with nice hamburger toggle

[Demo](http://glitchbone.github.io/jquery-fatNav)

## Installation

Install via bower:

```sh

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:

``` html



    


        


            
Menu item

            
Menu item

            
Menu item

            
Menu item

        

    



```


Call the javascript function:

``` javascript

$.fatNav();

```

## Customizing hamburger color

Default state:

``` css

.hamburger .hamburger__icon, 

.hamburger .hamburger__icon:before, 

.hamburger .hamburger__icon:after {

    background-color: red;

}

```

Close button state:

``` css

.hamburger.active .hamburger__icon:before, 

.hamburger.active .hamburger__icon:after {

    background-color: green;

}

```

## Build

```sh

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

npm install

grunt

```

## Author

**Adrien Glitchbone**

+ [https://twitter.com/glitchbone](https://twitter.com/glitchbone)

+ [http://github.com/Glitchbone](http://github.com/Glitchbone)

## License

jQuery fatNav is available under the MIT license. See the [LICENSE](LICENSE) file for more information.