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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
Open Source Security Tools for Defense SecurityMiscellaneousSQL Right JoinSQL/MySQLWhat is the difference between let and var in Swift?SwiftWHERE Clause in PostgresPostgresWindow setInterval() Method in JavaScriptJavaScriptHow to add AppRoutingModule in Angular application using command line?Angular