Sirius DHTML Drop Down Menu Documentation

Start Here
Parameter Reference
Contact Us

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 with in anchor tags (<a>). For example the code shown below will generate the top level menu for the example provided in example.htm. In the href attributes replace the hash (#) with your desired links.

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

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

onMouseOut="SDDM_deactivate(1);" onMouseOver="SDDM_activate(1);"

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

name="SDDM_image1" id="SDDM_image1"

The code in the example looks like this.

<a href="#" onMouseOut="SDDM_deactivate(1);" onMouseOver="SDDM_activate(1);"><img name="SDDM_image1" id="SDDM_image1" src="example_images/Home.gif" width="50" height="15" border="0"></a><a
   href="#" onMouseOut="SDDM_deactivate(2);" onMouseOver="SDDM_activate(2);"><img name="SDDM_image2" id="SDDM_image2" src="example_images/Products.gif" width="80" height="15" border="0"></a><a
   href="#" onMouseOut="SDDM_deactivate(3);" onMouseOver="SDDM_activate(3);"><img name="SDDM_image3" id="SDDM_image3" src="example_images/Contact.gif"  width="70" height="15" border="0"></a><a
   href="#" onMouseOut="SDDM_deactivate(4);" onMouseOver="SDDM_activate(4);"><img name="SDDM_image4" id="SDDM_image4" src="example_images/Help.gif"     width="50" height="15" border="0"></a>

4. Copy these files to the same directory as your HTML file:- SDDM.js SDDM_ie.js SDDM_nn.js SDDM_nn3.js SDDM_nn6.js SDDM_spacer.gif SDDM_example.js

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

6. 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="SDDM_example.js"></script>
<script language="JavaScript1.2" src="SDDM.js"></script>

7. 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 (SDDM_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 = SDDM_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 = SDDM_imageX_highlight_src where X is the order of the image starting at 1.
Value = Any image file name.

General Submenu 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 = SDDM_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 = SDDM_submenu_y
Value = Any integer.

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

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

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

Submenu Item Indent
The distance in pixels between the left hand side of the menu and the beginning of the text.
Parameter Name = SDDM_submenu_item_indent.
Value = 0 to any positive integer.

Submenu Item Height
The height in pixels of each of the sub menus' items.
Parameter Name = SDDM_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 = SDDM_submenu_item_spacing.
Value = 0 to any positive integer.

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 = SDDM_submenu_item_spacing_color.
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".

Submenu Background Color
The background color of the sub menus.
Parameter Name = SDDM_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 = SDDM_submenu_highlight_color.
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".

Submenu Font Face
The font face of the sub menus' items.
Parameter Name = SDDM_submenu_font_face.
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 = SDDM_submenu_font_size.
Value = 1 to 7.

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

Submenu Font Highlight Color
The text color of the sub menus' items when mouse is over. NOTE: In Netscape 4 the text will not change color when the mouse is over.
Parameter Name = SDDM_submenu_font_highlight_color.
Value = Hexadecimal ranging from "#000000" to "#FFFFFF".

Submenu URL Target
The target frame you want the menus links to use.
Parameter Name = SDDM_submenu_url_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 = SDDM_hide_delay.
Value = 0 to any positive integer.

Submenu Items

Submenu Text
The text displayed in a sub menus item.
Parameter Name = SDDM_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.
Value = Any text.

Submenu Link
The url the sub menus item should to link to.
Parameter Name =SDDM_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.

Contact Us