Hamburger Menu
Hamburger Menu

A Hamburger Menu is the button in a website and app that typically opens up into a side menu or navigation drawer. A hamburger menu takes less space than a traditional menu. Its function is to toggle a menu or navigation bar between being collapsed behind the button or displayed on the screen.

Our Design: Our hamburger menu has basic animations. When a user clicks on the hamburger menu it slides from the left to show the navigation links. and changes the hamburger menu three lines to a cross. the user hovers on the link they slide to right with a color change of light red.
When the user clicks on the cross it slides to the right to hide.

Let’s implement our design!

Table of Contents

Hamburger Menu in CSS

To create our hamburger menu we need to create two files called index.html and style.css.

index.html

Start writing the code inside the body element. First of all create a <nav> and </nav> tag. then create a div with id “menuToggle” inside the nav tags.

<nav>
    <div id="menuToggle">
     
    </div>
</nav>


Create an input with a type of checkbox. and also create three span tags, we will use these tags as our burger menu icon.

<nav>
    <div id="menuToggle">
      <input type="checkbox" />
      <span></span>
      <span></span>
      <span></span>
      
    </div>
</nav>


After the span tags create an unordered list for our menu items and create <a> anchor tag and list item inside the anchor tag.

<nav>
    <div id="menuToggle">
      <input type="checkbox" />
      <span></span>
      <span></span>
      <span></span>
      
      <ul id="menu">
        <a href="#"><li>Home</li></a>
        <a href="#"><li>About</li></a>
        <a href="#"><li>Info</li></a>
        <a href="#"><li>Contact</li></a>
      </ul>
    </div>
</nav>

here is our navbar is done. let’s write a simple script code to get the screen height and apply it to our menu height.

<body>
  <nav>
    <div id="menuToggle">
      <input type="checkbox" />
      <span></span>
      <span></span>
      <span></span>
      
      <ul id="menu">
        <a href="#"><li>Home</li></a>
        <a href="#"><li>About</li></a>
        <a href="#"><li>Info</li></a>
        <a href="#"><li>Contact</li></a>
      </ul>
    </div>
  </nav>

  <script>
    let height = window.innerHeight;
    document.getElementById("menu").style.height = height + "px";
  </script>
</body>


in the script tag, let is used to declare a variable, height is the name of our variable. The window.innerHeight is used to get the height of the screen. It returns the pixel value.
In the second line document.getElementById(“menu”), The Document method getElementById() returns an Element object representing the element whose id property matches the specified string.
we can style an HTML element using JavaScript, first select the tag
document.getElementById(“menu”)
then use dot (.) to add a property document.getElementById(“menu”).style.height the use equal (=) to set the value.

document.getElementById("menu").style.height = height + "px";

style.css

As we always do, first we will create variables:

:root{
  --hamburgerColor: #000000;
  --activeHamburgerColor: #ff0000;
  --linkColor: #232323;
  --hoverLinkColor: tomato;
  --menuBgColor: #ededed;
  --textColor: black;
}


Now write the code for the body:

body
{
  margin: 0;
  padding: 0;  
  background: white;
  color: var(--textColor);
  font-family: "Arial", sans-serif;
  overflow: hidden;
}


here we are using text color value as our variable “–textColor”, font-family is set to Arial and the overflow:hidden, it will hide our scroll bars (both horizontal and vertical).

#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;  
  z-index: 1;  
}

in this code, we aligned our hamburger menu icon and the navigation links.

#menuToggle a
{
  text-decoration: none;
  color: var(--linkColor);  
  transition-delay: 0.4s;
}

#menuToggle a:hover
{
  color: var(--hoverLinkColor);
}


first, we removed the underline of the anchor tag using text-decoration:none; the property.
then color is set to our variable value ‘–linkColor’ and transition-delay: 0.4s; is used to delay the color changing when the user hovers the link.
In the next #menuToggle a:hover we are changing the link color on hover with color property and a variable as a value ‘–hoverLinkColor’.

#menuToggle input
{
  display: block;
  width: 40px;
  height: 34px;
  position: absolute;
  top: -7px;
  left: -8px;  
  cursor: pointer;  
  opacity: 0;
  z-index: 2;   
}


As we are using a toggle effect so we are using a checkbox, here we set the opacity to 0, it will hide the element. cursor: pointer; is used to show a hand when we hover the element.

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;  
  background: var(--hamburgerColor);
  border-radius: 3px;  
  z-index: 1;  
  transform-origin: 4px 0px;  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}


In this part we are designing our hamburger menu icon.

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}


it’s our default position of the hamburger menu icon.

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: var(--linkColor);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}


When a user clicks on the menu icon, we will rotate the menu to make the cross, we are rotating both the top and bottom in the opposite direction of 45 degrees.

#menuToggle input:checked ~ span:nth-last-child(3)
{
  animation: moveFromPosition 0.4s forwards;
}

@keyframes moveFromPosition{
  0%{
    transform: translateX(0px);
  }
  30%{
    transform: translateX(-40px);
  }
  60%{
    transform:translate(-10px, -15px) rotate(90deg);
  }
  100%{
    transform: translate(-10px, -100px) rotate(90deg);
  }
}


When the user clicks the menu icon, we are making it a cross but we doesn’t need the centered span tag so here we are removing it using simple animation.

#menuToggle input ~ span:nth-last-child(3)
{
  animation: backToPosition 0.4s forwards;
}

