4. Add class active to the button element to trigger the animation. The implemention is up to you. Here's an example in Javascript: (fiddle).

$3

1. You can also download this stylesheet, it's all you need. Include it on your page inside the tags.

`html

`

2. Add the HTML markup like above.

Animations (browse)

Here's a list of the animations you can choose from. Just switch out the class on the button element, and you're done!

`
hamburger--apple
hamburger--arrow
hamburger--arrow-right
hamburger--chop
hamburger--collapse
hamburger--converge
hamburger--criss-cross
hamburger--default
hamburger--dive
hamburger--flatten
hamburger--magnetic
hamburger--minimal
hamburger--parallel
hamburger--push
hamburger--shelf
hamburger--simple
hamburger--spin
hamburger--stack
hamburger--twist
hamburger--vertical
`

Customisation

$3

With the power of Sass you can customise the buttons to fit your project even better. Declare your variables before including the base file, only then they will override the default values. Like so:

`scss
$hamburger-color: #fff;

@import "~delicious-hamburgers/scss/base";
@import "~delicious-hamburgers/scss/animations/criss-cross";
`

$3

Here's a full list of the customizable options available with their default values:

`scss
$hamburger-size: 50px; // Set both width and height
$hamburger-width: $hamburger-size; // Width (overrides $size, for a non square button)
$hamburger-thickness: 2px; // Thickness of the bars
$hamburger-color: #000;
$hamburger-color-hover: $hamburger-color;
$hamburger-color-active: $hamburger-color;
$hamburger-background: transparent;
$hamburger-background-hover: $hamburger-background;
$hamburger-background-active: $hamburger-background;
$hamburger-background-transition-speed: 0.2s;
$hamburger-border-color: transparent;
$hamburger-border-width: 0; // Note: the border will always act like it's inset, even if
// you use a div element. I wanted to keep consistency between
// the button and div element, which normally react differently
// to a border. If you're using a div element, changing this won't
// affect the real size of the button.
$hamburger-opacity: 1;
$hamburger-opacity-hover: 1;
$hamburger-opacity-transition-speed: 0.2s;
$hamburger-padding: round($hamburger-size / 10); // The space between the button border
// and the actual bars. There's a little padding by default so the
// clickable area is a little bigger than the visual button. You
// can also use a px value here instead of a relative one.
$hamburger-border-radius: 0; // Border-radius of the button.
$hamburger-bar-border-radius: 0; // Border-radius of the bars.
$hamburger-bar-spacing: round($hamburger-size / 5); // How far the bars are apart from
// eachother. You can also use a px value here instead of a relative
// one.
$hamburger-animation-speed: 1; // The timings of the animations are carefully chosen. But you
// can use this factor variable to slow down or speed up the animations.
// Use .5 for twice as slow, 2 for twice as fast etc.
$hamburger-class-name: 'hamburger'; // The main class and prefixes of the animation classes
// can be changed. This allows for different styled buttons on the
// same page.
$hamburger-active-class-name: 'active'; // Change the classname that triggers the animation
$hamburger-extra-transition-rules: &; // = null. If you need extra transition rules on the base element
// you can set this variable and it gets appended. This way you don't
// need to overwrite the plugin transition rules. Example:
// $hamburger-extra-transition-rules: box-shadow 0.15s ease-in-out;
`

#### Select which animations to compile by variable

Even if you import all the animations by including ~delicious-hamburgers/scss/hamburgers.scss you can use the following variable to choose which animations to compile. Since v1.x.x this is not really necessary anymore because you can import animations separately, but here's the option anyway.

`scss
$hamburger-animations: ( hamburger--apple, hamburger--arrow, etc... );
`

Migration from v0.x.x to v1.x.x

There's some breaking changes when updating from v0.x.x to v1.x.x.

$3

For extra robustness this package makes use of Sass' math module. There are many different implementations of the Sass language and the primary one is Dart Sass, which supports this math module. As of now LibSass (and because of that also node-sass) and RubySass haven't implemented this module yet, although in the future they most likely will.

If you get an error like SassError: Invalid CSS after "$root-two: math": expected expression (e.g. 1px, bold), was ".sqrt(2);" your project is probably not using Dart Sass, most likely node-sass. Read on for a possible solution.

^{Other examples needed? Please post an issue on Github.}

#### 1.1 Using webpack with sass-loader, or node-sass in general?

If you're using webpack try removing node-sass (which depends on LibSass) from your projects' devDependencies, and install sass (which is a Javascript distribution of Dart Sass). See here for more information.

#### 1.2 Using parcel-bundler?

Parcel officially uses sass so you're good to go!

$3

From v1.0.0 and on Bower support has been dropped. Versions v0.x.x will still be available on Bower as deprecated package.

$3

Old (v0.x.x) | New (v1.x.x) | Comments
--- | --- | ---
$hamburger-border-radius | $hamburger-bar-border-radius | $hamburger-border-radius is now used for the outside border.
$hamburger-animations: (arrow-r) | $hamburger-animations: (arrow-right) | Variable is the same, but arrow-r is now arrow-right.
| $hamburger-color-hover |
| $hamburger-background-hover |
| $hamburger-background-transition-speed |
| $hamburger-opacity-transition-speed |
| $hamburger-width | Since 1.1.0
| $hamburger-active-class-name | Since 1.1.0
| $hamburger-extra-transition-rules` | ^{Since 1.1.0}

Copyright and license

Aw yiss, code released under MIT License. Have at it 🤘.