How to Create Horizontal Navigation Bar in HTML

In this Tutorial, Your are going to learn about HTML5 Horizontal navigation bar. I will show you how to code for navigation bar in HTML5. Also, we will use CSS properties to show proper Horizontal Navigation bar.

As In this picture below you can see the Horizontal Navigation Bar Picture Example. Most of the old websites using fixed layout navigation bar. This is also the fixed layout Navigation bar using HTML5 and CSS3 code.

HTML Code for Horizontal Navigation bar

<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>

In the above HTML Code, you can see. We used unordered list of tags <ul></ul> with the list of items <li></li>.
Which are the child items of the unordered list? And we also use <nav></nav> tag in our HTML code. Which is also
the important part of creating a navigation bar. <nav> tag basically is predefine HTML5 built-in code for creating navigation bar. Either it’s horizontal bar or vertical navigation bar.

Horizontal Navigation Bar CSS Code for Above Example 1:

#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;
}

Horizontal Navigation Bar CSS Code for Above Example 2

#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 an 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.

An advantage of using fixed with Navigation Bar

The most of the main advantage of using fixed layout is backend support because there is the most common law on the development side. Whenever the new technology is released there is always the support for backend codes. So if you are using the fixed layout code which is the old techniques can be work on all the browsers neither it’s an old version of internet explorer or the new version of any latest browser your code will definitely work.

Another advantage is when you are working on fixed layout application the horizontal navigation bar will be useful for your application.

Another Different way to Create Navigation Bar in HTML

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

Read Also:

Article on vertical Navigation bar clicks here for complete details.