DEV Community

loading...

Hamburger Menu CSS How to create a hamburger menu icon with CSS and JavaScript

emmaadesile profile image Adesile Emmanuel ・3 min read

Programmer and dogPhoto by Devin Edwards on Unsplash

Recently, I've been investing a lot of time in improving my frontend skills, especially in CSS and animation. As they say, if you want to be good at something, you have to put in a lot of practice. While working on my portfolio, I needed a hamburger menu icon, and because I didn't want to use any of the existing ones out there, I decided to create my own.

Prerequisites

All you need to follow along is basic HTML, CSS, and Javascript knowledge.

Writing the HTML

The HTML is pretty straightforward; we have the container for the icon, the menu-icon and three lines nested within it.

<div class="container">
  <div class="menu-icon">
    <span class="line-1"></span>
    <span class="line-2"></span>
    <span class="line-3"></span>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Basic styles for the page

This is just to centre the icon and make everything look nice.

body {
  background: #09182F;
}

.container {
  width: 100%;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Styling the menu-icon

Using grid, we can easily position the menu-icon and the nested lines within. place-items: center is the swiss army knife that performs two functions; align-items: center and justify-items: center.

.menu-icon {
  display: grid;
  place-items: center;
  height: 55px;
  width: 50px;
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Styling the 3 lines

Add the following to style the nested lines. We're giving the first and second lines different widths to make the icon look less conventional.

.menu-icon {
...

  & > span {
    width: 50px;
    height: 3px;
    background: red;
    display: block;
    transition: all 0.3s ease-in-out;
  }
}

.line-1 {
  width: 42px;
  justify-self: end;
}

.line-2 {
  width: 35px;
  justify-self: end;
}
Enter fullscreen mode Exit fullscreen mode

Hover effect

On hover effect, we change the widths of the first and second lines. The transition makes the switch between the widths smooth and seamless.

.menu-icon {
...

  &:hover span:nth-child(1) {
    width: 35px;
  }

  &:hover span:nth-child(2) {    
    width: 40px;
  }
}
Enter fullscreen mode Exit fullscreen mode

Animating the icon onClick

Here comes the fun part. We want to make the first and third lines rotate to form an X when clicked and make the second line disappear.

.menu-icon {
...

  &.active span:nth-child(1) {
    transform-origin: center center;
    transform: rotate(-45deg) translate(-12px, 12px);
    width: 55px;
  }

  &.active span:nth-child(2) {
    transform: translateX(10px);
    opacity: 0;
  }

  &.active span:nth-child(3) {
    transform-origin: center center;
    transform: rotate(45deg) translate(-15px, -14px);
    width: 55px;
  }
}
Enter fullscreen mode Exit fullscreen mode

When the menu-icon is clicked, the active class is added, the 1st and 2nd lines are targeted, and we use the rotate & translate properties to form an X. Also, we hide the 2nd line by moving it using translateX and setting the opacity to 0.

Adding JavaScript

The only thing left is to add a little Js to toggle the active class.

const menuIcon = document.querySelector('.menu-icon');

function toggleMenuIcon() {
  menuIcon.classList.toggle('active')
}

menuIcon.addEventListener('click', toggleMenuIcon);
Enter fullscreen mode Exit fullscreen mode

And there you go. Our own custom-made hamburger menu icon. The final result is below.

Kindly like and leave a comment if you learnt something new.

Discussion (3)

pic
Editor guide
Collapse
ayonbit profile image
Ayon Bit

Thank you for share

Collapse
emmaadesile profile image
Adesile Emmanuel Author

You are welcome Ayon.

Collapse
kungcode profile image
Darren Brooks

Design is beautiful. Thanks for sharing this.