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)

Although the menus could be attached to almost any element in a page we recommend using an image as this will ensure that this technique works under any of the supported browsers.
So, in order to avoid the image from showing up on our page we're going to use a transparent image; the best way to create a small transparent image is to use any graphics editor and create an 100% transparent GIF image. Click here to download an image that can be used for this purpose.

The next step is to insert the image in the cell. Here's a sample piece of code that can be used to insert the image:

<img border="0" src="blank.gif" width="1" height="1">

Now, we must give the image a name. It must be a unique name which DHTML Menu Builder will use to reference this image. In this tutorial we'll call our reference image "RefImage" and here's the code that needs to be inserted into the <img> tag to give our image a name:

<img border="0" src="blank.gif" width="1" height="1" name="RegImage">

Now, although you can't see it (and that's the idea) this sample below already contains our image inside the dark blue cell.
In this tutorial we're using an image that cannot be seen but, in fact, you could use any image that already exists on your HTML documents as a reference image. For example, if our HTML layout would have had the logo in the upper corner of the dark blue cell we could have used the logo as the reference image.

The final step is to configure our toolbar so its position is not fixed and, instead, it attaches itself to our image.
To do this we go to the Tools->Toolbars Editor->Positioning dialog and set the Alignment setting to the Attached To option.

Inside the Object Name textbox we type the name of the image that we want to use as a reference. In this case we called our image "RefImage".

And, finally, its just a matter of recompiling the project using the Tools->Compile command to see how our changes are working.

Well, as expected, the toolbar is appearing "near" the image in the dark blue cell and it is following it (you can verify this by resizing this window). But... it is not exactly over the image. This is normal and it can be fixed by applying some small offsets to tweak the final position of the menus.

As you can see in the sample below the toolbar is appearing a couple of pixels to the right so we'll need to compensate this by applying a negative offset. A negative vertical offset will move the toolbar towards the top and a negative horizontal offset will move the toolbar towards the left.

Click the Continue button below to see how we apply these offsets and finalize our project.


Continue »