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.
7 Replies to “How to Create Horizontal Navigation Bar in HTML”
Hello to every single one, it’s in fact a fastidious for me
to go to see this site, it includes helpful Information.
I needed to thank you for this excellent read!! I certainly enjoyed
every bit of it. I have got you bookmarked to check out new things you
post…
Helpful info. Lucky me I discovered your website accidentally, and I’m surprised why this coincidence did not took place in advance! I bookmarked it.
I like what you guys are up also. Such intelligent work and reporting! Carry on the excellent works guys I have incorporated you guys to my blogroll. I think it’ll improve the value of my site 🙂
Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You clearly know what youre talking about, why waste your intelligence on just posting videos to your weblog when you could be giving us something enlightening to read?
I truly enjoy looking through on this web site , it holds superb content .
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.