Add animated hamburgers menu using Hamburgers collection on GitHub

Hamburgers GitHub repo is really handy when you want to add quick hamburgers menu in your website.

Rather than writing your own CSS code and making the hamburgers menu use this repo to add hamburgers in different styles and animations.

Step by step guide to add hamburgers menu

Here are the steps to add the hamburgers menu using the CSS from the repo. You can refer to their GitHub repo as well for the same.

Step 1

Download the CSS file.

Step 2

Add the CSS file to your site.

<link href="dist/hamburgers.css" rel="stylesheet">

Step 3

Add the hamburgers button with the type of hamburger you want.

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

Here’s a list of hamburgers classes. You can replace any of the following with the hamburger–collapse class in the button above.

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

Step 4

Use JavaScript to toggle the class is-active.

This is what we need to do when user clicks on the button. You can toggle class by using ID or class.

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

Share this post