Creating Hamburger navigation bar using HTML and CSS – Part 1

Hamburger navigation bar or Hamburger button which commonly acts has a menu bar for a mobile version of the website. In this article we are going to dig about Hamburger navigation bar, Initially, we can see the three lines and later whenever the visitor hovers over the three lines it turns into the ‘X‘ shape(close button).

Hamburger navigation bar is very useful in a mobile version of the websites, which act as an alternative menu for a mobile version and the interface of Hamburger navigation bar will be great which avoids messy navigation bar in a mobile version.

Check out the youtube video on Simple Hamburger button toggle effect

HTML Structure

Consider a div element with class:wrapper and inside that div element, consider the div element with class:navbar. and inside that div, consider the three child div elements with different classes.

<div class="wrapper">
  <div class="navbar">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
  </div>
</div>

CSS Structure

1. Let’s style the wrapper div in such a way that, it should always be at the center of the browser. by setting its position value to absolute, top and left values to 50% and by using translate method of transform property, place the wrapper div exactly in the center of the browser.

   .wrapper{
           position: absolute;
           top: 50%;
           left: 50%;
           width: 550px;
           transform: translate(-50%,-50%);
   }
   

2. Style the navbar div, by setting its width and height values to 100px and position value to relative and set the border value and use the transition property for the smooth transition effect.

   .navbar{
           width: 100px;
           height: 100px;
           position: relative;
           border: 5px solid #49b293;
           cursor: pointer;
           transition: all 0.3s ease;
   }
   

3. Now style the three child div elements inside the navbar div, by setting width, height and background values and set its position value to absolute.

   .navbar div{
           height: 8px;
           width: 60px;
           background-color: #fff;
           position: absolute;
           transition: all 0.5s ease;
   }
   

4. Now place the three child div elements accordingly.

   .navbar .first{
           top: 25px;
           left: 20px;
   }
   
   .navbar .second{
           top: 45px;
           left: 20px;
   }
   
   .navbar .third{
           top: 65px;
           left: 20px;
   }
   

Hover effect

Whenever we hover over the navbar div, first and third child div elements should form the ‘X‘ shape and second div elements opacity values becomes 0 and the border value of the navbar div becomes 50%

.navbar:hover .first {
        transform: translateY(20px) rotate(45deg);
        transition: all 0.5s ease;
}

.navbar:hover .second {
        opacity: 0;
        transition: all 0.2s ease;
}

.navbar:hover .third{
        transform: translateY(-20px) rotate(-45deg);
        transition: all 0.5s ease;
}

.navbar:hover{
        border-radius:50%;
        transition: all 0.3s ease;  
}

check out the Demo of the Hamburger navigation bar

See the Pen Hamburger button by rajeshdn (@cool_lazyboy) on CodePen.0

Final notes…
This is the part-1, In which I’ve shown you guys, how to create the simple Hamburger button by using HTML and CSS.  and In my next article(part-2),  I’m going to show you guys how to create the different kinds of Hamburger buttons.