How To Create Simple Horizontal Navigation Bar From CSS

Though there are lots of tutorial about Horizontal listings, I founds lots of beginners having problem in understanding the mess of extra CSS codes added in it. There are several methods to achieve horizontal navigations.

One of them can be simply achieved by placing the sequence of links in a single line and styling it with CSS. Let’s see how to do this.

First of all, lets create a simple links arranged in a same horizontal line.

<A HREF=”#”>Home</A>
<A HREF=”#”>About us</A>
<A HREF=”#”>Portfolio</A>
<A HREF=”#”>Contact us</A>


Now when you save and load it in browser, it will look similar to the image below:

If you are satisfied with just these links in single line, then it is ok you can end the tutorial right here. Else if you want the horizontal navigation links like in Hackspc.com, you’ll have to follow up to the end of this tutorial.

We cannot easily create background effect in <A> without using CSS. So, we’ll need to style it with proper CSS.

Now let’s apply some CSS to the link. But before applying any CSS to the <A> tag, you must note that it must be specific to the horizontal links only. Otherwise, your other content links will also look same as the navigation links. So, let’s make it unique by keeping it inside a div with id menu.

<DIV ID=”MENU”>
<A HREF=”#”>Home</A>
<A HREF=”#”>About us</A>
<A HREF=”#”>Portfolio</A>
<A HREF=”#”>Contact us</A>
</DIV>

Now we’ll define the compound CSS to <A> so that the CSS style only applies to the link inside the MENU id.

Here is the simple CSS:

#MENU A {
Display:block;
Float:left;
Padding: 0 10px;
Background:#CCCCCC;
}

Now the above CSS will be applied to all the <a> tags inside <div id=”menu”>.  By default, <A> tag is a inline tag that doesn’t makes extra spaces, in simple terms it is an object without a box. While blocks are the one which contains four sides, in simple terms it is an object inside a box.

Since, <A> is not a block, we’ll have to manually make it block, this can be done by using display:block; property.  Generally, block occupies full width that they can reach up to. So, whenever we create block, it takes whole width. Look at the image below.

In the above image, you can see that how blocks behaved by occupying the full width. Since, it appeared in different lines, it is not according to our interest. We want all these to appear in same line.

We’ll use CSS floats to appear it in same line. We’ll float these blocks to left. And this is what we have after applying floats.

You can see that, though it appeared in single line this time, it is not what we wanted. The clumsy appearance of the navigation links in the above image looks like it is the single image. We won’t press SPACE key to give some white space here. We’ll be using padding to left and right side to give a little bit space to it.

Let’s set padding of 10 pixels on both sides,

Padding: 0 10px;

We’ll get following results after padding.

Whoa! Finally it appeared in same line. But you might not find any good remarkable difference here with the first image of this tutorial.

At least, we’ve kept it in a box we can apply any CSS effect to it.

Let’s play with the background and border, remove underline and change link color to white,

background:#ccc;
border-left:1px solid #000;
text-decoration:none;
color:#fff;

This will be the result:

Now let’s apply some hover effect to it. To do so, we again have to specify the compound CSS to the links and add pseudo class, :hover to it.

#MENU A:hover {
Background:#00CCFF;
}

Simply we changed the background color to hex value #00CCFF. Now whenever the mouse is hovered the link box will be highlighted with a color.

The final CSS will look like this:

.MENU A  {
display:block;
float:left;
padding:0 20px;
background:#ccc;
border-right:1px solid #000;
text-decoration:none;
color:#fff;
}
.MENU A:hover  {
background:#0CF;
}


In next tutorial, we’ll see how we can use this method to lists. Till then stay tuned and bookmark us.

Visit Our YouTube site