|
Adding, Editing and Removing Menu Items
Moving Menu Items
Preview
Properties
Top Level Menu Editor
Implementation
Using Your Own Images
Saving To A Sub Directory of Your Web Page
Contact Us
To add a menu item type the name, link and target into the editor window and press "Add". Link and target fields are both optional. If no link is entered and left as "(No URL)" then menu item will not link to any page. If no target is specified then the default will be used as specified in the "Sub Menu Default Target" field of the properties window.
To change the name, link or target of a menu item click on it in the list box, make your changes to the fields and press the "Update" button.
To remove an item click on it in the list box and then press the "Remove" button.
Select menu items in the list box and use the up and down arrows to adjust the order of menu items.
To change the level of a menu item use the right and left arrows.
To update the preview window with the changes you have made to the menu press the "Apply" button in the properties window.
Sub Menu X
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.
Sub Menu Y
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.
Sub Menu Level 2+ X
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 applies to the second level and all levels below the second level.
Parameter Name = CDM_submenu_level2_x
Value = Any integer.
Sub Menu Level 2+ Y
The vertical distance in pixels from the top of the menu relative to the top of it's corresponding menu item. This setting applies to the second level and all levels below the second level.
Parameter Name = CDM_submenu_level2_y
Value = Any integer.
Sub Menu Width
The width in pixels of the sub menus.
Parameter Name = CDM_submenu_width
Value = Any integer.
Sub Menu Border
The thickness in pixels of the sub menus' border.
Parameter Name = CDM_submenu_border
Value = 0 to any positive integer.
Sub Menu 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.
Sub Menu 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.
Sub Menu 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.
Sub Menu 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.
Sub Menu Border Color
The color of the sub menus' border.
Parameter Name = CDM_submenu_border_color
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".
Sub Menu 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".
Sub Menu Background Color
The background color of the sub menus.
Parameter Name = CDM_submenu_background_color
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".
Sub Menu Mouse Over Background 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".
Sub Menu 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".
Sub Menu 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".
Sub Menu Font Color
The text color of the sub menus' items.
Parameter Name = CDM_submenu_font_color
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".
Sub Menu Font Style (Italic)
This setting is if you want an italic font.
Parameter Name = CDM_submenu_font_style.
Value = "italic" | "normal".
Sub Menu 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".
Sub Menu Text Decoration (Underlined)
This setting is if you want underlined text.
Parameter Name = CDM_submenu_text_decoraction
Value = "underline" | "normal" | "blink" | "line-through" | "overline". Navigator 4 does not observe the overline value.
Sub Menu 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".
Sub Menu Mouse Over 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".
Sub Menu 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".
Sub Menu Default 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.
The top level menu items are images. The top level menu editor allows you to adjust font, color, size and effect settings. When the menu is saved the images will be saved to the directory where you choose to save the menu. The HTML needed to display those images will be automatically generated so that you can copy and paste it into your web page. Click File menu then Get HTML Code to get that code.
1. Save the menu to the same directory as the web page you want to use the menu in. Along with the configuration file and cdm.js and image files will be saved to the same directory.
2. Under the file menu click Get HTML Code and follow the instructions on the form displayed.
The simplest and quickest way to implement a menu is to use the images created by the Top Level Menu Editor but if you require a certain style of image then you can use a graphics program to create your own images (.gif, .jpg or .png). If you do this then you can delete the .png files created by the Menu Creator. You will need to change the file names in src attributes of the <img> tags in the HTML code to match your files. You will also need to change the file names of the CDM_image#_src and CDM_image#_highlight_src parameters in the configuration.
If you want to keep the menu files in a sub directory to your web page for example /dhtmlmenu/ then you will need to edit the scr attributes of the <script> and <img> tags in the HTML code. Also in the configuration file the image, icon and arrow parameters will need the additional directory information. An example of these lines of code is shown below with what needs to be added in blue.
HTML Code
<script language="JavaScript1.2" src="dhtmlmenu/cdm_example.js"></script>
<script language="JavaScript1.2" src="dhtmlmenu/cdm.js"></script>
<img name="CDM_image1" onmouseover="activate(1);" onmouseout="deactivate(1)" src="dhtmlmenu/Home.gif" width="50" height="15" border="0"><img
name="CDM_image2" onmouseover="activate(2);" onmouseout="deactivate(2)" src="dhtmlmenu/Products.gif" width="80" height="15" border="0"><img
name="CDM_image3" onmouseover="activate(3);" onmouseout="deactivate(3)" src="dhtmlmenu/Contact.gif" width="70" height="15" border="0"><img
name="CDM_image4" onmouseover="activate(4);" onmouseout="deactivate(4)" src="dhtmlmenu/Help.gif" width="50" height="15" border="0">
Configuration File
CDM_image1_src = "dhtmlmenu/Home.gif"
CDM_image2_src = "dhtmlmenu/Products.gif"
CDM_image3_src = "dhtmlmenu/Contact.gif"
CDM_image4_src = "dhtmlmenu/Help.gif"
CDM_image1_highlight_src = "dhtmlmenu/Home_hl.gif"
CDM_image2_highlight_src = "dhtmlmenu/Products_hl.gif"
CDM_image3_highlight_src = "dhtmlmenu/Contact_hl.gif"
CDM_image4_highlight_src = "dhtmlmenu/Help_hl.gif"
CDM_submenu_icon = " dhtmlmenu/icon.gif"
CDM_submenu_hl_icon = "dhtmlmenu/icon_hl.gif"
CDM_submenu_arrow = "dhtmlmenu/arrow.gif"
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