Hamburger Menu

Instantiable plugin for hamburger menus.

Enjoy using Hamburger Menu?

If you enjoy using Hamburger Menu and want to support it's development, you can leave me a small tip. All payments are securely handled through PayPal.

Installation

Setting up is pretty straight-forward. Just download the script from dist folder and include it in your HTML:

<script type="text/javascript" src="path/to/hamburger-menu.min.js"></script>

Hamburger Menu also supports AMD / CommonJS

// AMD
require(["path/to/hamburger-menu-js"], function(HamburgerMenu) {});

// CommonJS
var HamburgerMenu = require("hamburger-menu-js");

Get from NPM

Hamburger Menu is also available on NPM:

$ npm install hamburger-menu-js

Polyfills

The plugin provides the polyfills for closest and CustomEvents to extend support back to IE9. Include the file /dist/hamburger-menu-polyfilled.min.js or use the polyfill files from the folder /src/shared.

Basic Usage

Create an instance of HamburgerMenu and pass in the selector for the menu element and, optionally, your custom options.

<script type="text/javascript">
    var menu = new HamburgerMenu( '#menu-mobile__wrapper', {
      toggleButton: '#menu-toggle',
      stateActiveClass: 'menu-mobile--open',
      stateInactiveClass: 'menu-mobile--closed',
    });
</script>

Options

Option | Default Value | Comments --- | --- | --- defaultState | inactive | Accepts active and inactive as starting state. stateElement | #menu | Selector for the menu element. stateActiveClass | is-active | Css class name for the active state applied to the stateElement. stateInactiveClass | (empty) | Css class name for the inactive state applied to the stateElement. bodyClass | hamburger-menu | Css class name applied to the body element when the component is initialized. bodyClassActive | hamburger-menu--active | Css class name applied to the body element when the current instance of HamburgerMenu is in active state. toggleButton | #menu-toggle | Selector for the button element. toggleButtonActiveClass | is-active | Css class name for the active state applied to the toggleButton.

Contributing to Development

Pull requests and contributions are very wellcome.

You can get your copy up and running for development quickly by cloning the repo and running npm install:

$ npm install

This will install all the necessary tools for compiling minified files.

Make your changes then generate new compiled files running gulp:

$ gulp build-scripts

Or watch for file changes in the src folder running:

$ gulp

Change Log

1.0.0

• Initial release

License

Licensed under MIT. Enjoy.

Acknowledgement

Hamburger Menu was created by Diego Versiani for a better menu for mobile and perhaps other devices.