Animated Hamburger Menu
Tags: javascript, html, css
Published: 2020-12-08 18:02:17

# Introduction
Animated navigation bars have almost become a necessity when it comes to the content you are providing to end users. Now I know we are all a little biased on this for both sides, but bare with me for a moment... We have all seen the hamburger menu. When you click on one, it either doesn't move at all or it's a quick switch to a fat `X` with no transition whatsoever. I mean... what gives!? Could we add some, you know, WOW to it?

Let's explore one way we can! Check mine out [at this link](https://mattpdev-portfolio.vercel.app/). This is my current portfolio I'm *in the process of developing*. I'm going to teach you how to animate the hamburger menu.

Also, here is a [CodePen](https://codepen.io/matthewpalmer9/pen/MWjeMyq) to follow along. I still suggest writing it out though as you read!

**NOTE: I'm not teaching the drop-down menu portion... but, if you leave a comment expressing interest... I will consider writing a blog dedicated to that functionality. :wink:**

# Getting Started
The first thing you are going to do is create three `divs`. Ideally, you want these `divs` to go in your `navbar`, but we're just going to focus on making this work. You'll need an `index.html` file. Name it whatever you want.

Next, place the `divs` inside with the provided template and classes:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
  <div class="menu">
    <div class="one active-element"></div>
    <div class="two active-element"></div>
    <div class="three active-element"></div>
  </div>
    
</body>
</html>
```

As you can see, we have initially labeled each div with a class `one`,`two`, and `three`. These divs will each represent one of three bars in the hamburger menu. Now, let's add some styling to make things visable.

Create an `index.css` file and link it in your `index.html` file. Once you've done that, apply this styling:

```
html {
  background-color: black;
}

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
}

.one, .two, .three {
        width: 45px;
        height: 3px;
        margin-bottom: 8px;
        background-color: aqua;
        border-radius: 20px;
        box-shadow: 0 0 5px aqua;
 }
```

Perfect, now you should have a black background with a glowing hamburger menu. :smile: Nothing works quite yet, but now you can at least see everything. Feel free to play with the colors if you'd like to make it your own. If all has gone well for you up to this point, we can move onto the animation portion.

# Step 1:
We want our users to know the hamburger menu can be clicked! The best way to do this is to change the cursor as it hovers over it. In your CSS file, apply this new property class:

```
.menu:hover {
    cursor: pointer
}
```

Simple enough, right? 

# Step 2:
Next, we are going to create some CSS properties for classes that don't exist yet -- `.active`. They WILL exist once we add the click events, but for now... just trust me on this. I wont disappoint!

Add these to your CSS file:
```
.one.active {
  transform: translate(0, 14px) rotate(45deg);
}

.two.active {
  background-color: transparent;
  box-shadow: none;
  transform: translateX(-55px);
}

.three.active {
  transform: translate(0, -8px) rotate(-45deg);
}
```

# Step 3:
Now we're going to make it work! Create an `index.js` file and link it in your `index.html` file. For this particular animation, there isn't much code needed. Place this in your `index.js`:

```
const menu = document.querySelector(".menu");

menu.addEventListener("click", () => {
  const activeElements = document.querySelectorAll(".active-element");
    for(let i = 0; i < activeElements.length; i++) {
        activeElements[i].classList.toggle("active");
    }
});
```

Try clicking on the hamburger menu.

Huzzah, it works! 

# The Problem and The Solution
This is unfortunately when people stop. There is a very quick animation switch, but it's basically just two frames switching back and forth. This is the most frustrating to me since fluid animation is fixed, literally, with one single property...

`transition: XXXms`

In this case, you just need to add `transition: 300ms` to `.one, .two, .three {}` in your CSS file.

This final property list looks like this:

```
.one, .two, .three {
    transition: 300ms;
    width: 45px;
    height: 3px;
    margin-bottom: 8px;
    background-color: aqua;
    border-radius: 20px;
    box-shadow: 0 0 5px aqua;
}
```

Test it out! You will be amazed at how easy this was.

# Conclusion
As it turns out, animation really isn't that difficult. This isn't to say animation can't get complicated, but I feel like some aspiring devs give it a bad rep. Whatever the case may be, I hope this proves to be useful to you all. Cheers!