Note: In the HTML Editor version 2009 and higher, the DHTML Menu Builder has been replaced with the CSS Menu Designer. To upgrade to the latest version of the HTML Editor, download it from your My Products page. For more information about the CSS Menu Designer, read How to Use the CSS Menu Designer.
To add a DHTML menu to your page, click the DHTML Items icon in the Code Editor toolbar, and then select DHTML Menu Designer from the drop-down list. This opens the DHTML Menu Designer, which contains three tabs that allow you to customize all aspects of your menu.
Menu Designer Tab
This tab allows you to list your menu items and assign their order and links.
Add Root Item: Adds a root menu button, which will be displayed at all times.
Add Sub-Item: Adds an item that will appear when the user clicks the selected menu button. You can add as many sublevels as you wish, but more than three tends to be difficult to navigate.
Add Sibling: Adds an item on the same level as the selected item. For example, if you click this button when a submenu of the menu root is selected, another submenu will be added.
Delete Item: Deletes the selected item.
Text: The text you would like to appear in the selected item.
Link: The URL where you would like the selected item to point to.
Height and Width: The height and width in pixels of the selected item. If you would like to apply these settings to all the menu buttons, click Apply to All.
Menu Colors Tab
Use the options under this tab to set your menu colors. You can manually enter hex codes or select a color using the color swatches to the right of the different options. To see your color choices in action, check out the Menu Color Sample area.
You have the option of setting a different color scheme for each menu level, but if you want your submenus to inherit the same scheme as the root menu, click the Copy Main button.
Options Tab
The options under this tab allow you to work with the alignment and display properties of your menu, and to adjust your font face, style, and size.
General: Adjust the menu orientation (horizontal or vertical), the menu and text alignment, the location of the top and left edge of the menu, the space between the top and left edge of the menu and the edge of the page, and the width of the border.
Submenus Unfold On: Choose when the submenu appears. You can set them to open when your user hovers over them with their mouse (OnMouseOver) or when your user clicks them (OnClick).
Menu Item Font: Choose the font face, size, and style for the menu.
Menu Arrows: Choose whether your menu displays arrows and, if so, the style of the arrows.
Keep Selected Path Highlighted: Check this box if you want the path the user has selected to stay highlighted.
Border Between Menu Items: Check this box if you want a border to appear between menu items.
Global Options
The five buttons at the bottom of the DHTML Menu Builder window allow you to save the menu you're currently working on, open a preexisting menu, preview your menu, close the window and insert the code into the page (OK), or cancel out of the window. Please note that any images, such as arrows, will not be available when you preview the menu using the Preview button.
When you click OK, the DHTML Menu Builder will place the code on your page. You should make sure the entire script is placed just after the first <body> tag. The first and last lines of the menu script look like this:
<script type='text/javascript'> Menu script appears here <!-- REST OF BODY CONTENT BELOW HERE -->
If you prefer not to have all that code on your page, read this article: How Can I Use a DHTML Menu Without All That Code on my Page?
Rate This Article
You must be signed in to rate articles.
