Making an image-based navbar

As discussed in the advanced customisation guide, building an image-based navbar by adding lots of img tags into the link definitions is awkward at best, and unstable at worst.

In this tutorial I'll be showing you another approach, which is not only stable and cross-browser compatible, it has the added advantage of built-in degrading with unsupported and non-javascript browsers, as well as text-only and speaking browsers. What we're going to do is to build the main navbar using normal html, and then superimose a set of tranpsarent menu-triggers over the top.

The first thing is to build the navbar, for example:

The layout is very simple, using table-cells and gif images. Here it is again, this time with visible borders and exaggerated cellpadding:

Unsupported and non-javascript browsers will simply see a set of image links as above, which can be used for primary navigation around a site. By making proper use of the alt tags, we also ensure that the site is navigable to text-only browsers, speaking browsers and for people who surf with images turned off. In Lynx for example, you'll just see a row of text links.

The next thing to do is position it on the page. Since older browsers don't support CSS or layer-based positioning, I'm gonna use transparent gifs to move the navbar where it I want it. Have a look at demo page 1 which shows the navbar in its final position, surrounded by a coloured table. The source code is very simple, so that even the most basic web browser will be able to interpret it.

Now we need to superimpose menu triggers over the top. Five top links need to be defined, some of which are going to have a menu attached to them. No link text is needed - we can assign URLs to them anyway and set cellCLICK=true; to activate the links. However in Netscape 4 and Opera 5 this will mean that all the top links have default cursors. You might feel this is a bit confusing - making it seem that they're not links at all - in which case you could define the link text with half a dozen non-breaking spaces.

In demo page 2 you can see the same page header with the top cells added. I've set the border to 1 so that we can see the gap between each link cell, and positioned the nav higher on the page than it's eventually going to be, so that there's a visual reference to help define the width of each cell. In this demo the cells are bold red so that they're easy to see. Use absLEFT and absTOP to set the position of the first cell, and then use the link-definition arrays to set the widths.

It will probably be necessary to use browser-conditional definitions for absLEFT and absTOP, to compensate for browser differences in the position of the navbar html. This is easy enough to acheive using the variables from the sniffer script. In this particular case:

var absLEFT=84;
if (ns6||ns4) { absLEFT=81; }
if (mz7) { absLEFT=80; }
var absTOP = 44;
if (ie) { absTOP=51; }

Once the top links are the right size, they can be moved down to sit perfectly on top of the image buttons, and then increased in height to cover the buttons fully. The best way to do this is to set the vertical cell padding vPADDING = 0; and then gradually increase the font size variable fSIZE until the cells are the correct height, as shown in demo page 3.

Finally, with the cells in the right place, the menus can be added on and the top links made transparent. demo page 4 shows the final result - with static links for old browsers and DHTML menus for those which support them.