Create an Animated Hamburger Menu - HTML, CSS, JS Tutorial

By Faraz - Last Updated: October 16, 2024

Learn how to create a tasty CSS-animated hamburger menu for responsive web design. Follow our step-by-step tutorial using HTML, CSS, and JavaScript.

Join us on Telegram

how to create animated hamburger menu using html, css and javascript.png

Read Also

How to Create a Ripple Effect Button Using HTML and CSS

A hamburger menu is a type of navigation icon that is commonly used on mobile and responsive websites. It consists of three horizontal lines that resemble a hamburger, which can be clicked to reveal a hidden menu. In this tutorial, we will show you how to create an animated hamburger menu using HTML, CSS, and JavaScript. By the end of this tutorial, you will be able to implement this popular and useful feature on your own website.

A hamburger menu is an icon used on websites and in applications that, when clicked or tapped, opens a side menu or navigation bar. This is called the "hamburger menu" because it has the shape of the famous burger. This hamburger is created by Jonathan Suh.

Let's start making a tasty CSS-animated hamburger menu Using HTML, CSS, and JavaScript step by step.

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

The first thing we need to do is create our HTML File. We'll start with a well-organized base hamburger menu markup and toggle a class name on click with JavaScript. After creating the files just paste the below codes into your file. Remember that you must save a file with the .html extension.

Below is a detailed breakdown of each section:

1. HTML Structure

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html>: Defines the document type as HTML5.
<html lang="en">: Specifies that the language of the page is English.

2. `<head>` Section

<head>
  <title>Animated Hamburger Menu</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="hamburgers.css" />
</head>

<title>: Sets the title of the page as "Animated Hamburger Menu".
<meta charset="UTF-8" />: Specifies character encoding for the page.
<meta name="viewport" content="width=device-width" />: Makes the layout responsive by adjusting to the screen width of the device.
<link rel="stylesheet" href="hamburgers.css" />: Links an external CSS file named hamburgers.css. This file will contain styles for the hamburger button and animations.

3. `<body>` Section

<body>
  <div>
    <button class="hamburger hamburger--emphatic" type="button">
      <span class="hamburger-box">
        <span class="hamburger-inner"></span>
      </span>
    </button>
  </div>

<button>: Creates a button with the class hamburger hamburger--emphatic. The animation style will be defined by the CSS file.
<span class="hamburger-box">: Acts as a wrapper around the inner part of the hamburger button.
<span class="hamburger-inner">: This is the visible part of the button, likely rendered as three horizontal lines (typical hamburger icon). CSS will transform this when toggling the active state.

4. JavaScript for Interaction

<script>
  var hamburger = document.querySelector(".hamburger");

  hamburger.addEventListener("click", function() {
    hamburger.classList.toggle("is-active");
  });
</script>

document.querySelector(".hamburger"): Finds the first element with the class hamburger.
addEventListener("click", ...): Adds a click event listener to the button.
hamburger.classList.toggle("is-active"):
- This toggles the is-active class on the button every time it is clicked.
- The is-active class will trigger an animation (like the three lines changing into an "X" icon), defined in the CSS file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Animated Hamburger Menu</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="hamburgers.css" />
  </head>
  </style>
  <body>
    <div>
    <button class="hamburger hamburger--emphatic" type="button">
      <span class="hamburger-box">
        <span class="hamburger-inner"></span>
      </span>
    </button>
  </div>
    <script>
      // Look for .hamburger
      var hamburger = document.querySelector(".hamburger");
      // On click
      hamburger.addEventListener("click", function() {
        // Toggle class "is-active"
        hamburger.classList.toggle("is-active");
        // Do something else, like open/close menu
      });
    </script>
  </body>
</html>

Read Also Crafting a Powerful NGO Website HTML, CSS, and JavaScript Essentials.jpg

