Build Your Site Navigation With CSS
About the Author
Larisa Thomason
Larisa teaches college-level Web design and programming classes and helps private clients solve Web design and promotion problems. She specializes in non-profit organizations and political candidates. In addition, Larisa is a Senior Web Analyst at
NetMechanic.com
By: Larisa Thomason
February 28th, 2003
Could anything look more boring than basic text links? Plain text displayed in the not very attractive colors of blue and purple, with no background colors, no rollovers, and nothing to make the page visually appealing...
This description might accurately describe plain text links, but text links styled using CSS properties are something else entirely! CSS makes it possible to create text links that look like buttons or menus and mimic the effect of an image file or JavaScript rollover. All this without the download time, accessibility, and promotion problems of images and JavaScript!
The "Look" Without The Load Time
Image-based navigation gives you control over presentation and layout, and even allows cool DHTML effects. Text-based navigation creates a site that's more accessible, downloads more quickly, and is much friendlier to search engine spiders.
Web designers use images for site navigation because they look cool as standalone page elements. When you add a little JavaScript code to create a rollover effect (where, for example, the button changes color and size when the mouse is dragged over it), you're also telling visitors "Hey! This is a link! Click on it and go deeper into my site!"
But there's one problem: you're relying on images to get this effect. JavaScript rollovers require at least two images for each link (one image for the basic button and another for the rollover). If you're linking to ten different pages, then you've just loaded up your page with 20 images that have to download before your navigation system is clear to visitors.
People with slow dial-up connections may not be willing to wait. They can choose from hundreds of millions of Web pages and may not think that your site is anything special -- particularly if the navigation system appears to be broken or non-existent.
So, our goal in this tutorial is to build a colorful, attractive text-based navigation system without the use of images.
Learn The CSS Link Pseudo-Classes
First, let's take a minute to review some basics: CSS link pseudo-classes. As you know, CSS classes are used to refer to a particular category of element. Similarly, a CSS pseudo-class refers to a particular state of an element. We'll use the pseudo-classes for different link states to create the navigation system.
People can have different states of consciousness: awake or asleep are the two most obvious. Well, in CSS, a hyperlink can exist in four different states, and you can set style properties for each:
Hover and link are the two most important link states for our purposes, but we'll define properties for all four.
Navigation Buttons With CSS
The design process can get quite complicated, because we're dealing with multiple link states and setting different properties for each. I always create a planning grid to clearly define my CSS properties before I ever begin to code them.
Note that we've actually set just two different style definitions and applied each one to two different link states. The link and visited properties get the same style definition and the active and hover states display identically as well.
Here's how the actual style definition looks.
<style type="text/css">
a.button:link
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:outset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:navy;
}
a.button:visited
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:outset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:navy;
}
a.button:active
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:maroon;
}
a.button:hover
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:maroon;
}
</style>
Place it in your document's <head> section, or attach it via an external style sheet (remember to remove the <style> and </style> tags if you do!). Looking at it, you may wonder why I didn't let later definitions inherit all the common properties from the first definition. Ideally, that's the way style sheets should work: define the button once, and then for later states, just make changes as needed. Unfortunately, browser support for this is spotty! It's safer to add all the properties and values to each link state, even though it means duplicating some information.
Include the buttons on your Web page as you would any normal text link, but be sure to add the class name to the <a href> tag:
<a href="http://www.sitepoint.com/" class="button"
title="Visit SitePoint.com for valuable webmaster
resources">SitePoint</a>
The border property is what actually gives the button the look of a button. We set the border-style property to outset to give it the look of a regular button for the :link and :visited states, and provide an inset value for the :active and :hover states. That gives the link the appearance of a button that has been pushed.
Note that we defined each link as a dependent CSS class named "button." Otherwise, every link on the Web page would look like our navigation buttons -- even links within text content, and mailto links. When you create an individual class for your navigation system, you're free to style the text content and mailto links in a less obtrusive manner.
I could explain in detail how all this will look in a browser, but this example page [1] shows the effect much more clearly. It has different buttons and even contains a simple horizontal navigation menu created with individual buttons placed side by side.
Explorer and Netscape create the most attractive buttons. There are slight display differences between Opera version 6 and version 7. WebTV displays the buttons, but without the border or rollover effect. a
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 [2] 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.
A Word About Visitor Preferences
It's easy to place the <a href> tags for your menu system in the <body> section. But actually getting them to look the way you want involves a bit of trial and error. Ideally, you want each link to look the same except for the text content. So the width, color, alignment, etc. of each text link needs to match the others.
That means you'll have to take some control away from your visitors by defining the font and setting an absolute font size. Relative font sizes that scale in relation to surrounding text and visitor preferences are just too risky.
We're working here with a pretty tight layout that will be broken -- maybe even illegible -- if a visitor tries to view it with the browser's text size set to the largest or smallest available value. Often, the best answer is a compromise: set absolute font values for navigation systems, but make sure they're large enough to read clearly. 12 pixels is the minimum, in my opinion. Then, you can let visitor preference rule for the rest of the page content.
Still, even with that much careful planning and control, you can never be sure that your links will work in all browsers for all visitors. One factor limiting wider adoption of CSS is inconsistent browser support. In this article I've tried to stick with techniques supported by IE 5.x and up, Netscape 6.x and up, and Opera 6.x and up.
Is All This Work Really Worth It?
You bet. You'll benefit in many ways, and so will your visitors!
Less image files mean less download time! Visitors with slow connections see your pages more quickly and more reliably. You may have a fast broadband Internet connection, but others aren't so lucky. Although use of high-speed lines is increasing, the vast majority of users worldwide still connect via dial-up.
All browsers support text links, but some browsers don't adequately support JavaScript or display images (think about WebTV and text browsers). A complex DHTML menu structure may be completely inaccessible to a WebTV visitor. Visitors with slow connections may prefer to surf with images turned off. And sometimes, the problem is on your end. The server may not send the image to the browser or a coding error may prevent it from displaying properly.
Visitors with severe visual disabilities often listen to Web pages using screen readers or Web page readers. An image-based navigation system is hard to decipher if you can't see the images.
It's a lot easier to change the text in a link when the link is actually in text format rather than an image format. Suppose your boss decides that the "Contact Us" link should actually be labeled "Email Us" instead. If it's a text link, you change one word. If it's an image link or button, you have to modify the entire image file yourself or pay the graphic designer to do it for you.
Some search engine algorithms (like Google's) particularly prize keywords placed inside link text. Keywords are words or phrases that you expect people to enter into a search engine to locate your Website. You can give your site a slight boost on the results page by using your site's targeted keywords inside link text. You can use keywords inside ALT and TITLE attributes on image links (and you should!), but text is more important.
Most search engines claim that their spiders are capable of crawling through every level of a Web site and indexing every page. This is called "deep spidering" because the spider reads content even if it's located deep inside the site. But the spider has to find the internal pages before it can index them.
Think about what a spider really is: basically a simple text browser. Spiders can't see your images and sometimes have problems following JavaScript hyperlinks. So that great DHTML drop-down menu system on your site may look wonderful, but it also may be slamming the door on search engine spiders. They can't index what they can't find!
...Still not convinced? Try out these techniques on some sample pages of your own and consider how they might be integrated into your site design. Used together, text links and CSS are such a powerful tool for site design and promotion that you may never use image navigation again!
[1] http://www.webmasterbase.com/examples/cssnavigation/Buttons_example.html
[2] http://www.webmasterbase.com/examples/cssnavigation/Menu_example.html