How TO - Menu Icon

Learn how to create a menu icon with CSS.

---

How To Create a Menu Icon

If you are not using an icon library, you can create a basic menu icon with CSS:

Menu Icon:                                                                                                              

Try it Yourself »                                                                                                  

Animated Menu Icon (click on it):                                                                              

Try it Yourself »                                                                                                  

---

Step 1) Add HTML:

Example

<div></div>
<div></div>
<div></div>

Step 2) Add CSS:

Example

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

Try it Yourself »

Example Explained

The width and the height property specifies the width and height of each bar.

We have added a black background-color, and the top and bottom margin is used to create some distance between each bar.

---

---

Animated Icon

Use CSS and JavaScript to change the menu icon to a "cancel/remove" icon when it is clicked on:

Step 1) Add HTML:

Example

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Step 2) Add CSS:

Example

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

Step 3) Add JavaScript:

Example

function myFunction(x) {
  x.classList.toggle("change");
}

Try it Yourself »