NGO Website Template Development using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Next, You can download and include the CSS in the <head> of your site from https://jonsuh.com/hamburgers/ or Create a CSS file with the name of hamburgers.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Below is a detailed breakdown:

1. General Hamburger Styles

.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

padding: Adds space inside the button for better touchability.
display: inline-block: Ensures the button stays within its natural flow.
cursor: pointer: Changes the cursor to a pointer on hover.
transition-property: Smoothly animates opacity and filter.
font: inherit: Uses the same font as its parent element.
background-color: transparent: Removes background color.
border: 0 and margin: 0: Removes any default borders and margins.

Hover Effect

.hamburger:hover {
  opacity: 0.7;
}

Reduces the opacity to 0.7 on hover to provide a subtle visual effect.

2. Styles for Hamburger Inner Elements

Box and Lines

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
  width: 40px;
  height: 4px;
  background-color: #000;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
.hamburger-inner::after,
.hamburger-inner::before {
  content: '';
  display: block;
}
.hamburger-inner::before {
  top: -10px;
}
.hamburger-inner::after {
  bottom: -10px;
}

.hamburger-box: Defines the container dimensions for the hamburger lines (40px wide and 24px tall).
.hamburger-inner: The main middle line of the hamburger button.
::before and ::after: Pseudo-elements for the top and bottom lines of the hamburger.
position: absolute: Positions the lines relative to the container.
transform animations: Controls smooth transformations like rotation or translation.
border-radius: 4px: Rounds the edges of the lines.

3. Active State Styles

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::after,
.hamburger.is-active .hamburger-inner::before {
  background-color: #000;
}

When the .is-active class is applied (through JavaScript), the lines change their background color to black.

4. Emphatic Animation Styles

The "emphatic" animation creates a unique visual effect where the lines move and rotate dramatically.

.hamburger--emphatic {
  overflow: hidden;
}
.hamburger--emphatic .hamburger-inner {
  transition: background-color 125ms 175ms ease-in;
}
.hamburger--emphatic .hamburger-inner::before {
  left: 0;
  transition: transform 125ms cubic-bezier(0.6, 0.04, 0.98, 0.335),
    top 50ms 125ms linear, left 125ms 175ms ease-in;
}
.hamburger--emphatic .hamburger-inner::after {
  top: 10px;
  right: 0;
  transition: transform 125ms cubic-bezier(0.6, 0.04, 0.98, 0.335),
    top 50ms 125ms linear, right 125ms 175ms ease-in;
}

.hamburger--emphatic: A variant of the hamburger button with specific animations.
cubic-bezier easing functions: Provides smooth custom animation curves.
transform on ::before and ::after: Animates their position and rotation for a dynamic effect.

Active State Animation for Emphatic Style

.hamburger--emphatic.is-active .hamburger-inner {
  background-color: transparent !important;
}
.hamburger--emphatic.is-active .hamburger-inner::before {
  left: -80px;
  top: -80px;
  transform: translate3d(80px, 80px, 0) rotate(45deg);
}
.hamburger--emphatic.is-active .hamburger-inner::after {
  right: -80px;
  top: -80px;
  transform: translate3d(-80px, 80px, 0) rotate(-45deg);
}

When the .is-active class is applied:
- The middle line becomes transparent.
- The top and bottom lines rotate to form an "X".
- The lines are moved off-screen initially and then animated back to their new positions.

5. Emphatic-R Variant

This variant mirrors the emphatic animation, but with slightly different movements.

.hamburger--emphatic-r .hamburger-inner::before {
  transform: translate3d(80px, -80px, 0) rotate(-45deg);
}
.hamburger--emphatic-r .hamburger-inner::after {
  transform: translate3d(-80px, -80px, 0) rotate(45deg);
}

