How to create animated hamburger menu
Tags: css, html, javascript, menu
Published: 2023-02-22 18:47:51

## Introduction

I started out by using [react-svg-morph](https://www.npmjs.com/package/react-svg-morph) in my personal website, to animate my icon, specifically menu icon. Unfortunately, [react-svg-morph](https://www.npmjs.com/package/react-svg-morph) is not maintained (5 years and counting) meaning it still uses some outdated peer dependencies and more importantly, it's not worth its size in kb (since I'm only using it for one thing!).

So I decided to create a my own hamburger menu icon and the answer is not animating svg, in fact, my approach could not be further from [react-svg-morph](https://www.npmjs.com/package/react-svg-morph).

With just a few lines of code, you can easily create a dynamic and eye-catching animation for your website's hamburger icon!

## TLDR

Don't have time to read the full article and just want to see the full code, here it is.

### HTML

```html
<body>
  <main id="main">
    <div></div>
    <div></div>
    <div></div>
  </main>
</body>
```

### CSS

```css
main {
  cursor: pointer;
}

div {
  height: 4px;
  width: 40px;
  background-color: white;
  border-radius: 4px;
  margin: 8px 0;
  transition: 0.75s linear;
}

.on > div:nth-child(2) {
  opacity: 0;
  transform: rotate(360deg) scale(0.2);
}

.on > div:first-child {
  transform: rotate(45deg) translate(8px, 9px);
}

.on > div:last-child {
  transform: rotate(-45deg) translate(8px, -9px);
}

body {
  background-color: hsl(180deg 100% 25%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
```

### Javascript

```js
const main = document.getElementById("main");

const toggleClass = () => {
  main.classList.toggle("on");
};

main.addEventListener("click", toggleClass);
```

The final product and the code is available on [codepen](https://codepen.io/Diorla/full/XWqemGB).

## Step by Step
For a detailed explanation of the entire process

```html
<main id="main">
  <div></div>
  <div></div>
  <div></div>
</main>
```

To start, you'll need to create three `<div>` elements within a `<main>` container, each representing one of the three strokes in the hamburger icon. To create the strokes, you'll need to define the height, width, and contrasting background color for each of the `<div>` elements, and add some margin between them.

```css
div {
  height: 4px;
  width: 40px;
  background-color: white;
  border-radius: 4px;
  margin: 8px 0;
  /* Add animation to change in states */
  transition: 0.75s linear;
}
```

Once you have the three strokes in place, it's time to create the animation that will transform the hamburger icon into a close icon. To do this, you'll need to add a new state to your `<main>` container by adding the class "on" to it.

```html
<main id="main" class="on">
  <div></div>
  <div></div>
  <div></div>
</main>
```

![Close icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tst1u2o1u95qz2q4j8qu.png)

To create the close icon, you'll need to hide the middle stroke and rotate the other two strokes to form an "X" shape. You can achieve this by using the opacity and transform properties.

```css
.on > div:nth-child(2) {
  opacity: 0;
  /* Rotate while hiding it */
  transform: rotate(360deg) scale(0.2);
}
```

Subsequently, We need to rotate the other two element to form a close (X) sign

```css
.on > div:first-child {
  transform: rotate(45deg) translate(8px, 9px);
}

.on > div:last-child {
  transform: rotate(-45deg) translate(8px, -9px);
}
```

Finally, you'll need to add a toggle function that adds and removes the "on" class from the `<main>` container when the hamburger icon is clicked.

Remember, all our strokes (`<div>`) are nested inside `main#main`. So we can use it to let us

- Know when the icon is clicked
- Know the current state
- Change the current state

Now, we just have to show how we want the second state to look like, that is create a new style for the second state.

```js
const main = document.getElementById("main");

const toggleClass = () => {
  main.classList.toggle("on");
};

main.addEventListener("click", toggleClass);
```

And there you have it - a simple but effective animation that transforms your website's hamburger icon into a close icon with just a few lines of code. If you have any suggestions or feedback, feel free to share them in the comments!