Hamburger Icon

#javascript #codenewbie #webdev #html

Demo
Hi guys, in this short tutorial, you're going to learn how to create a Hamburger Icon with HTML,CSS and JavaScript.

The hamburger menu icon can also be referred to as a Three-line menu, a Menu button, or a Hotdog menu. The hamburger icon is very useful for responsive designing or mobile views with smaller screen sizes. The icon which is consisting of three horizontal bars normally. Its function is to toggle a menu or navigation etc.

It is easy to create this hamburger menu icon with only HTML,CSS and JavaScript. OK let's start then.

At first create a index.html page. Today I am going to create a hamburger icon with two horizontal bars but when you've learned this, I hope you'll try making a three-bar hamburger icon.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="style.css" rel="stylesheet"/>
</head>
<body>

    <div class="hum_toggle"  id="hum-toggle" onclick="togglehum()">
       <span></span>
       <span></span>
    </div>

    <script src="main.js" type="text/javascript"></script>
</body>
</html>

In index.html ,I have created two spans tags within an outer div which class name is hum_toggle. The onclick event is used to trigger a function when an element is clicked on. When you click the .hum_toggle div element, togglehum() function will be triggered. The togglehum() function has declared in main.js.

style.css

.hum_toggle
   {
      position: relative;
      width: 50px;
      height: 50px;
      cursor: pointer;
      border: solid black 2px;
      border-radius: 50%;
   }


.hum_toggle span
   {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 60%;
      height: 4px;
      transition: all 300ms ease-in-out;
      border-radius: 5px;
      background: black;
   }


.hum_toggle span:nth-child(1)
   {
      top: 40%;
   }

.hum_toggle span:nth-child(2)
   {
      top: 60%;
   }


.hum_toggle.active span:nth-child(1)
   {
      top: 50%;
      transform: translate(-50%,-50%) rotate(45deg);
   }


.hum_toggle.active span:nth-child(2)
   {
      top: 50%;
      transform: translate(-50%,-50%) rotate(-45deg);
   }

So,let's see how span:nth-child(1) and span:nth-child(2) child selectors are working.

main.js

function togglehum(){
    var hum = document.getElementById('hum-toggle');
    hum.classList.toggle('active');
}

when the togglehum function is triggered, the active class adds to the hum_toggle class.You can check it by using developer tools.
right click on the browser window --> click inspect element --> click on Elements tab

Demo
Hope you will enjoy this article. See you in the next post and don't forget to subscribe my channel😊😊

Top comments (4)

EddieHowe999 • Oct 13

Teams begin on isolated islands, each with a bed that they must defend from enemy attacks. They gather resources like iron and gold to buy items that aid in offense and defense. In bed wars, the objective is to destroy opponents’ beds while keeping your own intact. A destroyed bed prevents respawns, making defense critical. The last team or player with a bed wins, creating an exciting game of skill, strategy, and resource management.