Creating Hamburger navigation bar using HTML and CSS – Part 1

Hamburger navigation bar

Hamburger navigation bar or Hamburger button which commonly acts has a menu bar for a mobile version of the website. Today I’m going to write a tutorial about Hamburger navigation bar, Initially, we can see the three lines and later when 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 acts has 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.

Let’s start creating Hamburger button step by step

  1. First, consider an anchor element with class:nav and inside an anchor element add three div elements with three different classes.
    Hamburger navigation bar
  2. Start styling the anchor element by giving width and making display:block; to make  the div elements occupy the entire width of the anchor element. and transition: all 0.5s;property for a smooth transition.
    .nav{
             width:40px;
             display:block;
             margin:100px auto;
             border:4px solid  #49b293;
             padding:15px;
             transition: all 0.5s;
    }
    
  3. Creating three lines is very simple, just add the required height and margin to div elements and background color.
    .nav div{
             height:4px;
             margin:5px 0px;
             background-color:#fff;
             transition: all 0.5s;
    }
    
    
  4. Whenever the visitor hovers over the anchor element, the border and the three lines of the hamburger button should transform into the rounded border and ‘X‘ shape(close button).
  5. Now By using positive transform: translateY(9px) rotate(45deg); and negative transform: translateY(-10px) rotate(-45deg); degree values for rotate and translateY properties, we can achieve the ‘X’ shape.
    .nav:hover .one{
             transform: translateY(9px) rotate(45deg);
    }
    
    .nav:hover .three{
             transform: translateY(-10px) rotate(-45deg);
    }
    
  6. The main part of the hamburger button is making the second div elements opacity:0;

    .nav:hover .two{
              opacity:0;
    }
    

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.

Author: Rajesh DN

Rajesh Dn is a UI developer at TCS. he likes exploring new technologies and likes hanging with friends and surfing youtube in his spare time.

2 Thoughts

Leave a Reply

Your email address will not be published. Required fields are marked *