@keyframes backToPosition{
  100%{
    transform: translateX(0px);
  }
  70%{
    transform: translateX(-40px);
  }
  30%{
    transform:translate(-10px, -15px) rotate(90deg);
  }
  0%{
    transform: translate(-10px, -100px) rotate(90deg);
  }
}

When the user clicks on the cross icon we need to make it again a hamburger menu so here we are again showing the centered span tag to create a menu, we are only reversing the animation to make it visible.

#menu{
  position: absolute;
  margin: -100px 0 0 -50px;
  width: 150px;
  padding: 50px;
  padding-top: 125px;  
  background: var(--menuBgColor);
  list-style-type: none; 
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.5);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}


This code is used to create the menu item list.

#menuToggle input:checked ~ ul
{
  transform: none;
}


when the user clicks on the menu icon, here we are setting the transform:none; Defines that there should be no transformation.

#menuToggle:hover > span{
  background-color: var(--activeHamburgerColor);
  transition-duration: 0.5s;
}


This code defines that, when the mouse is hovered on the icon it should change its color with a time duration of 0.5s.

#menu li:hover{
  padding-left: 25px;
  transition-duration: 0.5s;
}

#menu li:not(:hover){
  transition-duration: 0.5s;
}


The first property is used to show that, when the mouse hovers on the list item, the item should move 25px left from its original position.
and the second property shows that, when the mouse is removed from the list item, the item should move to its original position within 0.5s.

Live Preiew

<!DOCTYPE html>
<html>
<head>
  <title>Hamburger Menu</title>
  <style>
    :root{
      --hamburgerColor: #000000;
      --activeHamburgerColor: #ff0000;
      --linkColor: #232323;
      --hoverLinkColor: tomato;
      --menuBgColor: #ededed;
      --textColor: black;
    }
    body
    {
      margin: 0;
      padding: 0;  
      background: white;
      color: var(--textColor);
      font-family: "Arial", sans-serif;
      overflow: hidden;
    }

    #menuToggle
    {
      display: block;
      position: relative;
      top: 50px;
      left: 50px;  
      z-index: 1;  
    }

    #menuToggle a
    {
      text-decoration: none;
      color: var(--linkColor);  
      transition-delay: 0.4s;
    }

    #menuToggle a:hover
    {
      color: var(--hoverLinkColor);
    }

    #menuToggle input
    {
      display: block;
      width: 40px;
      height: 34px;
      position: absolute;
      top: -7px;
      left: -8px;  
      cursor: pointer;  
      opacity: 0;
      z-index: 2;   
    }

    #menuToggle span
    {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;  
      background: var(--hamburgerColor);
      border-radius: 3px;  
      z-index: 1;  
      transform-origin: 4px 0px;  
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }

    #menuToggle span:first-child
    {
      transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2)
    {
      transform-origin: 0% 100%;
    }

    #menuToggle input:checked ~ span
    {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: var(--linkColor);
    }

    #menuToggle input:checked ~ span:nth-last-child(2)
    {
      transform: rotate(-45deg) translate(0, -1px);
    }

    #menuToggle input:checked ~ span:nth-last-child(3)
    {
      animation: moveFromPosition 0.4s forwards;
    }

    @keyframes moveFromPosition{
      0%{
        transform: translateX(0px);
      }
      30%{
        transform: translateX(-40px);
      }
      60%{
        transform:translate(-10px, -15px) rotate(90deg);
      }
      100%{
        transform: translate(-10px, -100px) rotate(90deg);
      }
    }

    #menuToggle input ~ span:nth-last-child(3)
    {
      animation: backToPosition 0.4s forwards;
    }

    @keyframes backToPosition{
      100%{
        transform: translateX(0px);
      }
      70%{
        transform: translateX(-40px);
      }
      30%{
        transform:translate(-10px, -15px) rotate(90deg);
      }
      0%{
        transform: translate(-10px, -100px) rotate(90deg);
      }
    }

    #menu{
      position: absolute;
      margin: -100px 0 0 -50px;
      width: 150px;
      padding: 50px;
      padding-top: 125px;  
      background: var(--menuBgColor);
      list-style-type: none; 
      transform-origin: 0% 0%;
      transform: translate(-100%, 0);  
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
      box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.5);
    }

    #menu li
    {
      padding: 10px 0;
      font-size: 22px;
    }

    #menuToggle input:checked ~ ul
    {
      transform: none;
    }

    #menuToggle:hover > span{
      background-color: var(--activeHamburgerColor);
      transition-duration: 0.5s;
    }
    #menu li:hover{
      padding-left: 25px;
      transition-duration: 0.5s;
    }

    #menu li:not(:hover){
      transition-duration: 0.5s;
    }
  </style>
</head>
<body>
  <nav>
    <div id="menuToggle">
      <input type="checkbox" />
      <span></span>
      <span></span>
      <span></span>
      
      <ul id="menu">
        <a href="#"><li>Home</li></a>
        <a href="#"><li>About</li></a>
        <a href="#"><li>Info</li></a>
        <a href="#"><li>Contact</li></a>
      </ul>
    </div>
  </nav>

  <script>
    let height = window.innerHeight;
    document.getElementById("menu").style.height = height + "px";
  </script>
</body>
</html>

If you are having any issues with the code, then you can visit our GitHub Account. Click Here!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply