Relative positioning

Relative positioning is acheived by using an anchor-image to specify where the navbar should be. The script looks for an image with the name "anchor" just before it begins compiling the nav; if this image exists, its co-ordinates are used as absLEFT and absTOP.

Here's a demo of a relatively positioned menu. It has a centrally aligned, 150 x 150 table with a 1 x 1 gif image in the center; this is the anchor:

The choice of image is irrelevant to its usefulness as an anchor point, so you could just as easily use an image which serves a decorative or navigational purpose as well. Whatever image you use, the navbar will be anchored to its top-left corner. The only thing you need to do is give it the correct name attribute:

If you use relative positioning and you've set menuALIGN to "center" or "right", it will be redefined as "left". This means that you cannot use relative positioning to control the center or right-edge of the menu, only the top-left corner. Further offsets to individual menus, or to absolutely positioned cells in free alignment, are taken from this anchor point.

However please note that relative positioning cannot be supported in the mac version of ie4, or konqueror 2.2. Allowing the menu to display anyway would create a serious layout discrepancy, so if you use relative positioning, support for these browsers is disabled and the nav will not appear at all. You may be comforted to know that these two browsers between them account for less than half of one percent of internet users. Nonetheless, if you specifically prioritorise either of them, or if total cross-browser support is important in your situation, then relative positioning is not a suitable approach.

Also note that relative positioning cannot be acheived by putting the menu.js script include inside another containing element, such as a table, div, or anything else. You should leave the script include at the end of the body section, and use the anchor technique described above.


Relative positioning for cells in free alignment

If you use free alignment, you can use a similair technique to define the x,y position of each link cell. It works like this:

If you have menuALIGN set to "free", then you can include a series of images with the name "freeanchor" which are used as cell anchor points, in the order they appear. If you have more free anchors than defined menu cells, the extras will be ignored; if you have too few then the original positions, as defined in the addMainItem arrays, will still apply.

So for example, to build a vertical navbar you could begin with a table layout like this:

Which looks like this. Now let's see what happens when we add a free-aligned menu script; it looks like this.

Isn't that the coolest?


It only remains to note that you cannot use both relative positioning techniques in the same nav; to allow this would create the possibility of contradictory values. If you use the anchor technique in combination with absolutely positioned cells in free alignment, then the link-cell positions will be relative to the anchor point; if you use the freeanchor technique, then absLEFT and absTOP are both reset to 0 since their values are not needed.