Home / Website Designing / HTML / How to Create Horizontal Navigation Bar in HTML

How to Create Horizontal Navigation Bar in HTML

In this Tutorial, Your are going to learn about HTML Horizontal navigation bar. I will show you how to code for horizontal navigation bar in HTML and which CSS properties will be used to make them feel like a navigation bar.

As you can see here this is the Horizontal Navigation Bar Example which is used by most of the fixed layout websites.

horizontal navigation bar

 

Horizontal navigation bar HTML Code for Above Image

<nav id="nav_menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tickets.html">Get Tickets</a></li>
<li><a href="members.html" class="current">Become a Member</a></li>
<li><a href="about_us.html" class="lastitem">About Us</a></li>
</ul>
</nav>

First Horizontal Navigation Bar CSS Code for Above Example

#nav_menu ul {
list-style-type: none;
padding: 1em 0;
text-align: center;
border-top: 2px solid black;
border-bottom: 2px solid back;
}
#nav_menu ul li {
display: inline;
padding: 0 1.5em;
}
#nav_menu ul li a {
font-weight: bold;
color: blue;
}
#nav_menu ul li a.current {
text-decoration: none;
}

Second Horizontal Navigation Bar CSS Code for Above Example

#nav_menu ul {
list-style-type: none;
}
#nav_menu ul li {
float: left;
}
#nav_menu ul li a {
text-align: center;
display: block;
width: 175px;
padding: 1em 0;
text-decoration: none;
background-color: blue;
color: white;
font-weight: bold;
border-right: 2px solid white;
}
#nav_menu ul li a.lastitem{
border-right: none;
}
#nav_menu ul li a.current {
color: yellow;
}

Short Details of above code

  • You can code a horizontal navigation menu using a unordered list. You can do that by displaying the li elements inline or by floating the li elements.

If you want to learn HTML and CSS from start as a beginner you can start learning from our video course of Website Designing.

Another Different way to Create Horizontal Navigation Bar in HTML

This is the other way of creating vertical navigation In which I show you a live video lecture here.

Share With Your Friends Plz
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

About Imran Syed

Mr. Imran Syed is a Software Engineer. Who is working in this field from last 4 years, working with many companies on website designing, website development, e-commerce platform, software development, applications development and many other e-training platform under the owning software house i.e: czone-star. He recently started working as blogger and YouTuber from last 1 Year. To educate more people with his experience and skills.

Check Also

How to Create Creative Resume Design in Ms Word Tips

How to Create Creative Resume Design in Ms Word Tips

How to Create Creative Resume Design in Ms. Word Tips: Hello, Friends as you know …

One comment

  1. Thanks For sharing. Its look there are new & very Important Artical Here.
    This blog help me very Much. Thanks again.
    Go Ahead, we are always with You. and Share More & More Updates Like This.

Leave a Reply

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

7 + 6 =