Horizontal Navigation Bar

Horizontal Navigation Bar is one of the most used navigation bars. Following few basic points, its very easy to build horizontal navigation bar. 

Step 1:
First Create a Un-order list of  navigation links.

Sample Code :    

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Gallery</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">About</a></li>

</ul>

The Above Code looks like :

• Home
• Gallery
• Contact
• About Us

Step 2:

Edit the list-style type and text-decoration of links. Changing list-style-type  of li to none removes the black dots. Changing the text-decoration of links to none removes the under line below the links.

Sample Code :

ul

{

list-style-type:none;

}

a 

{

text-decoration:none;

color:red;//Use color of your choice

}

Adding the above style to the HTML code in step one will look like :

Home

Gallery

Contact 

About Us

Step 3:

Now aligning them horizontally. We can do this in many methods. Two most commonly used methods are explained below

Method 1: Assign float left to all 'li' elements                    [li{float:left;}]

Method 2: Assign display:inline to all "li" elements         [ li{display:inline}]

Adding this code will look like :

Home  Gallery  Contact  About Us

Step 4: (Creating tabs)

Change the padding and margin of li elements to 0px (Zero) because when we click anywhere on the tab, it should respond. If we dont set the padding and margin to 0px, only the text element responds when clicked not the complete tab. Add background color, padding ,margin  to 'a' (Link) element according to your requirement. You are good to go.