TweetFacebookShareThis

Horizontal Navigation Bar

Previous Page    Next Page

Here we will be creating a horizontal navigation bar the HTML is the same as in the vertical navigation an unordered list as been created in between div tags which as been given the ID of navigation with anchor tags to create the links to the other web pages within the li tags.

<div id="horizontalNavigation">

<ul>

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

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

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

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

</ul>

</div>

Next we start creating the CSS code the body element has been styled, but it's the navigation div area that we will be setting up, the different areas where the coding takes effect. The navigation div, the ul tag inside the div, the list li elements and the a elements.

Here we have given a width to the navigation div, added margin and padding of 0px and removed the bullets on the ul, the li is given the displayed inline property and value. The a element is floated left this changes the inline element giving it a block like element to give it dimension and padding is added to the top and bottom of 5px and the left and right hand sides of 15px notice that the ul as collapsed but this will be rectified later. Some text and background colour is added and the underline is removed using text-decoration:none; Now we will remove the border and space the buttons out a bit more by adding margin:0 2px 0 0;

Here we have added a background and text colour for when the mouse is moved over the buttons. To correct the collapsed ul we add float left to the navigation div this is because the container is the parent of the a element which was floated earlier causing the container to collapse and in order to correct this we need to also float the parent container.

And finally remove the border from the ul and alter the border of the navigation div

The CSS for the horizontal navigation


#navigation {

width:700px;

float:left;

}

#navigation ul {

margin:0px;

padding:0px;

list-style-type:none;

}

#navigation li {

display:inline;

}

#navigation a {

float:left;

padding:5px 15px;

color:#000;

background:#bbb;

text-decoration:none;

margin:0 2px 0 0;

}

#navigation a:hover {

color:#fff;

background:#000;}


The finished navigation bar


A demonstration of what can be accomplished through CSS-based design
www.csszengarden.com

CSS tutorial sites
www.maxdesign.com.au

Previous Page    Next Page