DHTML Menu Documentation

Start Here
Parameter Reference
Contact Us
Visit Our Website
Ordering - Buy Now! ($25)

Start Here

The next few steps will guide you through implementing and customizing the drop down menu. You can use the example as a reference if you are unsure what to do at any point.

1. To begin you will need to add your images for the top level menu to your web page. For example the code shown below will generate the top level menu for the example provided in example.htm.

<img src="example_images/Home.gif"     width="50" height="15" border="0"><img
     src="example_images/Products.gif" width="80" height="15" border="0"><img
     src="example_images/Contact.gif"  width="70" height="15" border="0"><img
     src="example_images/Help.gif"     width="50" height="15" border="0">

If you want links on the top level images surround them in <a> tags. For example,

<a href="your_link_here"><img src="example_images/Home.gif" width="50" height="15" border="0"></a>

2. Add the code shown below to each image tag (<img>). Change the numbers highlighted in red to match the order of the image.

name="CDM_image1" onmouseover="activate(1);" onmouseout="deactivate(1)"

The code in the example looks like this.

<img name="CDM_image1" onmouseover="activate(1);" onmouseout="deactivate(1)" src="example_images/Home.gif"     width="50" height="15" border="0"><img
     name="CDM_image2" onmouseover="activate(2);" onmouseout="deactivate(2)" src="example_images/Products.gif" width="80" height="15" border="0"><img
     name="CDM_image3" onmouseover="activate(3);" onmouseout="deactivate(3)" src="example_images/Contact.gif"  width="70" height="15" border="0"><img
     name="CDM_image4" onmouseover="activate(4);" onmouseout="deactivate(4)" src="example_images/Help.gif"     width="50" height="15" border="0">

3. Copy these files to the same directory as your HTML file:- cdm.js cdm_ie.js cdm_nn.js cdm_nn6.js cdm_spacer.gif cdm_example.js

4. Rename the new copy of the configuration file CDM_example.js to what ever you want with a .js extension.

5. Add this code just below the <body> tag in your HTML page. Change the file name highlighted in red to match your configuration file name.
<script language="JavaScript1.2" src="cdm_example.js"></script>
<script language="JavaScript1.2" src="cdm.js"></script>

6. Open your configuration file in a text editor and change the parameters where required. For help with this see the next section Parameter Reference.

Parameter Reference

The drop down menu parameters are defined in the configuration file. All parameters must start on a new line. For each parameter the parameter name is specified first followed by an equals sign then followed by the value. Values are generally put inside quotes with the exception of numerical values. It is recommended that you copy the existing example configuration file (cdm_example.js) and alter it where required rather than writing a configuration file from scratch.

Top Level Images

Image
The image displayed on top level menu.
Parameter Name = CDM_imageX_src where X is the order of the image starting at 1.
Value = Any image file name.

Image Rollover
The image displayed on top level menu when mouse is over.
Parameter Name = CDM_imageX_highlight_src where X is the order of the image starting at 1.
Value = Any image file name.

Size and Position Settings

Submenu X Position
The horizontal distance in pixels from the left hand side of the menu relative to the left hand side of it's corresponding image.
Parameter Name = CDM_submenu_x
Value = Any integer.

Submenu Y Position
The vertical distance in pixels from the top of the menu relative to the top of it's corresponding image.
Parameter Name = CDM_submenu_y
Value = Any integer.

Second Level Submenu X Position
The horizontal distance in pixels from the left hand side of the menu relative to the left hand side of it's corresponding menu item. This setting applys to the second level and all levels below the second level.
Parameter Name = CDM_submenu_level2_x
Value = Any integer.

Second Level Submenu Y Position
The vertical distance in pixels from the top of the menu relative to the top of it's corresponding menu item. This setting applys to the second level and all levels below the second level.
Parameter Name = CDM_submenu_level2_y
Value = Any integer.

Submenu Width
The width in pixels of the sub menus.
Parameter Name = CDM_submenu_width
Value = Any integer.

Submenu Border
The thickness in pixels of the sub menus' border.
Parameter Name = CDM_submenu_border
Value = 0 to any positive integer.

Submenu Icon Indent
The distance in pixels between the left hand side of the menu and the left hand side of the icon.
Parameter Name = CDM_submenu_icon_indent.
Value = 0 to any positive integer.

Submenu Text Indent
The distance in pixels between the right hand side of the icon and the beginning of the text.
Parameter Name = CDM_submenu_text_indent.
Value = 0 to any positive integer.

Submenu Item Height
The height in pixels of each of the sub menus' items.
Parameter Name = CDM_submenu_item_height.
Value = 0 to any positive integer.

Submenu Item Spacing
The gap in pixels between each of the sub menus' items.
Parameter Name = CDM_submenu_item_spacing.
Value = 0 to any positive integer.

