The hamburger.css is a pure CSS library which developed to make a cool hamburger menu animations. It has a great collection of tasty CSS-animated hamburger icons for the menu. It is fully modular and customizable so you can cook up your own hamburger. It also included the Sass library.
How to Implement Hamburger Menu Animation
First of all, download and include the CSS in the <head> of your site:
<link href="dist/hamburgers.css" rel="stylesheet">
Next, add the base hamburger HTML markup:
<button class="hamburger" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>You can also use <div>s if you insist, but they’re not accessible as a menu button.
<div class="hamburger">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>To add the specified animation. You simply need to 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>List Of Cool CSS Classes
Here’s the list of hamburger-type classes you can choose from:
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
That’s It. It is simple and easy to use. You don’t need to write all of the code to design a nice looking hamburger animation. Simply call the file in the header and append the class into a button to make it work.
