Simple Horizontal Navigation Bar

Navigation bars are present in almost all sites. Here's how one can create a simple navigation bar. You can use this idea to develop more fantastic navigation bars. There are many approaches for creating navigation bars but lets just stick to the basics first.

Demo

This is how our final navigation bar will look. It can be customized for more functionality in future.



Concepts

Check out the structure that I used. I used ul tags to begin with. ul and li tags are block level elements and are having some margin and padding by default. So first we need to remove it. Thats what I did in class 'holder'. I removed margin and padding and make it zero.

Then I added class 'mymenu' to anchor tags. I want to customize anchor tags that are inside li tags. I need to change its background color, give it a border and assign it some width. Since anchor tag is inline element, I need to make it block element or give it some float value. For creating navigation bar float property comes in handy. It not just help me to give anchor tags some width but also floats all anchor tags side by side.

If you are not sure about any CSS property then go through CSS tutorial first on this site.

Code

Finally here's all the code that you need. Save both files in the same folder. File names have been written above the code.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Simple Horizontal Navigation Bar</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Navigation Bar - Syntax Page</h1>
<ul class="holder">
<li><a href="#" class="mymenu">Home</a></li>
<li><a href="#" class="mymenu">About Us</a></li>
<li><a href="#" class="mymenu">Contact Us</a></li>
</ul>
</body>
</html>

style.css

.holder
{
	margin:0;
	padding:0;
	list-style-type:none;
}
.mymenu
{
	background:#ff0000;
        border:2px outset #ff0000;
	color:#fff;
	float:left;
	padding:10px;
	text-align:center;
	text-decoration:none;
	width:189px;
}
a.mymenu:hover
{
	background:#0000ff;
        border:2px inset #0000ff;
}