Quick hamburger logic to manage the trigger

Quick and easy way to tuck away the hamburger logic inside a class. No need to rewrite the code for every project.

Class type: Component

• Component 1.0.0

// normal way
const hamburger = new Hamburger({
	el: [DOM ELEMENT]
})

// shortcut
const hamburger = new Hamburger([DOM ELEMENT])

// selector way
const hamburger = new Hamburger([SELECTOR]);

// no parameter (will search for '.hamburger:not(.hamburger--ready')
const hamburger = new Hamburger();

<a class="hamburger" href="#menu" title="Menu openen">
	<span class="hamburger-label hamburger-label--open">Menu</span>
	<span class="hamburger-label hamburger-label--close">Close</span>
	<span class="hamburger-bar hamburger-bar--1"></span>
	<span class="hamburger-bar hamburger-bar--2"></span>
	<span class="hamburger-bar hamburger-bar--3"></span>
	<!-- extra bars can be added for more complex animations -->
</a>

The package includes 3 scss mixins to help you easily animate the dom element.

// base style
@import 'minsky-hamburger/hamburger.scss

// mixins
@import 'minsky-hamburger/mixins.scss

// 3 mixins provided
@include hamburger-simpleCross($width, $height, $duration: 0.15s);
@include hamburger-4BarRotateToCross($width, $height, $duration: 0.15s);
@include hamburger-3dotsToCross($width, $height, $duration: 0.15);

Type: Object Default: {}

Config options that will be used when instance is created

Type: String Default: 'Component'

Object name that will be used as recognisable identifier and as prefix in logs

Type: DOMElement Default: null

Dom element it needs to mananage.

Type: DOMElement Default: [DOMElement]

Dom element it is managing

Type: Boolean Default: false

Activation flag, can be toggled externally

Parameters: silent:boolean Return: undefined

Sets the state of the instance to “activated”, will also apply the active modifier to the element. Use silent for it not to dispatch events when the method is called.

Parameters: silent:boolean Return: undefined

Sets the state of the instance to “deactivated”, will also remove the active modifier from the element. Use silent for it not to dispatch events when the method is called.

Parameters: silent:boolean Return: undefined

Toggles the active state of the instance, adds/removes the modifier accordingly Use silent for it not to dispatch events when the method is called.

Parameters: none Return: undefined

Destroys the instance, trying to leave no trace of its existence on the element

The package also provides you with a factory method to create a new DOM element using JS quickly.

import { generateHamburger } from 'minsky-hamburger';

// generates a html string for a hamburger component with 4 bars and custom labels
const html = generateHamburger({
	bars: 4,
	labels: {
		open: 'Menu',
		close: 'Close Menu'
	}
});

• Make it return itself so chaining can be made possible