Color Settings

Submenu Border Color
The color of the sub menus' border.
Parameter Name = CDM_submenu_border_color
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".

Submenu Item Spacing Color
The color of the gap between each of the sub menus' items. This parameter is irrelevant if the previous parameter is set to 0.
Parameter Name = CDM_submenu_item_spacing_color.
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".

Submenu Background Color
The background color of the sub menus.
Parameter Name = CDM_submenu_background_color.
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".

Submenu Highlight Color
The background color of the sub menus' items when mouse is over.
Parameter Name = CDM_submenu_hl_color.
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".

Font Settings

Submenu Font Family
The font face of the sub menus' items.
Parameter Name = CDM_submenu_font_family.
Value = Any font names. The value can be any thing that is acceptable with in the face attribute of a HTML font tag. Some common values would be "Arial, Helvetica, sans-serif" "Times New Roman, Times, serif" "Courier New, Courier, mono" "Georgia, Times New Roman, Times, serif" "Verdana, Arial, Helvetica, sans-serif".

Submenu Font Size
The font size of the sub menus' items.
Parameter Name = CDM_submenu_font_size.
Value = Any point size followed by the letters pt. e.g. "10pt".

Submenu Font Color
The text color of the sub menus' items.
Parameter Name = CDM_submenu_font_color.
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".

Submenu Font Style (Italic)
This setting is if you want an italic font.
Parameter Name = CDM_submenu_font_style.
Value = "italic" | "normal".

Submenu Font Weight (Bold)
This setting is if you want a bold font.
Parameter Name = CDM_submenu_font_weight.
Value = "bold" | "bolder" | "lighter" | "normal" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900".

Submenu Text Decoration (Underlined)
This setting is if you want underlined text.
Parameter Name = CDM_submenu_text_decoraction.
Value = "underlinded" | "normal" | "blink" | "line-through" | "overline". Navigator 4 does not observe the overline value.

Miscellaneous Settings

Submenu Icon Image
The icon to be displayed in the menu items.
Parameter Name = CDM_submenu_icon.
Value = A URL pointing to the image e.g. "example_images/icon.gif". If you do not want an Icon set it to "CDM_spacer.gif".

Submenu Highlight Icon Image
The icon to be displayed in the menu items when mouse is over.
Parameter Name = CDM_submenu_hl_icon.
Value = A URL pointing to the image e.g. "example_images/icon_hl.gif". If you do not want an Icon set it to "CDM_spacer.gif".

Submenu Arrow Image
A small arrow image to be displayed in the right hand side of the menu items to indicate that a menu item has a submenu.
Parameter Name = CDM_submenu_arrow.
Value = A URL pointing to the image e.g. "example_images/arrow.gif". If you do not want an arrow set it to "null".

Submenu URL Target
The default target frame you want the menu's links to use.
Parameter Name = CDM_submenu_target.
Value = Any target frame or some other common values "_blank" "_parent" "_self" "_top".

Hide Delay
The time gap in milliseconds from when the mouse leaves a menu item to the menu resetting it's self. It is not a good idea to set this too low (i.e. 100 or less) because the menu will reset it's self when the user moves the mouse pointer from an image to the sub menu.
Parameter Name = CDM_hide_delay.
Value = 0 to any positive integer. Anything in the range of 200 to 1000 is a sensible value

Submenu Items

Submenu Text
The text displayed in a sub menu's item.
Parameter Name = CDM_submenuX_Y_text where X is the order of the subemenu starting at 1 and where Y is the position of the item in the submenu starting at 1. For secondary level submenus you can branch "_z" parameters (i.e. CDM_submenuX_Y_Z_text for 2nd level). You can go as many levels deep as you like. See the example configuration file.
Value = Any text.

Submenu Link
The url the sub menu's item should to link to.
Parameter Name = CDM_submenuX_Y_link where X is the order of the subemenu starting at 1 and where Y is the position of the item in the submenu starting at 1.
Value = Any url.

Submenu Link Target (Optional)
The target frame you want the menu item to link to use. You only need to use this parameter if you want a particular item to have a different target from that of the default.
Parameter Name =CDM_submenuX_Y_target where X is the order of the subemenu starting at 1 and where Y is the position of the item in the submenu starting at 1.
Value = Any target frame or some other common values "_blank" "_parent" "_self" "_top".

Contact Us

If you have a problem with the drop down menu that you can not find an answer to in the documentation or if the documentation is unclear at any point then please send an email to chris@dhtmlmedia.com

Visit The Website

You can visit our web site at http://www.dhtmlmedia.com/dhtmlmenu/index.htm

Ordering

To buy the fully licensed version of this menu system please click here to visit our order page. Upon purchase you will be able to download the software immediately. Buy Now! ($25)

Contents