TweetFacebookShareThis

Vertical Navigation Bar

Previous Page    Next Page

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

<div id="navigation">

<ul>

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

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

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

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

</ul>

</div>

Next we start creating the CSS code by identifying the different areas where the coding takes effect. A container div, a ul inside the div, the list li elements and the anchor elements inside the li elements.

#navigation {

}

#navigation ul {

}

#navigation li {

}

#navigation a {

}

We begin by removing the bullets from the list by applying list-style-type:none; to the li element. We then set the list at the edge of the page by setting the margin:0; and padding:0; to the ul element and we give the container a border of 1px solid #000; and a reduced width of 200px.

The next step would be styling the anchor element by applying padding of 5px on the top and bottom and 15px to the left and right because the anchor element is an inline element and padding can't be applied to the top and bottom of the element we overcome this problem by using display:block; we will also apply a border of 1px solid #000;

#navigation {

width:200px;

border:1px solid #000;

}

#navigation ul {

margin:0;

padding:0;

}

#navigation li {

list-style-type:none;

}

#navigation a {

padding:5px 15px;

display:block;

border:1px solid #000;

}

The navigation bar should now resemble the picture below

Now background and text colour can be added background-color:#ccc; color:#000; The borders can be removed from the navigation and the a element. But this creates a navigation bar with no separation of the buttons to resolve this we add margin-bottom:1px; to the anchor element. To remove the underline from the text we use text-decoration:none; applied to the anchor element.

And finally creating a change of colour to the buttons when you move the mouse over them by using the pseudo class selector #navigation a:hover

(Note: Internet explorer creates a problem with this code but it's easy to fix using display:inline; in the li element.)

The finished CSS for the vertical navigation bar


#navigation {

width:200px;

}

#navigation ul {

margin:0px;

padding:0px;

}

#navigation li {

list-style-type:none;

display:inline;

}

#navigation a {

padding:5px 15px;

display:block;

color:#000;

background:#ccc;

margin-bottom:1px;

text-decoration:none;

}

#navigation a:hover {

background:#0f0;

}


The finished navigation bar


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

CSS tutorial sites
www.maxdesign.com.au

Previous Page    Next Page

Recommended Books