Horizontal Nav Bars

A horizontal nav bar along the top of your site is often untidy and hard to manage. Instead, you can achieve the same effect by writing the navigation as a list and then using CSS to style the list.

Listings 5 and 6 show the code.

The screenshot shown in Figure 2 shows what this menu looks like when added to the two-column layout described previously.

The text-align: center; attribute centers everything within this <div>. Below that, the padding-right attribute gives some space between the menu items – you can adjust this to your preference.

The text-decoration: none removes the underlining that links have by default – this is tidier for a menu like this. I've also changed the text color.

The list-style-type: none statement means that the list won't have any bullets by the items – again, a neater style for a menu.

Alternatively, a variety of list-style-type values are available if you do want a bullet or number by each item. The display: inline means that, instead of the standard list structure in which each item displays on a new line, the list items will display on the same line, one after the other. With display: none, you could even choose not to display the list at all. The normal behavior for lists is display: block – this puts each element on a new line. Other elements can have a display value as well.

By tagging the list (e.g., <ul class="nav">) and editing the CSS appropriately, you could achieve a similar effect, but putting it inside a div tag is more flexible.

Rollover Menus

So you have your nav bar, but now you want to make submenus pop up on rollover. Do you think you'll need Javascript to do this?

Think again – you can make it happen with CSS. I should point out that IE6 doesn't work with this technique. To get around this problem, make sure the parent link is clickable and goes to a page that indexes the submenu, which is good practice anyway for accessibility reasons. Alternatively, you can set up Javascript that runs only if it detects an IE6 browser.

In Listing 7, the navigation is again set up as a list, but this time with submenus as sublists (Figure 3). This configuration is very basic, aesthetically speaking, but you can do much more to make it look more attractive.

Listing 8 shows the CSS. The basic list setup (which will apply to both the outer and the inner lists) has no margin but a little padding and a contrasting background. The sublists do not display by default; otherwise, they would just be there all the time rather than appearing only on mouseover.

Locating the list items by relative position means that they are positioned within the general flow of the page (in other words, they are positioned after the elements before them, and before the elements after them!), although values such as top and right are honored. As in an earlier example, you don't want bullets; hence, you set list-style-type.

The magic happens in the final section. When you rollover a list item that has a list child element, it will now display. It displays as a block list, with absolute position (meaning it doesn't get pushed out of the way by any other elements) underneath the parent element (set by top: 100%, meaning the parent element is on top, which is slightly counterintuitive). The left: 0% value means that the sublist will appear exactly beneath the relevant menu item, rather than being offset. Without this value, the sublist will appear way over on the left-hand side of the page, which is its default.

Also, you could choose to have the sublist appear to the left, up, or down. For example, if you want to have a side menu, you would probably want the submenus to appear to the left. The best way to learn the various options is to play around with the settings.

The final background image element is an IE7 bug fix – without this, in some circumstances your rollover menus wouldn't be "sticky" in IE7. That is, instead of staying put for long enough for you to click on whichever submenu item you want, the submenu would vanish immediately when you take your mouse off the main parent list item. The background image fixes this – you should either use a transparent image, or a file with no content because it is the image call itself that resolves the bug. Of course, you can make this design more attractive by defining borders, custom bullets, different colored backgrounds, and anything else your heart desires.

Marking External Links or Formats

At times, you might want some means for marking external links on your site. Some users also might want to identify links to non-HTML files (Word documents or PDF files).

First, you need to set up a small image file with an appropriate icon – as shown in Figure 4. Adobe and Microsoft make appropriate icons for PDF and .doc files available on their websites; you'll have to find your "external link" icon from somewhere else. Then, you can set up the CSS to pick up on these sorts of links.

Listing 9 shows the HTML for this, and Listing 10 shows the CSS.

The first section in the CSS uses a regular expression to set up the external link image as a background image for all links that begin with http. It's set to sit at the top right of the link and not to repeat. The padding ensures the image doesn't crowd into the right-hand side of the link itself. If you need to vary this padding according to the size of the icon, you could use slightly different settings for each icon, as I've done here.

The first section should automatically exclude any internal links because it's good practice to refer to internal links without the http in front of them. However, for cases in which the full form has been used, the second section cancels out the first for links within your site (obviously, you need to replace http://www.example.com with your own URL).

The last two sections do the same as the first, but they only apply to links ending with .pdf or .doc. Because these sections occur later on in the CSS, they'll override the external link icon. If you would prefer to display the external link icon, rather than a file-type icon, for a document on an external site, rearrange the order, but be aware that the first and second sections must be in order or the second section won't override the first.