Yogesh Chauhan's Blog

Add animated hamburgers menu using Hamburgers collection on GitHub

in CSS on May 19, 2021

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>



Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Common Table Expressions (CTE) in PostgreSQLPostgresFilling a button background from left to right using CSSCSSHow to implement NSNumberFormatter in Swift for currency?SwiftA few HTML coding standards from WordPressHTMLWhat is the difference between float and double?MiscellaneousHow to remove a specific item from an array in JavaScript?JavaScript