Horizontal menu bar

How to create simple horizontal menu bar using HTML and CSS Only

by

Navigation is very much part of any web application. It makes website accessible to users. In this article, you will learn ’How to create a basic horizontal navigation bar’ Following is the step-by-step tutorial for doing so.

Step 1: Create a div inside the body tag which will hold the menu items:

HTML:

<body>
  <div class=” hNavBar”>

  </div>
</body>

CSS:

.hNavBar{
   width:1024px;
   height:45px;
   background-color:#654789;
}

Output:

Step 2: Now create an unordered list inside the div and list items inside ul tag.

<div class="hNavBar">
     <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Services</a></li>
      <li><a href="#">Downloads</a></li>
       <li><a href="#">Contact</a></li>
     </ul>
</div>

Output:

Step 3: Apply CSS to the above list: apply margin and padding to ul list and remove bullets from list items.

ul{
    margin:0;
    padding:0;
    list-style-type:none;
}

Output:

Step 4: Style list items:

li{
   float:left;
   padding-right:10px;
 }

Output:

Step 5: Style anchor tags

li a{
    display:block;
    color:#fff;
    text-align:center;
    padding:8px 10px;
    text-decoration:none;
   }

Output:

Step 6: Apply hover effect on list items.

li a:hover{
     background-color:#666;
 }

Output:

Final Html:

Html:

<div class="hNavBar">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>

CSS:

<style>
   .hNavBar{
   width:512px;
   height:45px;
   background-color:#000;
}
ul{
    margin:0;
            padding:0;
            list-style-type:none;
}
li{
    float:left;
    padding-right:10px;
   }

li a{
    display:block;
            color:#fff;
            text-align:center;
            padding:13px 10px;
            text-decoration:none; //remove underline
   }
   li a:hover{
    background-color:#666;
   }
 </style>

Final Result:

Please comment if you find anything incorrect, or you want to improve the topic discussed above.

Related posts:

How to make Simple Website Loader using HTML and CSS

Leave a comment