Magic burgers is a small css library of animated hamburger menus inspired by this library. Also includes source sass files. Modular library and customizable, allowing you to cook your own burger!

• The size of the minified css file with all effects - 27KB
• The size of the source sass files - 16KB
• The size of the minified css file with one effect - 3KB

1. Install

npm i magic-burgers

2. Add the following markup to the page:

<button class="hamburger">
  <span class="hamburger-inner">
    <span class="line-top">
      <span class="line-top-left"></span>
      <span class="line-top-right"></span>
    </span>
    <span class="line-center">
      <span class="line-center-left"></span>
      <span class="line-center-right"></span>
    </span>
    <span class="line-bottom">
      <span class="line-bottom-left"></span>
      <span class="line-bottom-right"></span>
    </span>
  </span>
</button>

3. Add the class name of the type of hamburger you need:

<button class="hamburger hamburger--arrowdown">
  <span class="hamburger-inner">
    <span class="line-top">
      <span class="line-top-left"></span>
      <span class="line-top-right"></span>
    </span>
    <span class="line-center">
      <span class="line-center-left"></span>
      <span class="line-center-right"></span>
    </span>
    <span class="line-bottom">
      <span class="line-bottom-left"></span>
      <span class="line-bottom-right"></span>
    </span>
  </span>
</button>

The following classes are available:

hamburger--3d
hamburger--alchemy
hamburger--alchemy-r
hamburger--arrowdown
hamburger--arrowdown-r
hamburger--arrowturn
hamburger--arrowturn-r
hamburger--collapse
hamburger--juggler
hamburger--magic
hamburger--minify
hamburger--shurikens
hamburger--shurikens-r
hamburger--shurikens-alt
hamburger--shurikens-alt-r
hamburger--simple
hamburger--storm

Note: -r classes are reverse options ( for example, hamburger-arrowturn rotates the hamburger counterclockwise, while hamburger-arrowturn-r - clockwise )

4. To switch the state of a hamburger, add the is-active class:

<button class="hamburger hamburger--arrowdown is-active">
  <span class="hamburger-inner">
    <span class="line-top">
      <span class="line-top-left"></span>
      <span class="line-top-right"></span>
    </span>
    <span class="line-center">
      <span class="line-center-left"></span>
      <span class="line-center-right"></span>
    </span>
    <span class="line-bottom">
      <span class="line-bottom-left"></span>
      <span class="line-bottom-right"></span>
    </span>
  </span>
</button>

Since the class name must be switched using JavaScript, in the js/hamburger.js directory is the file hamburger.js, the code in which designed for that. Just plug it in on your site page before the closing </body> tag by pasting the following code:

<script src="js/hamburger.js"></script>

Also, if you use the pug preprocessor, in the pug directory is the file hamburger.pug with an admixture that creates markup for the hamburger. Having connected the file with an admixture in your code, you can call it as follows:

+hamburger("class name")

Where the class name is the class name of the type of hamburger you need. For instance:

+hamburger("3d")
+hamburger("alchemy")
+hamburger("juggler")
+hamburger("shurikens-alt-r")

The .scss and .sass source files are available if you use the Sass preprocessor. This gives you flexibility and modularity.

1. Import the hamburger.scss file inside your file:

@import "path/to/hamburger";

2. Configure your hamburger - override the $hamburger-types variable to remove those types that you do not plan to use from the compiled css file.

To override the default settings, declare them before importing hamburgers:

$hamburger-layer-width: 30px;
$hamburger-layer-height: 3px;
$hamburger-layer-spacing: 5px;
$hamburger-types: (
	storm
);
@import "hamburger";

You can also create a separate file ( for example, hamburger-settings.scss ) with these settings, and then import it before the hamburgers:

@import "hamburger-settings"
@import "hamburger";

Here is the complete list of default settings ( found in sass/hamburger.scss ):

$hamburger-layer-width        : 40px;
$hamburger-layer-height       : 4px;
$hamburger-layer-spacing      : 6px;
$hamburger-padding            : 10px;
$hamburger-layer-border-radius: 4px;
$hamburger-layer-color        : #000;

// override the `$hamburger-types` variable to remove those types
// that you do not plan to use from the compiled css file
$hamburger-types: (
  simple,
  collapse,
  storm,
  juggler,
  shurikens,
  shurikens-r,
  shurikens-alt,
  shurikens-alt-r,
  minify,
  arrowturn,
  arrowturn-r,
  arrowdown,
  arrowdown-r,
  magic,
  3d,
  alchemy,
  alchemy-r
);

Some animations use the CSSPerspective API, which is not supported in IE and Firefox. For more information, use caniuse.com.