magic-burgers v1.0.0

Magic burgers

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

Usage

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, whilehamburger-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 filehamburger.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 filehamburger.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")

Sass

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.

Customization

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

Browser support

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