Hamburger Icon
Tags: html, webdev, codenewbie, css
Published: 2021-06-05 17:04:35

[Demo](https://youtu.be/YURgKce25Ig)
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`
```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`
```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);
   }


```


![circle css](https://community.codenewbie.org/remoteimages/uploads/articles/xg821apxfzpgxbhc6bpf.png)

***

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

![span tag css](https://community.codenewbie.org/remoteimages/uploads/articles/fur4zwbi435i4o79utzq.png)




`main.js`
```javascript
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

![child elements](https://community.codenewbie.org/remoteimages/uploads/articles/uhi1op3v806xxeppb9eh.PNG)


![final css](https://community.codenewbie.org/remoteimages/uploads/articles/razp1t56jaa27tdzw8od.png)


[Demo](https://youtu.be/YURgKce25Ig)
Hope you will enjoy this article. See you in the next post and don't forget to subscribe my channel😊😊