The rotation direction is reversed compared to the standard emphatic style.

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}
.hamburger:hover {
  opacity: 0.7;
}
.hamburger.is-active:hover {
  opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::after,
.hamburger.is-active .hamburger-inner::before {
  background-color: #000;
}
.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
  width: 40px;
  height: 4px;
  background-color: #000;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
.hamburger-inner::after,
.hamburger-inner::before {
  content: '';
  display: block;
}
.hamburger-inner::before {
  top: -10px;
}
.hamburger-inner::after {
  bottom: -10px;
}
.hamburger--emphatic {
  overflow: hidden;
}
.hamburger--emphatic .hamburger-inner {
  transition: background-color 125ms 175ms ease-in;
}
.hamburger--emphatic .hamburger-inner::before {
  left: 0;
  transition: transform 125ms cubic-bezier(0.6, 0.04, 0.98, 0.335),
    top 50ms 125ms linear, left 125ms 175ms ease-in;
}
.hamburger--emphatic .hamburger-inner::after {
  top: 10px;
  right: 0;
  transition: transform 125ms cubic-bezier(0.6, 0.04, 0.98, 0.335),
    top 50ms 125ms linear, right 125ms 175ms ease-in;
}
.hamburger--emphatic.is-active .hamburger-inner {
  transition-delay: 0s;
  transition-timing-function: ease-out;
  background-color: transparent !important;
}
.hamburger--emphatic.is-active .hamburger-inner::before {
  left: -80px;
  top: -80px;
  transform: translate3d(80px, 80px, 0) rotate(45deg);
  transition: left 125ms ease-out, top 50ms 125ms linear,
    transform 125ms 175ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.hamburger--emphatic.is-active .hamburger-inner::after {
  right: -80px;
  top: -80px;
  transform: translate3d(-80px, 80px, 0) rotate(-45deg);
  transition: right 125ms ease-out, top 50ms 125ms linear,
    transform 125ms 175ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.hamburger--emphatic-r {
  overflow: hidden;
}
.hamburger--emphatic-r .hamburger-inner {
  transition: background-color 125ms 175ms ease-in;
}
.hamburger--emphatic-r .hamburger-inner::before {
  left: 0;
  transition: transform 125ms cubic-bezier(0.6, 0.04, 0.98, 0.335),
    top 50ms 125ms linear, left 125ms 175ms ease-in;
}
.hamburger--emphatic-r .hamburger-inner::after {
  top: 10px;
  right: 0;
  transition: transform 125ms cubic-bezier(0.6, 0.04, 0.98, 0.335),
    top 50ms 125ms linear, right 125ms 175ms ease-in;
}
.hamburger--emphatic-r.is-active .hamburger-inner {
  transition-delay: 0s;
  transition-timing-function: ease-out;
  background-color: transparent !important;
}
.hamburger--emphatic-r.is-active .hamburger-inner::before {
  left: -80px;
  top: 80px;
  transform: translate3d(80px, -80px, 0) rotate(-45deg);
  transition: left 125ms ease-out, top 50ms 125ms linear,
    transform 125ms 175ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.hamburger--emphatic-r.is-active .hamburger-inner::after {
  right: -80px;
  top: 80px;
  transform: translate3d(-80px, -80px, 0) rotate(45deg);
  transition: right 125ms ease-out, top 50ms 125ms linear,
    transform 125ms 175ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

Final Output:

how to create animated hamburger menu using html, css and javascript.gif

Read Also Quiz Application with HTML, CSS, and JavaScript.jpg

Build a Quiz Application with HTML, CSS, and JavaScript | Step-by-Step Guide

Conclusion:

In conclusion, By following the steps outlined in this tutorial, you should now have a fully functioning CSS-animated hamburger menu. Remember to test your menu on different devices and screen sizes to ensure it is fully responsive. With a little bit of creativity, you can create a visually appealing and functional hamburger menu that enhances the user experience on your website. If you have any questions or comments, feel free to leave them below. Additionally, check out the resources section for further learning and inspiration.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: CSS, Animated Hamburger Menu, HTML, JavaScript, Responsive menu, UI design, Mobile navigation

End of the article