CSS-Variables-Hamburgers

This is an open-source project inspired by Hamburgers, but with the customization feature of using CSS variables instead of Sass. With this project, you can easily create stylish hamburger menu animations for your web projects using pure CSS.

Motivation

The motivation behind this project is to provide a simpler and more flexible alternative to using Sass for customizing hamburger menu animations. By utilizing CSS variables, developers can easily tweak colors, sizes, and other properties directly in their CSS files without the need for Sass preprocessing.

Features

• Easy-to-use hamburger menu animations.
• Customizable with CSS variables.
• Lightweight and dependency-free.
• Cross-browser compatible.

Usage

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

<link rel="stylesheet" href="css-variable-hamburgers.min.css">
<!-- CDN -->
<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:

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

Hamburger Types

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

Contributing

Contributions are welcome! If you have any ideas for improvements or new features, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Acknowledgments

• Inspired by Hamburgers by Jonathan Suh.
• Built with love and CSS variables.