hamburger menu Archives

To create the CSS Hamburger Menu follow the steps below and watch the video tutorial:

Demo:

Step1.

Add HTML

Create the hamburger-menu container, add input checkbox and the vertical menu:

<div class="hamburger-menu">
<div class="menu-toggle">
  <input id="toggle" type="checkbox">
  <label class="toggle" for="toggle"></label>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  
<div class="vertical-menu">
  <a href="#" class="home">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>
</div>
  </div>

Step2.

Add CSS

Set the colour and position of the background and elements:

body {
  margin:0;
  padding:0;
}

Style and the hamburger icon:

.menu-toggle {
  margin:30px;
}

input#toggle {
  display: none;
}

.toggle {
  position: absolute;
  width:35px;
  height: 30px;
  background-color: transparent;
  z-index:5;
  top:8px;
  left:30px;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  position: absolute;
  cursor: pointer;
  width: 35px;
  height: 5px;
  background-color: #001219;
  border-radius:5px;
  transition: 0.4s;
  border-radius:5px;
}
.bar1 {
  top:10px;
}
.bar2 {
  top:20px;
}

.bar3 {
  top:30px;
}

Animate the hamburger icon:

#toggle:checked ~ .bar1 {
  transform: rotate(-45deg) translate(-7px, 7px);
}

#toggle:checked ~ .bar2 {
  opacity:0;
}

#toggle:checked ~ .bar3 {
  transform: rotate(45deg) translate(-8px, -8px);
}

Style the vertical menu:

.vertical-menu {
  width: 300px;
  position: absolute;
  top:0;
  left:0;
  text-align: center;
  z-index:-1;
  visibility: hidden;
  opacity:0;
  transition: opacity .4s;
}

.vertical-menu a {
  background-color: #e9d8a6;
  display: block;
  padding: 12px;
  text-decoration: none;
  font-family: tahoma;
  color: #001219;
}

.vertical-menu a:hover {
  background-color: #005f73;
  color: white;
}

#toggle:checked ~ .vertical-menu {
  visibility: visible;
  opacity:1;
}

a.home {
  background-color: #0a9396;
}

Watch also video tutorial:

Enjoy coding!