Hamburger-menu-js NPM

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.

@infinitebrahmanuniverse/nolb-ham @everything-registry/sub-chunk-1821

1.0.0

8 years ago