Simple Horizontal Navigation Bar

-
Unknown

Simple Horizontal Bar is one of the commonly used Navigation system in designing website field. It is found normally on most of sites which I have browsed yet in my whole life. Although it looks nice, but it is very easy to prepare it. You just need to know some HTML and CSS basic knowledge. It depends upon UL HTML tag and some simply coded CSS Properties. First have a CSS horizontal bar.


In above picture its nor car that is bar but Home, Top Rated and Recommended is horizontal bar.

<div class="nav">
<ul>
<li>HOME</li>
<li>TOP RATED</li>
<li>RECOMMENDED</li>
</ul>
</div>

Now its time to have miracle means time to add classes or you can say css


.nav {height:40px;}
.nav ul {margin:0px; list-style-type:none; height:40px;}
.nav ul li {display:inline; float:left;}
.nav ul li a {padding:7px 14px;}

Rest of adding background and color properties, you can do yourself. Just try and have a look in your own browser.

Leave a Reply