Cool Hamburger Menu Animations in Pure CSS

Category: Animation | August 8, 2018
cool hamburger menu animations in Pure CSS
Author: jonsuh
Official Page: Go to Website
Last Update:March 28, 2019
License:MIT

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.

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.