Positioning the Toolbar
The alignment dialog in the Toolbars Editor is a very powerful tool which lets you take complete control over the follow parameters that affect the way the toolbar is positioned on the browser's window:
  • Anchor: This controls the fixed areas of the toolbar that will remain fixed regardless of the alignment setting
  • Alignment: This controls how the toolbar will be positioned relative to the browser's window
  • Position: And this controls where in the document the toolbar will be displayed

Being able to work with the above parameters on their own would be a quite complex and tedious task; this is why DHTML Menu Builder's Toolbar Positioning dialog provides a very easy to use interface where all you have to do is select from an alignment mode and if necessary set an offset.

The alignment control is divided in three modes:

  • Aligned and Anchored:
    In this mode you select the position from 9 available options. Each option will automatically align and anchor the toolbar to a specified location of the browser's window and maintain this setting even if the browser is resized.
    For example, in the configuration shown here the toolbar will be anchored to top/right corners of the browser's window.
    This configuration will be maintained regardless of the window size and even if this size changes after the toolbar has been displayed.
    Please refer to the Positioning the menus tutorials for further information.

  • Custom and Fixed:
    In this mode the toolbar will be placed at a give x,y coordinate.
    The coordinates are provided in pixels and as in the previous mode are maintained regardless of the browser's window size.
    In this sample the toolbar will be positioned at exactly 40 pixels from the left corner of the browser's window and 120 pixels from the top border.
    Please refer to the Positioning the menus tutorials for further information.

  • Attached to...:
    Sometimes, placing the toolbar so it flows with the rest of the contents of the page can be quite a difficult task.
    With this positioning option you can force the toolbar to follow an item in the HTML document so its position will depend on the position of the "attached to" object (which is usually an image) and the selected alignment.
    Optionally you can force the image to inherit the size of the toolbar, this way, whatever content appears next to the image will appear to flow as if it was flowing around the toolbar. Note that this option is only available when the alignment has been set to Bottom/Left.
    In this sample the toolbar will follow an object named "LeftImage" and it will be aligned in a way so the toolbar will always appear below the object and centrally aligned.
    Please refer to the Positioning the menus tutorials for further information.
    Click here to see a small online tutorial that explains in greater detail how this option can be used.

  • Free Flow...:
    All the previous positioning methods will create toolbars that appear floating above all the contents in a page.
    In this mode, the toolbar will not float, but instead, will be part of the HTML contents on the page allowing it to flow with the rest of the HTML content... just as if it were an image or a table or some other common HTML element.
    For this mode to work you need to add an ID to some enclosing element in the page. The toolbar will then look for that ID and will insert the toolbar inside the tag that contains that ID.
    A more detailed explanation of how this method works can be found on the Positioning the menus tutorial.
     

Finally you can further tweak the position of the toolbar by specifying a custom offset. The offset is specified in pixels and its applied to the position of the toolbar after it has been calculated based on the selected alignment.

Related topics of interest: