Easy hamburger menu with JS - Beginners
Tags: javascript, codenewbie, css, tutorial
Published: 2020-07-26 10:56:06

A hamburger menu is a classic UI feature present in countless websites. It's used to show and hide a menu on click, especially used in mobile design. 

In this tutorial, we'll learn to create a hamburger menu with HTML, CSS and Javascript.

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11z26o40wnm6qa7vd35x.gif)

Here's the HTML:

```html
<head>
  <!-- Material Icon CDN -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <ul class="menu">
    <li><a class="menuItem" href="#">Home</a></li>
    <li><a class="menuItem" href="#">Profile</a></li>
    <li><a class="menuItem" href="#">About</a></li>
    <li><a class="menuItem" href="#">Contacts</a></li>
  </ul>
  <button class="hamburger">
    <!-- material icons https://material.io/resources/icons/ -->
    <i class="menuIcon material-icons">menu</i>
    <i class="closeIcon material-icons">close</i>
  </button>
</body>
```

Begin by adding a basic menu with a class of `menu` and menu links with a class of `menuItem`.

Then add a button with a class of `hamburger` and both a *menu* and a *close* icons inside of it. Later on we will hide the *close* icon by default with CSS and alternate which icon to show with Javascript.

You can use any icons family you want. I've used [material icons](https://material.io/resources/icons/) by loading their CDN in the head and adding the *menu* and *close* icons inside of the button.

The `menuIcon` and `closeIcon` classes are used to reference the icons in CSS and Javascript later on.

Now let's add some CSS.

Add to the button `position: fixed;` so scrolling won't affect it. And `z-index:100;` to make sure it stays above every other element. 

Add `top` and `right` with a value of `1rem` to place it at the top-right corner of the screen.

```css
.hamburger {
  position: fixed;
  z-index: 100;
  top: 1rem;
  right: 1rem;
  padding: 4px;
  border: black solid 1px;
  background: white;
  cursor: pointer;
}
```

To hide the *close* icon by default, add `display: none;` to the `closeIcon` class.

``` css
.closeIcon {
  display: none;
}
```

In the menu class, add `position: fixed;` so it can't be scrolled away. 

Set the `top`, `right`, `bottom` and `left` to 0 to make the menu cover the whole screen.

```css
.menu {
  position: fixed;
  transform: translateY(-100%);
  transition: transform 0.2s;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: black;
  color: white;
  list-style: none;
  padding-top: 4rem;
}
```

- `transform: translateY(-100%);` is used to hide the menu by default above the screen.

- `transition: transform 0.2s;` is optional. It is used to animate the change in translation value to create a slide up/down effect.

By resetting *translateY* to 0, the menu will slide down and cover the whole screen.

Add it in a `showMenu` class:
```css
.showMenu {
  transform: translateY(0);
}
```

This class will be added and removed from the menu with Javascript to show and hide the menu.

Here's the Javascript for toggling the menu:

``` javascript
const menu = document.querySelector(".menu");
const menuItems = document.querySelectorAll(".menuItem");
const hamburger= document.querySelector(".hamburger");
const closeIcon= document.querySelector(".closeIcon");
const menuIcon = document.querySelector(".menuIcon");

function toggleMenu() {
  if (menu.classList.contains("showMenu")) {
    menu.classList.remove("showMenu");
    closeIcon.style.display = "none";
    menuIcon.style.display = "block";
  } else {
    menu.classList.add("showMenu");
    closeIcon.style.display = "block";
    menuIcon.style.display = "none";
  }
}

hamburger.addEventListener("click", toggleMenu);
```

Clicking on the hamburger button will call `toggleMenu()`.

It checks if the menu contains the class `showMenu`.

If the menu **contains** the `showMenu` class, we **remove** it to hide the menu. We also toggle the `display` to hide the *close* icon and show the *menu* icon.

If the menu doesn't have the `showMenu` class, we **add** it, show the *close* icon and hide the *menu* icon.

The hardest part is over! All that's left is to hide the menu when the user click on the links.

In the Javascript above, we got all the menu items with `querySelectorAll`.

``` javascript
const menuItems = document.querySelectorAll(".menuItem");
```

With `forEach`, we can iterate through each link and add a call to `toggleMenu()`. 

`toggleMenu()` will in turn hide the menu (because if the user can click on the menu items it means that the menu is showing).

``` javascript
menuItems.forEach( 
  function(menuItem) { 
    menuItem.addEventListener("click", toggleMenu);
  }
)
```

### And that's it!

{% codepen https://codepen.io/ljc-dev/pen/MWoRayy %}

### Thanks for reading 😄!!

(2nd rewrite 01/10/21)
I hope you've found it useful and happy coding 👨‍💻!