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

By Faraz - July 28, 2022

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 Responsive Real Estate Landing Page using html css and javascript.webp

Responsive Real Estate Website using HTML, CSS, and JavaScript (Source Code)

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.

Join My Telegram Channel to Download the Project: Click Here

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 well-organized base hamburger menu markup and toggle a class name on click with JavaScript. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

<!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 creating a tetris game with html css and javascript.jpg

Creating a Tetris Game with 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.

/*!
 * 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 Creating Wooden Toggle Buttons Using HTML and CSS Source Code.jpg

Creating Wooden Toggle Buttons Using HTML and CSS (Source Code)

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