CSS Tip:
Create Stylish Menus

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 demonstrated in our Animation with JavaScript newsletter story.

That requires setting style specifications for the A tags, much like we did in our Linking With Style story. 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:

So on A:link style, you're specifying a block of text that's 200 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.

STYLE Specifications

Here's the STYLE block:

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.

The code to create the menu is as easy as including links on your page:

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.netmechanic.com/news/" 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.

Our Accessibility Resource Center contains other articles and tutorials about Web site accessibility issues.

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. Here are screen shots of the menu in different versions of Netscape:

So before you implement this technique on your Web page, study your server logs to be sure you aren't getting a lot of traffic from older Netscape browsers. Their usage is way down - some studies say about 10%, while others indicate less than 5% of visitors use them. Still, if you have a great deal of traffic from schools or other institutions that use older equipment, you could still see a fairly large percentage of visitors using older browsers.

Although this CSS technique is pretty safe in new browsers, other design choices can break your pages. Find and fix those problems quickly and economically using NetMechanic's Browser Photo. It's an easy to use, online tool that takes actual screen shots of your page in 16 different browser and operating system combinations.