How to Build Modern Hamburger Menu CSS Animation 🍔 (easy)

In this tutorial I will share how I built hamburger menu CSS animation with Javascript.

The hamburger menu animation is not an essential element on the website, but I think, it adds some classiness to the project. 😎 Specifically to the VFX part 🙂✌

There are different approaches you can take to accomplish this task. Probably the most evident is to use SVG. But I decided to use pure CSS to create hamburger to X (cross) animation.

As a UI designer, I decided to style hamburger menu in Modern Minimal UI style 😍.

So, let’s go and see the project in action below ⬇️

Project: Hamburger Menu Animation CSS

// hamburger to x animation

See the Pen CSS Animated Close Button Javascript by jsSecrets (@jssecrets) on CodePen.

hamburger menu css animation
hamburger menu css animation

Basic Working Principle

// hamburger to x animation

What is Hamburger Menu in a nutshell?

// hamburger menu to x animation

Generally, there are three horizontal lines stacked vertically [ ☰ ]. And together they resemble a burger: two burger buns and meat in the middle 🍔. This is where the name comes from. 😊

hamburger menu css animation
hamburger menu css animation

Horizontal lines could be created in different ways.

1️⃣ First is the CSS method (the one we use in this project) – simply HTML elements with width, height, and background color.

2️⃣ SVG – draw three lines in any software (ex: Figma ❤️) and then manage that SVG code with CSS.

3️⃣ Lottie is probably a bit exotic 🙂 but it allows you to create a complicated animations in After Effects and the use them on the websites.

hamburger menu css animation
hamburger menu css animation

Working Principle

// hamburger menu to x animation

There are two versions of 🍔 hamburger menu.

1️⃣ No animation

After a user clicks the burger icon [ ☰ ], the hamburger icon disappears and a cross icon appears and vice versa.

2️⃣ CSS animation

After a user clicks a hamburger icon [ ☰ ] three lines visually transform into a cross (X) i.e. animation/transition takes place.

Simplest Working Version (SWV)

The Simplest Working Version would #1️⃣ with no animation.

Core concept

// hamburger menu animation css

Let’s continue with a core concept of how the hamburger menu CSS animation works.

1️⃣ HTML

// hamburger menu animation css

HTML elements .button and .trigger act as containers. <span> and its pseudo-elements (&::before, &::after) are the actual horizontal lines of the burger menu.

<div class="button">
  <div class="trigger">
    <span></span>
  </div>
</div>

2️⃣ CSS

// hamburger menu animation css

CSS is where all the work takes place.

<span> and its pseudo-elements (&::before, &::after) are being drawn with CSS i.e. three horizontal lines [ ☰ ]

The icon has two states:

#1 – hamburger state ( ☰ ) i.e. hypothetical menu (ex: sidebar) is closed

#2 – cross state ( X ) i.e. hypothetical menu (ex: sidebar) is opened

In CSS we have position values of the burger horizontal lines for both states.

And animations are performed with CSS animations 😊

3️⃣ Javascript

// how to make a hamburger menu javascript

JS is used simply for toggling between two states: hamburger state ( ☰ ) and cross ( X ) state.

hamburger to x animation
hamburger to x animation

Code explanation

// css burger menu animation

If you have understood the core concept and working principle of how to CSS hamburger menu animation is built, the code will be easy to grasp.

HTML

// css animation hamburger menu

<body>
<!---->

<div class="button">
  <div class="trigger">

<!--element for burger menu-->
    <span></span>

<!--why is it only one <span>?-->
<!--I thought it should be three. You may ask. 😊-->
<!--Good question!-->
<!--the other two will be created with CSS as pseudo-elements-->

  </div>
</div>

</body>

CSS

// js hamburger menu animation

/*basic reset*/

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  background: #fafbfc;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: #292d34;
}

/*purple container*/
/*it is optional to have a container for burger menu*/

.button {
  width: 160px;
  height: 160px;
  border-radius: 100%;
  cursor: pointer;
  position: relative;
  background: #7b42d1;
  box-shadow: 0 10px 25px rgba(123, 66, 209, 0.4);
}

/*invisible container for three lines*/
/*height and width are custom values, you may set your own*/
/*height is 60px because each of three lines is 12px*/
/*and each of two spacing are 12px*/
/*total = 60px*/
/*I use absolute positioning to center the element*/

.button .trigger {
  width: 96px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*span element styling i.e. horizontal lines of the burger*/
/*line #1 - the center line of the burger menu*/
/*height is 12px and it starts on 24px mark up to 36px mark*/
/*24px + 12px*/
/* total height of the container is 60px */

.button .trigger span {
  position: relative;
  width: 100%;
  height: 12px;
  transform: translateY(24px);
  background-color: white;
  display: block;
  border-radius: 9px;

/*animation*/
  animation: opacityOn 0.5s linear both;
}

/*pseudo-elements styling*/
/*lines #2 (top line) and #3 (bottom line)*/

.button .trigger span::before, .button .trigger span::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 12px;
  background-color: white;
  display: block;
  border-radius: 9px;
}

/*we move this(top line) line above the span(center line)*/
.button .trigger span::before {
  transform: translateY(-24px);

/*animation*/
  animation: downAndTurnReverse 0.5s linear both;
}

