| 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 » |