Three Line navigation bar using HTML and CSS

Here I’m with Three line navigation bar tutorial, which is created by using pure HTML and CSS. Today I’m going to show you guys how to create the vertical and horizontal three line navigation bar.

Creating the three-line navigation bar is very simple, whenever mouse is hovered over the three-line nav bar we can see the animation effect.

Steps to create a Horizontal three line navigation bar

1. First consider a anchor element with class:navbar and inside an anchor element add three div elements with three different classes.
   
2. Start styling the anchor element by giving width and making display:block; to make the div elements occupy the entire width of anchor element. and transition: all 0.5s;property for smooth transition.

   .navbar {
             width: 60px;
             display: block;
             margin: 50px auto;
             border: 4px solid #00bfb6;
             padding: 8px 10px;
             transition: all 0.5s;
            -webkit-transition: all 0.5s;
   }
   

3. Creating the three lines is very simple, just add the required height and margin to div elements and background color.

   .navbar div{
            height: 5px;
            background: #fff;
            margin: 7px 0px 7px 0px;
            border-radius: 25px;
            transition: all 0.5s;
           -webkit-transition: all 0.5s;
   }
   

4. Now modify the width of the second and three div elements, so that whenever the mouse pointer is hovered over the navbar. we can see the animation effect.

   .two { width: 35px; }
   .three { width: 50px;}
   .navbar:hover div { width: 60px;}
   

Steps to create a vertical three line navigation bar

1. Onlything we have to do in vertical three line navigation bar is by giving more height and less width and aligning div elements(all three div elements) to left by using float:left; property.

   .v-navbar div {width: 5px;height: 60px;}
   .v-one, .v-two, .v-three {float: left;}
   

Check out the Demo tutorial of three line navigation bar

See the Pen threeline nav bar by rajeshdn (@cool_lazyboy) on CodePen.0

• Author
• Recent Posts

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.

Latest posts by Rajesh DN (see all)

• CSS Speech bubbles - July 20, 2020
• Simple Button Hover effect – Border Hover effect - October 9, 2017
• Glowing Social icons hover effect - September 11, 2017