CSS Variables Hamburgers

1. Download the CSS file css-variable-hamburgers.min.css.
2. Include the CSS file in your HTML document:

   import '@tomoyakuroda/css-variables-hamburgers/css-variables-hamburgers.min.css';
   or
   <link rel="stylesheet" href="css-variable-hamburgers.min.css">
   or
   <link href="https://cdn.jsdelivr.net/npm/@tomoyakuroda/css-variables-hamburgers@1/css-variables-hamburgers.min.css" rel="stylesheet">

3. Add the base hamburger markup:

   <button class="hamburger" type="button">
     <span class="hamburger-box">
       <span class="hamburger-inner"></span>
     </span>
   </button>

4. Append the class name of the type of hamburger you’re craving (e.g. "hamburger--collapse"):

   <button class="hamburger hamburger--collapse" type="button">
     <span class="hamburger-box">
       <span class="hamburger-inner"></span>
     </span>
   </button>

5. Customize the hamburger menu using CSS variables:

   :root {
     --hamburger-padding-x           : 15px;
     --hamburger-padding-y           : 15px;
     --hamburger-layer-width         : 40px;
     --hamburger-layer-height        : 4px;
     --hamburger-layer-spacing       : 6px;
     --hamburger-layer-color         : #000;
     --hamburger-layer-border-radius : 4px;
     --hamburger-hover-opacity       : 0.7;
     --hamburger-active-layer-color  : var(--hamburger-layer-color);
     --hamburger-active-hover-opacity: var(--hamburger-hover-opacity);
   }

6. Toggle the hamburger menu animation with JavaScript:

   <script>
   // Look for .hamburger
   var hamburger = document.querySelector(".hamburger");
   // On click
   hamburger.addEventListener("click", function() {
     // Toggle class "is-active"
     hamburger.classList.toggle("is-active");
     // Do something else, like open/close menu
   });
   </script>

You can choose from the following hamburger-type classes:

• hamburger--3dx
• hamburger--3dx-r
• hamburger--3dy
• hamburger--3dy-r
• hamburger--3dxy
• hamburger--3dxy-r
• hamburger--arrow
• hamburger--arrow-r
• hamburger--arrowalt
• hamburger--arrowalt-r
• hamburger--arrowturn
• hamburger--arrowturn-r
• hamburger--boring
• hamburger--collapse
• hamburger--collapse-r
• hamburger--elastic
• hamburger--elastic-r
• hamburger--emphatic
• hamburger--emphatic-r
• hamburger--minus
• hamburger--slider
• hamburger--slider-r
• hamburger--spin
• hamburger--spin-r
• hamburger--spring
• hamburger--spring-r
• hamburger--stand
• hamburger--stand-r
• hamburger--squeeze
• hamburger--vortex
• hamburger--vortex-r