Animated Hamburger Menu

#javascript #html #css

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. 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 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. 😉

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. 😄 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!