A Simple Top Menu Using Style Sheets

This page features a simple top navigation menu using style sheets.
It takes only a few lines of code and is clear, fast and reliable.

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 horizontal menu with text links that change color when you run your mouse pointer over them.

The background size and color are set by a TABLE within a TABLE. The first TABLE sets the overall size and the border color ... in this example, a light gray (#666666) while the second TABLE sets the main background to a darker gray (#333333).

The font style, size, color and text-decoration are the only features set in the STYLE section and to give us control over the link styles it is a good idea to create a special class for your navigation links. The syntax is simple ...

• A.topNav:Link
• A.topNav:Visited
• A.topNav:Hover

... where "topNav" 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="topNav">Home</a>

STYLE Specifications

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

<style type="text/css"> a.topNav:link {color: #FFAD73; font-family: Verdana, sans-serif; font-size:12px; text-decoration: none } a.topNav:visited {color: #FFDDAA; font-family: Verdana, sans-serif; font-size:12px; text-decoration: none } a.topNav:hover {color: #ffffff; font-family: Verdana, sans-serif; font-size:12px; text-decoration: none } </style>

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

<div align="center"> <table border=0 cellpadding=1 cellspacing=1 bgcolor="666666" width=95%><tr><td> <table border=0 cellpadding=1 cellspacing=0 bgcolor="333333" width=100%> <tr> <td width=15% align="center"><a class="topNav" href="../index.html">Home</a></td> <td width=15% align="center"><a class="topNav" href="./design.html">Design</a></td> <td width=15% align="center"><a class="topNav" href="./build.html">Build</a></td> <td width=15% align="center"><a class="topNav" href="./publish.html">Publish</a></td> <td width=15% align="center"><a class="topNav" href="./promote.html">Promote</a></td> <td width=15% align="center"><a class="topNav" href="./tutorials.html">Tutorials</a></td> </tr></table> </td></tr></table> </div>

Here's how it displays in your browser.     Naturally, you can change the colors and fonts to suit yourself.

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.