/*we move this(bottom line) line below the span(center line)*/
.button .trigger span::after {
  transform: translateY(24px);

/*animation*/
  animation: upAndTurnReverse 0.5s linear both;
}

.button .trigger.active span {
  animation: opacityOff 0.5s linear both;
}
.button .trigger.active span::before {
  animation: downAndTurn 0.5s linear both;
}
.button .trigger.active span::after {
  animation: upAndTurn 0.5s linear both;
}

/*Animations*/

/*For humbuger menu animation I use six animations*/
/*Three for transforming burger into cross*/
/*Three for transforming cross back into burger*/

/*The center <span> line*/
/*the easiest to understand*/
/*the center line of the burger menu simply fades away into invisibility*/
/*and the back to visibility*/

/*becomes invisible*/
@keyframes opacityOff {
  0% {
    background-color: white;
  }
  49% {
    background-color: white;
  }
  50% {
    background-color: rgba(255, 255, 255, 0);
  }
  100% {
    background-color: rgba(255, 255, 255, 0);
  }
}

/*becomes visible*/
@keyframes opacityOn {
  0% {
    background-color: rgba(255, 255, 255, 0);
  }
  49% {
    background-color: rgba(255, 255, 255, 0);
  }
  50% {
    background-color: white;
  }
  100% {
    background-color: white;
  }
}

/*the top line ::before*/
/*there are two actions take place at the same time*/
/*first: the line moves down*/
/*second: - rotates 45 degree*/
@keyframes downAndTurn {
  0% {
    transform: translateY(-24px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(45deg);
  }
}

/*reverse action*/
/*first: - rotates to 0 degrees*/
/*second: - goes back to the top position*/
@keyframes downAndTurnReverse {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(-24px) rotate(0deg);
  }
}

/*the bottom line ::after*/
/*there are two actions take place at the same time*/
/*first: the line moves up*/
/*second: - rotates 45 degree*/
@keyframes upAndTurn {
  0% {
    transform: translateY(24px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }

  100% {
    transform: translateY(0px) rotate(-45deg);
  }
}

/*reverse action*/
/*first: - rotates to 0 degrees*/
/*second: - goes back to the bottom position*/
@keyframes upAndTurnReverse {
  0% {
    transform: translateY(0px) rotate(-45deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(24px) rotate(0deg);
  }
}

Javascript

// js hamburger menu animation

// Variables

const trigger = document.querySelector('.trigger');

// Functions

const iconToggle = (event) => {

// class toggle
  event.currentTarget.classList.toggle('active');
};

// Event Listeners

trigger.addEventListener('click', iconToggle);

Project Ideas

// pure css hamburger menu animation

1️⃣ Try different CSS animation ideas. There are plenty of them here.

2️⃣ Lottie. Try to create some Lottie animations. As it is After Effects composition it has more possibilities i.e you can be more creative.

Frequently Asked Questions

// burger menu button animation

1️⃣ What is a hamburger menu on a website?

Three horizontal lines stacked vertically [ ☰ ]. Together they resemble a burger: two burger buns and meat in the middle. Usually it resides in the top right corner of the website. When user clicks on it a menu opens (ex: sidebar).

2️⃣ Hamburger menu history?

Hamburger menu icon was created by the designer Norm Cox for the graphical user interface of the Xerox Star workstation in 1981. Cox’s goal was to create an icon that would communicate to users that a list of items was hidden behind it.
After the Xerox Star, the hamburger menu became an unpopular navigation pattern and remained that way for almost three decades.
But the situation changed in 2009 when smartphones started to gain traction. Screen space was a precious commodity on mobile, and designers needed to fit a multitude of information on pocketable screens.
The hamburger menu seemed like a good solution for this problem, and the icon started to appear in many popular mobile apps such as Facebook. 
Shortly after, it started spreading on the Internet. Many websites and mobile apps adopted this pattern. Today, many popular user interface (UI) kits have a hamburger menu inside.
Source: adobe.com

3️⃣ Where is the hamburger menu on Facebook?

Burger menu icon is located at the bottom right corner of the Facebook app.

4️⃣ Where is the hamburger menu button?

Usually it is located at top right corner of the website.

5️⃣ How to use hamburger menu in HTML?

There are different approaches the burger menu could used in HTML. One is to use <span> tags. The second approach is to utilize <SVG>.

6️⃣ How to do hamburger menu in CSS?

It is easy to create a hamburger menu CSS animation. As in this example you may use a pseudo-elements and use CSS animations to animate them.

Note
If you have some Javascript project in mind that you want me to explain, please write it in the comments.
hamburger menu animation css
hamburger menu animation css

What to do next?

You can check out my Javascript Like Button project.

Resources

// hamburger menu on click animation

1️⃣ jssecrets.com

2️⃣ Web illustrations by Storyset

3️⃣ Technology illustrations by Storyset

4️⃣ Online illustrations by Storyset

5️⃣ How to Build Hamburger Menu CSS Animation (easy) Codepen

Ilyas Seisov

Ilyas Seisov

UI/Web designer and Javascript developer with Master's degree in Computer Science. He helps businesses transform ideas into reality with the power of design and code. Ilyas creates modern, aesthetic web applications and reads minds in a free time.

Leave a Reply

Your email address will not be published. Required fields are marked *