Build Your Site Navigation With CSS

Navigation Menus With CSS

Next, let's create a vertical navigation menu using this same technique.

The only difference from the previous style definition is that we're going to take the border off each individual text link, and place the links inside a DIV tag with a border.

Here's what the planning grid looks like this time:

As before, the identical pairs are link/visited and active/hover. We're going to define a <div> class to contain our menu system and give it an attractive, finished look with a single border around all the links.

Here's the style definition for the link classes and the div. Note that we used classes again instead of applying the styles to every link and every div on the page!

<style type="text/css">  
 
a.vertical:link  
{  
 font-size:14px;  
 text-decoration:none;  
 color:#9966CC;  
 background:#FFFF00;  
 font-weight:bold;  
 width:150px;  
}  
   
a.vertical:active  
{  
 font-size:14px;  
 text-decoration:none;  
 color:white;  
 background:white;  
 font-weight:bold;  
 width:150px;  
}  
   
a.vertical:visited  
{  
 font-size:14px;  
 text-decoration:none;  
 color:#9966CC;  
 background:#FFFF00;  
 font-weight:bold;  
 width:150px;  
}  
 
a.vertical:hover  
{  
 font-size:14px;  
 text-decoration:none;  
 color:white;  
 background:#9966CC;  
 font-weight:bold;  
 width:150px;  
}  
   
.verticalBorder  
{  
 background:#FFFF00;  
 border-style:solid;  
 border-color:#9966CC;  
 border-width:5px;  
 width:160px;  
}    
 
</style>

Place the links for the menu system wherever you want it to display on your page. Be sure to use the correct class information and wrap the links inside the <div> we just defined:

<div class="verticalBorder" align="center">  
<a href="http://www.sitepoint.com"  
class="vertical">Site Point Home</a><br/>  
<a href="http://www.sitepoint.com"  
class="vertical">CSS Tips</a><br/>  
<a href="http://www.sitepoint.com"  
class="vertical">JavaScript Tips</a><br/>  
<a href="http://www.sitepoint.com"  
class="vertical">Domain Names</a><br/>  
<a href="http://www.sitepoint.com"  
class="vertical">Beginner Tips</a>  
</div>

Use a break (<br />) tag between the links create a vertical menu. That tag drops the link to the next line. This is more reliable than using the display property to turn the link into a block-level element.

You'll probably need to experiment with different border styles, widths, and colors to customize the CSS properties to your individual site. Setting the widths of the links and the <div> can be particularly tricky, so be sure to test the menu in several browsers to make sure it displays consistently.

This second example page shows a vertical menu system. It returns fairly consistent results in all major browsers (even WebTV) except Netscape 4.7 (whose hobby is breaking style sheets, no matter what technique you use).

As a really cool test, look at the page using Opera and turn off images. Compare the appearance of the text link navigation menu to the image map below it.