How to make horizontal menubar


Hey guys before our video tutorial here's our tutorial for you on Horizontal Menu-bars. Video tutorial on this topic will be available in two language one in Hindi and the other one in English, So make sure to watch them link will be available soon once we upload. So let us get on our tutorial.

What is navigation bar or menubar?

Menubar aka navigation bars are just list of links which helps website's user to navigate between main pages of website. Navigation bars will surely use HTML as base and using <ul> , <li> and  <li>   make prefect sense we will also be using a bit of CSS to make our bar look beautiful. 

HTML Markup

<ul>
<li><a href="#" class='active'>Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 4</a></li>
 </ul>

Let's check out what we've made.

Its as ugly as a toad. So lets make it pretty. First of all we have to remove all default styling so lets go with CSS.




CSS

ul{
list-style:none; /*will remove bullet*/
margin:0;/* removes default margin*/
padding:0;/* removes default padding*/
}
ul li{
float:left;/*will get all links in a line */
}
ul:after{/* will make ul to increase height automatically by clearing float*/
content:"";
clear:both;
display:block;
}

Let's check the output again

Its still ugly but now it seems like a menu bar. So let us go and do some more styling.

CSS

ul{
background:#333;/*Adding background will give a solid feel to menu bar*/ 
}
li a{
display:block;/* Will make whole area clickable including padding and border instead of just text*/
padding:15px;/*Will increase size. Setting width and height is also helpful but not recommended*/
color:#fff;
border-right:1px solid #111;
float:left;
text-decoration:none;/*removes underline from link*/
}

Let's check the output again

Look awesome now lets do some optional styling like adding hover and active classes.

CSS

li a:hover:not(.active){/* Change the link color on hover but color of active link will not change on hover */
background:orange;
}
/*lets add a class to tell on which page he/she is on*/
.active{
background:#4CAF50;
}

Its ready




Its looking beautiful.Green one is active link while orange one is the link that is currently hovered. And here's the complete code.

Full Source

HTML

<ul>
<li><a href="#" class='active'>Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 4</a></li>
 </ul>

CSS

ul{
list-style:none;
margin:0;
padding:0;
background:#333;
}
ul li{
float:left;
}
ul:after{
content:"";
clear:both;
display:block;
}
li a{
display:block;
padding:15px;
color:#fff;
border-right:1px solid #111;
float:left;
text-decoration:none;
}
li a:hover:not(.active){
background:orange;
}
.active{
background:#4CAF50;
}