Horizontal menu bar

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

by

Creating a simple horizontal menu bar using only HTML and CSS is a fundamental skill for web developers. A well-structured menu bar enhances the user experience, providing clear navigation for your website visitors. In this guide, we’ll walk you through the process of building a sleek, responsive horizontal navigation bar without the need for JavaScript or external libraries. Whether you’re a beginner or looking to refine your front-end skills, this tutorial will help you design a clean and functional menu bar that adapts seamlessly to different screen sizes.

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 Add Datepicker in Form: A Complete Guide
How to Create Digital Clock Using HTML, CSS, and JavaScript
Floating Labels using CSS Only

Leave a comment