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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to define visibility for a property in PHP?PHPHow to create a simple slider with CSS and jQuery?CSSHow to use a Subquery to Insert Multiple Rows in SQL Table?SQL/MySQLRendering Elements in ReactReactHow to convert an HTML radio buttons into a toggle switch using CSS?CSSThe ALPHA function in Envision BasicEnvision Basic