Create Stylish Menus with CSS

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

A site's navigation menu is often one of the most complicated elements on the page because images, JavaScript, links, and other page elements have to work together seamlessly. Wouldn't you like to create a cool navigation menu without having to create images and write DHTML code? You can with style sheets.

The Rollover That Isn't

What we're going to do is set up style specifications that mimic the JavaScript rollover effect.

That requires setting style specifications for the A tags. In this case, we're going to create a vertical menu with text links that change color when you run your mouse pointer over them.

Since you have a lot of different styles to manage, it's less confusing if you lay them out using a little grid before you begin writing the style specifications:

Link Type	Size	Color	Text Effects	Line Breaks
A:link	Width:150 px	Background: Navy Color: white	Font-weight: bold Text-decoration: none	Display: block
A:active	Width:150 px	Background: Red Color: white	Font-weight: bold Text-decoration: none	Display: block
A:visited	Width:150 px	Background: Navy Color: white	Font-weight: bold Text-decoration: none	Display: block
A:hover	Width:150 px	Background: Red Color: white	Font-weight: bold Text-decoration: none	Display: block

So on A:link style, you're specifying a block of text that's 150 pixels wide, has a navy background with white, bolded text, and no underlining. Then for A:hover, the background changes to red when the mouse pointer "hovers" over the link. That creates the rollover effect.

If these colors are a little bright for you simply change background and font colors in the Style Block until you find a combination that suits your fancy. Or you may prefer a normal font weight, narrower border, padding around the text ... the choice is yours.

STYLE Specifications

Here's the STYLE block: Copy it into the HEAD of your page.

<style type="text/css"> a:link { text-decoration:none; color:FFFFFF; background:navy; font-weight : bold; width: 150px; display:block; } a:active { text-decoration:none; color:FFFFFF; background: red; font-weight:bold; width: 150px; display:block; } a:visited { text-decoration:none; color:FFFFFF; background:navy; font-weight:bold; width: 150px; display:block; } a:hover { text-decoration:none; color:FFFFFF; font-weight:bold; width: 150px; background: red; display:block; } .navigationBorder { background:navy; border-style:solid; border-color: red; border-width:5px; width:150px; } </style>

Note that we added a class called "navigationBorder" to the style specification. That adds a border around the outside of the menu and gives the menu a more attractive, cohesive look.

If you'd like to create a horizontal menu, leave out the display:block rule and increase the width of the navigationBorder. You'll have to play with the sizes some to get everything looking just right.  Try 550px for navigationBorder and 100px for each of the A tags.

The code to create the menu is as easy as including links in the BODY of your page:

<div class="navigationBorder" align="center"> <a href="http://www.2dwebdesign.com/index.html">Home</a> <a href="http://www.2dwebdesign.com/design.html/">Design</a> <a href="http://www.2dwebdesign.com/build.html/">Build</a> <a href="http://www.2dwebdesign.com/publish.html/">Publish</a> <a href="http://www.2dwebdesign.com/promote.html/">Promote</a> </div>

Here's how it displays in your browser:

Now, you may be thinking "That looks great for a navigation menu, but the rest of my content will look awful with big red and blue links all over it!"

All you have to do is create a special class for your navigation links. The syntax is simple:

• A.example:Link
• A.example:Active
• A.example:Visited
• A.example:Hover

Where "example" is the name of the specific class. You can call it whatever you want. Then, when you create your navigation menu, you include the class name like this:

<A href="http://www.2dwebdesign.com/index.html/" class="example">Newsletter Archive</a>

Decrease File Size, Increase Accessibility

When you're specifying multiple rules for your links and adding other style specifications, the size of the HEAD section can quickly balloon. Consider placing your styles in an external style sheet instead. That keeps your page's file size small and makes maintenance much easier because you can change the colors, etc. of every page with just one file.

Using style sheets for links instead of images, image maps, or JavaScript also improves the accessibility of your site. Remember that offering alternative text links is an important principle of accessible navigation design. If you use the style sheet technique we've described, you get the attractive appearance of an image map while still offering text-based navigation.

Search engine spiders like text links too! Be sure to include descriptive link titles when you code your links. Although some browsers don't support the TITLE attribute in links, they won't break your page.

Browser Display Issues

If you're a whiz at style sheets, you're probably wondering why we didn't rely on inheritance to set the link properties that remain the same (background color, text-decoration, width, etc.). Supposedly, if you set the property once, it cascades down through later styles unless you change it or override it - hence the name cascading style sheets, right?

Oops! Browsers don't always interpret styles that way. To be safe and relatively sure that this menu is compatible across browsers, we specified the styles for each link type. That keeps you free of most CSS browser bugs that can cause problems.

A warning though: it looks pretty bad in Netscape 4.x browsers but this CSS technique is pretty safe in the newer browsers.