Hamburger Icon

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

14

Categories:

Css

Tags:

HtmlWebdevCodenewbieCss