Text-based menu bars

Some general points about menus

The main aim of this lesson is to give you some ideas about how to improve the presentation of your site's links. I have always believed that links are in a lot of ways the second most important bit of a web site. (The most important is, and will always be, the actual text.) Links are the one unique aspect of the communications medium that is the WWW. They are what turn your disconnected pages into a site, and they are what turn all the disconnected sites out there into the truly worldwide web of interconnected information. As described in the printed booklet for Web Design, they're far from a perfect implementation of the idea of hypertext - but they're a start, and therefore, they should be concentrated on by all web designers.

The question is, how should links best be presented? In the ideal hypertext document, they would appear dotted through the text, where ideas presented on other pages were being referenced. But there is a lot to be said for collecting links in one place as well. (These are not mutually-exclusive alternatives - you can easily do both in the same site.)

A site with a lot of external links would benefit from bringing them together on a "links page". This makes things easier for the user - it also makes things easier for you, the author. External links need maintenance, as other pages often go out of commission. If your links are all in one place, that task is made easier.

But it is also helpful to have internal links collected together for each particular page on your site. As described in the printed booklet, the structure of your site is an important factor in its usability. Deciding which page links to which, and why, can make the difference between a helpful site and a confusing one. Here is where the menu bar comes into its own. Menu bars make it clear to the reader where they can go from any given page. They guide the user, and do so subtly as well. And there are many different ways to create menu bars, with each having the potential to attract the reader's attention. Some of the possibilities are covered in the pages of this lesson:

• Text-based menu bars: this follows below
• Image-based menus
• Buttons
• Form-based menus

Back to the top

The text-based menu

You've already seen one possibility here, just above: using a list as a menu. That is the simplest and in some ways is so obvious that it often isn't thought of as a distinctive presentation technique. But it is one: bullet points are very useful here.

Lists can eat up quite a bit of space though. Another common layout technique, then, is the "line" of links, often separated by a vertical bar, or "pipe" character, like this ¦ . Not all keyboards carry this character: use the special character &brvbar; to insert it if in doubt. Usually, however, a pipe of some form lies on the key to the left of the Z, towards the very bottom left of the keyboard. This method has been used on the introductory pages about frames; below is a version for the pages of this lesson. Note how I've used a <BR> tag to break the line; it looked tidier that way.

Image-based menus ¦ Buttons ¦ Form-based menus ¦ Opening new windows
The TARGET attribute ¦ Site maps ¦ Navigation and accessibility

A well-chosen font or new colour can highlight a menu bar very effectively, as can use of the "hover" style sheet pseudo-class (which applies to all the links on this particular site). And the advantage of retaining text-based menu bars as opposed to image-based ones is that you know these will still be visible under text-only conditions. So for all it might seem tempting to craft lovely graphic buttons or rollover images to highlight your links, this can often be the safest method. If you really want to add visual oomph using an image, use a button.

All of this might seem rather obvious - but don't underestimate the effect that well-presented text can have. It's more robust than images, as I've said. And much of the most famous graphic design (such as the Bauhaus) was far more interested in text, symbols, lines and layout than pretty pictures. Think about it...

Back to the top

Back to the menu for lesson 10