The Tutorial - Positioning the menus
Scenario: A vertical menu must be placed inside a cell where its left position can vary depending on the browser's window size (Floating mode)

Let's consider this page layout where we have an image (perhaps, the logo of our company), two cells underneath where the leftmost one will contain our menus and the other our HTML contents.

Try to increase this window's size as much as possible to ensue that the sample layout is fully displayed.

As you can see, this is a very common design for a simple web site and yet, placing the menus at the correct spot (inside the dark blue cell) can be quite tricky.

First of all we need to define the properties of our design. There's only one important thing to consider here:

  1. The layout is centered which makes all the cells in the table change their horizontal position as the browser window is resized.

This makes positioning the menus quite difficult because the position of the cell where we want to place the menus will vary depending on the browser's window size and we will never know, for sure, what offset to apply. In this case DHTML Menu Builder provides a method for attaching the menus to an element inside that cell. This will cause the menus to follow this element (which is usually an image) thus guaranteeing that the menus are always properly positioned.

Click the continue button to learn how to attach a toolbar to an image so it follows the image position.
 


Continue »