Horizontal -> Left Aligned  (updated 23/Jun/2005)

DHTML Menu Builder supports aligning the menus vertically and horizontally.
In this sample you can see that both the toolbar and the menus are horizontally aligned.

Also notice that all the menus appear aligned to the left of the toolbar; this is not DHTML Menu Builder's default behavior but its a highly requested feature among DHTML Menu Builder users. By default, DHTML Menu Builder will always align menus to their parent toolbar items.

So, how did we manage to create such effect if DHTML Menu Builder doesn't support it?

The answer is by using a "Custom Offset Definition".
Custom offset definitions can be used to apply highly customizable conditions to align and offset the position of the menus as required.

Here's how we created this definition:

• Click File->Project Properties->Advanced
• Click "Menus Offset"
• Click "Advanced"
• Click "Add"
• Type a description in the "Description" textbox. We used "Left Aligned".
• Click the "Advanced" tab
• Click the "Root Level Menus" tab
• Enter the following code in the javascript textbox:
  xy[0] = parseInt(tbS[1].left);
• Click "OK"
• Click "Close"
• Click "OK"
• Click "OK"
• Click Tools->Preview to see the custom offset in action.

Very easy. Let's analyze the code part by part:

1. The "xy" variable is an array of two elements. The first element, xy[0], holds the horizontal position of the menu about to be displayed and xy[1] holds the vertical position.
2. We then set the xy[0] element (which holds the horizontal position of the menus) to match the left position of the toolbar.
   tbS is another array which contains the properties of all the toolbars in the project. So, tbS[1] will refer to the first toolbar in the project.
   This way, tbS[1].left will give us the left position of the toolbar and that's the value we use for the horizontal position of the menus.

NOTE: In case that you want to achive the same effect on a vertical toolbar you should use this code instead:
xy[1] = parseInt(tbS[1].top);

  Download This Project