Using free alignment

Free alignment is a very powerful feature, which allows you to build a navigation system to virtually any orientation you like. It also allows for multiple navbars to be created; you might, for example, want two horizontal navbars underneath each other, or a vertical and horizontal layout. This tutorial discusses a few of the possibilities, and suggests some ways of making complex layouts easier to maintain.


The first thing to do is switch on free alignment; by defining menuALIGN as "free". If you do this with an otherwise unedited script, the navbar will now look like this.

As you'll see, the horizontal nav has gone. The individual link cells which were previously positioned relative to the horizontal container now take their positions from the x,y values defined in the addMainItem arrays, relative to absTOP and absLEFT:


Two techniques

From this point on, there are two possible techniques for positioning the link cells:


Absolute positioning for cells in free alignment

Supposing then, that you want to build a vertical navbar. You could do something like this:

Which looks like this.

Note that, contrary to convention, the first digit is the top (y) position and the second digit is the left (x) position. This is not intentional per se, it's simply too deeply embedded into the script's core architecture to change it now. Sorry if it's a bit disorientating at first ...

The top and left positions are defined assuming that absTOP and absLEFT are both 0. However in practise it's easier to define the position of the first link cell as 0,0 and use absTOP and absLEFT to move it into place. This will allow you to re-position the whole nav structure using those two global variables as a meaningful anchor point:

This also assumes that all the link cells are the same height, but if any of your links contain line breaks then those cells will be taller, and so the next cell must be offset further. The scattered links demo is an example of this. Another thing you may find is that when you make global adjustments which affect the height of the cells, such as to vPADDING or fSIZE, all your y-position values need to be changed, because cells can overlap each other. This can rapidly become tedious if your site is at the design stage, so to make things easier in this situation, I recommend building an array of position values, and using it to define the main items:

An array such as this is much easier to edit. You can also make it easier to re-arrange links and add others in between, by using this shorthand method for addressing the array:

Actually in this case, every link cell is the same height, so we can make this even easier with only a single value to update:


With a bit of practise, highly complex layouts are easy to build and maintain. This example creates two navbars stretching out below and to the right of the home cell:

Which looks like this.

Don't worry if this seems confusing; you can define each position simply with numbers, and for your end user the result is the same. So the example above could also be created like this:


Once your navbar looks okay, the next thing to do is add some menus.

The default positioning of a submenu is to be aligned against the bottom edge of its parent cell, so some, or most likely all of the submenus will need to be offset. The best approach to take depends on what you're building.

Remember that menus which are aligned against their right edge take an inverse value for their x-offset.

Child menus do not need to be treated any differently, since their position is relative to their parent submenu's.