javascript menu

Active DHTML Drop Down JavaScript Menu

[ Menu Home] [ Buy Now ] [ Documentation ] [ Examples & Demos ] [ Help & Support ]

Active DHTML Drop Down JavaScript Menu - Quick Start

Adding a Drop Down Menu to your web page involves the following 4 simple steps.

  1. Add the top level Button Images to your Web Page
  2. Add the Script tags to your Web Page
  3. Set up the Menu Configuration data
  4. Upload the files to your web server

In addition to these instructions it is also recommended that you view the examples provided. In particular view the HTML source and configuration files to see how each demo is built. ( view demos here» )

Step 1 - Add the top level Button Images to your Web Page
For each top level button on your menu add the following HTML code to your web page:-

<a href="[LINK]" onMouseOut="SDDM_deactivate(N);" onMouseOver="SDDM_activate(N);">
<img name="SDDM_imageN" id="SDDM_imageN" src="[BUTTONIMAGE]" width="50" height="15" border="0"></a>

replacing N with the number of the button on the menu. (ie. the first button would be 1, the second 2 etc).

replace [LINK] with the url that you would like the button to link to

replace [BUTTONIMAGE] with the URL to the button image file

Also adjust the "width" and "height" settings to match the size of each button image.

For example a menu with four top level buttons would be implemented like this:-

<a href="link1.htm" onMouseOut="SDDM_deactivate(1);" onMouseOver="SDDM_activate(1);">
<img name="SDDM_image1" id="SDDM_image1" src="./images/button1.gif" width="50" height="15" border="0"></a>


<a href="link2.htm" onMouseOut="SDDM_deactivate(2);" onMouseOver="SDDM_activate(2);">
<img name="SDDM_image2" id="SDDM_image2" src="./images/button2.gif" width="50" height="15" border="0"></a>


<a href="link3.htm" onMouseOut="SDDM_deactivate(3);" onMouseOver="SDDM_activate(3);">
<img name="SDDM_image3" id="SDDM_image3" src="./images/button3.gif" width="50" height="15" border="0"></a>


<a href="link4.htm" onMouseOut="SDDM_deactivate(4);" onMouseOver="SDDM_activate(4);">
<img name="SDDM_image4" id="SDDM_image4" src="./images/button4.gif" width="50" height="15" border="0"></a>

 

 

Step 2 - Add the Script tags to your Web Page
Add the code in the text box below to your web page, just below the first <body> tag of your page

 

Step 3 - Set up the Menu Configuration data
Many of the properties of the menu can be altered by adjusting the settings in the configuration file. In addition all the submenu items (text and links) are set in this configuration file.

In the ./examples/ directory of this package you will find a file "SDDM_config.js". Make a copy of this file and open it in your text editor (eg. Notepad, TextPad etc).

The first section of this file define certain global properties of the submenus eg. colors,fonts, indents, spacing etc. The last section is where you define the submenu items and links. Change the properties and settings in this file to provide the menu that you require.

For full information on the effect of each setting please click here»

Step 4 - Upload the files to your web server.
The final step is to upload the following files to your web server placing them in the same directory as your web page:-

SDDM.js
SDDM_ie.js
SDDM_nn.js
SDDM_nn3.js
SDDM_nn6.js
SDDM_spacer.gif

Plus your Configuration file created in step 3.
SDDM_config.js

Copies of these files can be found in the ./examples/ directory of this package.

 
[ Menu Home] [ Buy Now ] [ Documentation ] [ Examples & Demos ] [ Help & Support ]