Hamburger

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

Dependencies

• Component 1.0.0

Getting started

Javascript

// 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();

HTML

<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>

Scss basic style & mixins

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);

Constructor Parameters

args

Type: Object Default: {}

Config options that will be used when instance is created

objectName

Type: String Default: 'Component'

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

Interface

Options

el

Type: DOMElement Default: null

Dom element it needs to mananage.

Properties

el

Type: DOMElement Default: [DOMElement]

Dom element it is managing

active

Type: Boolean Default: false

Activation flag, can be toggled externally

Methods

activate

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.

deactivate

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.

toggle

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.

destroy

Parameters: none Return: undefined

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

Generator

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'
	}
});

To Do

• Make it return itself so chaining can be made possible