For a quick start on customizing your menu
open the file 'sample_settings.js' in a text editor (located in the 'quickmenu_pro'
folder). This file contains all the customizable parameters for the menu plus additional
documentation. After modifying and adding parameters open 'sample.htm' (located in the
'quickmenu_pro' folder) in a browser to view the changes.
After customizing the QuickMenu to your
specifications using the sample_settings.js file, the menu may be attached to any number
of image tags within a web page, to do this follow the steps below.
1. First move the QuickMenu
JavaScript code files (dqm_ie.js, dqm_ns.js, dqm_ns6.js, dqm_opera.js, dqm_opera7,
dqm_ee, dqm_ice, dqm_konq.js, dqm_loader.js) plus the data file ('sample_settings.js'
- this file may be renamed, but must include the '.js' extension) to any one folder within
your web site. If the folder location of these files is different than the location of the
HTML page to contain the menu then the 'dqm_codebase' parameter will have to be modified.
The 'dqm_codebase' parameter is located in the first section of the statement which must
be pasted after the HTML pages body tag. (leave the codebase parameter blank if the script
files are located in the same folder as the HTML page)
2. To connect the data file
and menu code with your HTML page add a reference to the files within your HTML page.
To do this copy and paste the following script pointers directly after your HTML
pages opening body tag. (these script pointers must be the first tags to appear after the
body tag or the menu may not function correctly). If you renamed your data file, the new
name must be indicated within the first script pointer below (see red highlighted text).
If the script files are located in a different folder, the two script pointers below (last
two lines of statement) must also reference the correct folder locations as well.
<!-- QuickMenu Pro, Copyright (c)
1998-2003, OpenCube Inc., All Rights Reserved.
Visit www.opencube.com for current QuickMenu Pro downloads and information. -->
<script language="JavaScript1.2">dqm__codebase = "" //script
folder location</script>
<script language="JavaScript1.2" src="sample_settings.js"></script>
<script language="JavaScript1.2"
src="dqm_loader.js"></script>
4. Finally attach each sub
menu group to any image(s) on your HTML page by pasting a simple statement within the
images tag (statement show below in blue). Within each image tags statement adjust the two
index numbers to indicate the index number of the first level sub menu to be associated
with the image (see red highlighted text). The sample statement below uses the first
sub menu groups top level index of '0', the second groups top level index is '1', and so
on... Note: both the 'name' and 'id' values must reference the same sub menu index, this
redundancy is required for complete cross browser functionality.
<img
src="sample_images/quickmenu.gif" width="75" height="22" name="menu0"
id="menu0"
onmouseover="showMenu(event)" onmouseout="hideMenu(event)">
The following tables reference all the customizable parameters, allowable values,
and comments regarding their use. For additional parameter documentation open the
'sample_settings.js' file (located in the 'quickmenu_pro' folder) in a text editor. For
common design time questions and answers see the QuickMenu Pro FAQ.
| Parameter Name |
Value |
Comments |
| dqm__sub_menu_width |
Integer > 0 |
Default Sub menu
width for all sub menus, measured in screen pixels. See the next parameter for specific
sub menu width settings. |
| dqm__sub_menu_widthX |
Integer > 0 |
Indexed version
of above parameter. Change X to reference the index number of any sub menu group. This
parameter overrides the above default setting for the specific sub menu. |
| dqm__sub_xy |
"x,y" |
X and Y
coordinates of the upper left corner of all sub menus relative to its associated main menu
image, or parent sub menu. Enclose all x,y values in double quotes. |
| dqm__sub_xyX |
"x,y" |
X and Y
coordinate of a specific sub menu. Change X to reference the index number of any sub menu
group. This parameter overrides the above default setting for the specific sub menu. |
|
 |
| Parameter Name |
Value |
Comments |
| dqm__border_width |
Integer > -1 |
Default border
thickness for all sub menus, measured in screen pixels. |
| dqm__border_widthX |
Integer > -1 |
Indexed version
of above parameter. Change X to reference the index number of any sub menu group. This
parameter overrides the above default setting for the specific sub menu. |
| dqm__divider_height |
Integer > -1 |
Default divider
height for all sub menus, measured in screen pixels. |
| dqm__divider_heightX |
Integer > -1 |
Indexed version
of above parameter. Change X to reference the index number of any sub menu group. This
parameter overrides the above default setting for the specific sub menu. |
| dqm__menu_bgcolor |
"#000000"
- "#FFFFFF" - Hex Color Value |
Default sub menu
background color for all sub menus. Precede all hexadecimal color values with a pound sign
and enclose in double quotes. |
| dqm__menu_bgcolorX |
"#000000"
- "#FFFFFF" - Hex Color Value |
Indexed version
of above parameter. Change X to reference the index number of any sub menu group. This
parameter overrides the above default setting for the specific sub menu. |
| dqm__border_color |
"#000000"
- "#FFFFFF" - Hex Color Value or "transparent" |
Default sub menu
border and divider color, optionally may be set to "transparent. |
| dqm__border_colorX |
"#000000"
- "#FFFFFF" - Hex Color Value or "transparent" |
Indexed version
of above parameter. Change X to reference the index number of any sub menu group. This
parameter overrides the above default setting for the specific sub menu. |
| dqm__hl_bgcolor |
"#000000"
- "#FFFFFF" - Hex Color Value |
Default sub menu
highlight color, this setting determines the color each sub menu items background will
change to as the mouse highlights the item. Set this value to the same color as the
background of the menu to turn off the effect. |
| dqm__hl_bgcolorX |
"#000000"
- "#FFFFFF" - Hex Color Value |
Indexed version
of above parameter. Change X to reference the index number of any sub menu group. This
parameter overrides the above default setting for the specific sub menu. |
|
|
| Parameter
Name |
Value |
Comments |
| dqm__textcolor |
"#000000"
- "#FFFFFF" - Hex Color Value |
Default sub menu
text color. Note: A specific sub menu items text color may be overridden by using an HTML
font tag in the 'dqm__subdesc' parameter for the item. |
| dqm__textcolorX |
"#000000"
- "#FFFFFF" - Hex Color Value |
Indexed version
of above parameter. Change X to reference the index number of any sub menu group. This
parameter overrides the above default setting for the specific sub menu. |
| dqm__hl_textcolor |
"#000000"
- "#FFFFFF" - Hex Color Value |
Default sub menu
highlight text color. Note a specific sub menu items highlight text color may be
overridden by using an HTML font tag in the 'dqm__hl_subdesc' parameter for the item. |
| dqm__hl_textcolorX |
"#000000"
- "#FFFFFF" - Hex Color Value |
Indexed version
of above parameter. Change X to reference the index number of any sub menu group. This
parameter overrides the above default setting for the specific sub menu. |
| dqm__hl_textdecoration |
"normal"
or "underline" |
Highlight text
decoration effect for all sub menu item. |
| dqm__fontfamily |
System Font |
Font family
setting for all sub menus. Note: A specific font family may be used for any sub menu item
by using and HTML font tag in the 'dqm__subdesc' parameter for the item. |
| dqm__fontsize |
Integer > 0 |
The pixel size of
the font for all sub menus. Note: A specific font size may be used for any sub menu item
by using and HTML font tag in the 'dqm__subdesc' parameter for the item. |
| dqm__fontsize_ie4 |
Integer > 0 |
The point size of
the font for the Internet Explorer Version 4.x browser only. This parameter is offered as
work-around to bugs in IE4 which do not allow for pixel sizing of fonts. |
| dqm__textdecoration |
"normal"
or "underline" |
The text
decoration setting for all sub menus. Note: Using an HTML underline
tag within the 'dqm__subdesc' parameter will allow for the specific underlining of sub
menu items. |
| dqm__fontweight |
"normal or
"bold" |
The font weight
setting for all sub menus. Note: Using an HTML bold tag within the 'dqm__subdesc'
parameter will allow for the specific bolding of sub menu items. |
| dqm__fontstyle |
"normal"
or "italic" |
The font style
setting for all sub menus. Note: Using an HTML italic tag within the 'dqm__subdesc'
parameter will allow for the specific italicizing of sub menu items. |
|
|
| Parameter
Name |
Value |
Comments |
| dqm__margin_top |
Integer > -1 |
Top margin for
all sub menus. This margin space exists for each sub menu item, adjust to customize the
gap between sub menu text items. |
| dqm__margin_bottom |
Integer > -1 |
Bottom margin for
all sub menus. This margin space exists for each sub menu item, adjust to customize the
gap between sub menu text items. |
| dqm__margin_left |
Integer > -1 |
Left margin space
for all sub menus, measured in screen pixels. |
| dqm__margin_right |
Integer > -1 |
Right margin
space for all sub menus, measured in screen pixels. |
| dqm__text_alignment |
"left",
"center", or "right" |
Default text alignment for all sub menu
items. |
| dqm__text_alignmentX |
"left",
"center", or "right" |
Indexed version
of above parameter. Change X to reference the index number of any sub menu group. This
parameter overrides the above default setting for the specific sub menu. |
|
|
| Parameter Name |
Value |
Comments |
| dqm__icon_imageX |
Folder and file
name of GIF or JPEG image file. |
Relative
positioned icon image to be associated with any sub menu item using the 'dqm__icon_indexX'
parameter. All indexing starts at 0 and an unlimited number of relative positioned icon
images may be defined. For further information regarding this parameter see the
'sample_data.js' file located in the quickmenu_pro folder. |
| dqm__icon_rolloverX |
Folder and file
name of GIF or JPEG image file. |
Rollover icon
image to appear as the mouse moves over the sub menu item. This parameter must be
included, however the rollover image may turned off by setting the value to the same image
as the above parameter. |
| dqm__icon_image_whX |
"x,y" |
Defines the
dimensions of the above icon and icon rollover image. |
| dqm__2nd_icon_imageX |
Folder and file
name of GIF or JPEG image file. |
Absolute
positioned icon image to be associated with any sub menu item using the
'dqm__2nd_icon_indexX' parameter. All indexing starts at 0 and an unlimited number of
absolute positioned icon images may be defined. For further information regarding this
parameter see the 'sample_data.js' file located in the quickmenu_pro folder. |
| dqm__2nd_icon_rolloverX |
Folder and file
name of GIF or JPEG image file. |
Rollover icon
image to appear as the mouse moves over the sub menu item. This parameter must be
included, however the rollover image may turned off by setting the value to the same image
as the above parameter. |
| dqm__2nd_icon_image_whX |
"x,y" |
Defines the
dimensions of the above icon and icon rollover image. |
| dqm__2nd_icon_image_xyX |
"x,y" |
Defines the
coordinates of the icon image relative to the top right corner of each sub menu item or
top left corner depending on the text alignment of the item. |
|
|
| Parameter Name |
Value |
Comments |
| dqm__rollover_imageX |
Folder and file
name of GIF or JPEG image file. |
Defines the
rollover image to appear as the mouse moves over the HTML image on the page. The indexed
value must correspond to the set index value of the HTML image. This parameter is
optional. |
| dqm__rollover_whX |
"x,y" |
Defines the
dimensions of the above rollover image. |
| dqm__urlX |
URL |
The URL link for
the main menu image may be defined relative or absolute. |
| dqm__urltargetX |
"_self",
"_parent", "_new", or "my frame name" |
"_self"
- Open link in same browser window. "_parent" - Open link in same browser window
outside of frame set. "_new" - Open link in new window. "my frame
name" - Set the value to the name of a frame to target. |
|
|
| Parameter
Name |
Value |
Comments |
| dqm__subdescX |
Text or HTML |
This parameter
determines the entire tree structure for the menu system. The indexing starts at 0_0 and
may be branched indefinitely by appending '_X' values. See the 'sample_data.js' file in
the 'quickmenu_pro' folder for an example of how to index your items. If using HTML in the
item replace all double quotes with single quotes and keep to one line, surround all
values with double quotes. |
| dqm__hl_subdescX |
Text or HTML |
Highlight text or
HTML to appear as the mouse moves over the sub menu item. If this parameter is not used
the text will remain the same when the item is highlighted. |
| dqm__icon_indexX |
Index number of
associated relative positioned icon image. |
See the relative
and absolute positioned icon image section for more information on setting up icon images.
The value of this parameter should be set to the desired index number of the predefined
icon image set up using the 'dqm__icon_imageX' parameter. |
| dqm__2nd_icon_indexX |
Index number of
associated absolute positioned icon image. |
See the relative
and absolute positioned icon image section for more information on setting up icon images.
The value of this parameter should be set to the desired index number of the predefined
icon image set up using the 'dqm__2nd_icon_imageX' parameter. |
| dqm__urlX |
URL |
The URL link for
the sub menu item may be defined relative or absolute. |
| dqm__urltargetX |
"_self",
"_parent", "_new", or "my frame name" |
"_self"
- Open link in same browser window. "_parent" - Open link in same browser window
outside of frame set. "_new" - Open link in new window. "my frame
name" - Set the value to the name of a frame to target. |
|
|
| Parameter
Name |
Value |
Comments |
| dqm__mouse_off_delay |
Integer > -1 |
Mouse off delay
timing is defined in milliseconds (1/1000s). This parameter determines the delay between
the mouse leaving a sub menu item and the sub menu actually closing. |
| dqm__show_urls_statusbar |
true or false |
Determines if sub
menu and main menu URL links are displayed in the status bar of the browser. |
| dqm__status_textX |
Text Value |
Associate this
parameters index with any sub menu item or main menu item. If the above parameter is set
to 'true' the custom text will be displayed in place of the items URL. |
|
|
| Parameter
Name |
Value |
Comments |
| dqm__sub_menu_effect |
none | fade |
pixelate | iris | slide | gradientwipe | checkerboard | radialwipe | randombars |
randomdissolve| stretch |
The selected
transition effect applies to all sub menus and is triggered as a sub menu is displayed.
Transition effects function in IE 5.5 & up, all non supporting browsers ignore
transition effect setting and display the sub menus in normal mode. |
| dqm__sub_item_effect |
none | fade |
pixelate | iris | slide | gradientwipe | checkerboard | radialwipe | randombars |
randomdissolve| stretch |
The selected
transition effect applies to all sub menu items and is triggered as a sub menu item is
highlighted. Transition effects function in IE 5.5 & up, all non supporting browsers
ignore transition effect setting and display the sub menu items with a normal highlight
effect. |
| dqm__sub_menu_effect_duration |
Seconds |
The duration of
the effect may be defined in fractions of a second using a decimal place. (.5 = 1/2
second) |
| dqm__sub_item_effect_duration |
Seconds |
The duration of
the effect may be defined in fractions of a second using a decimal place. (.5 = 1/2
second) |
| dqm__effect_pixelate_maxsquare |
Integer > 0 |
The maximum
number of squares to use for the pixelate effect. |
| dqm__effect_iris_irisstyle |
CROSS | CIRCLE |
PLUS | SQUARE | STAR |
The shape to use
with the iris effect. |
| dqm__effect_checkerboard_squaresX |
Integer > 0 |
Number of squares
to run horizontally with the checkerboard effect. |
| dqm__effect_checkerboard_squaresY |
Integer > 0 |
Number of squares
to run vertically with the checkerboard effect. |
| dqm__effect_checkerboard_direction |
UP | DOWN | LEFT
| RIGHT |
Direction of
movement for the checkerboard effect. |
| dqm__sub_menu_opacity |
Integer 1 - 100 |
Determines the
opacity of the sub menu for Internet Explorer only. A value of 100 creates fully opaque
sub menus. |
| dqm__dropshadow_color |
"#000000"
- "#FFFFFF" - Hex Color Value or "none" |
Determines the
drop shadow color for all sub menus, Internet Explorer 5.5 & up only. |
| dqm__dropshadow_offx |
Integer > 0 |
The x offset
width of the drop shadow effect. |
| dqm__dropshadow_offy |
Integer > 0 |
The Y offset
width of the drop shadow effect. |
|
|
| Parameter
Name |
Value |
Comments |
| dqm__onload_code |
Code or Function
Name |
This menu uses
the documents onload event to initially generate the menus. If your HTML page
requires the onload statement for calling other script functions or statements you may
execute your code using this parameter |
| dqm__showmenu_codeX |
Code or Function
Name |
The showmenu and
following hidemenu parameters may be used to execute custom code upon menu pop-up and
hide. These parameters are useful for hiding drop down boxes which may not be displayed
underneath the menus due to browser limitations with certain form fields. Set the index of
the parameter to identify any defined sub menu. |
| dqm__hidemenu_codeX |
Code or Function
Name |
Executes set code
or function upon menu close. Set the index of the parameter to identify any defined sub
menu. |
| dqm__clickitem_codeX |
Code or Function
Name |
This parameter
option may be used to execute custom code upon clicking a menu item. If a URL link and
custom code are both defined the code will be executed first, then the URL link will be
loaded. This parameter option is useful for opening custom pop up windows. |
|
|
| Parameter
Name |
Value |
Comments |
| dqm__codebase |
Folder location
of all script and data files. |
Set the codebase
value to the relative folder location of the QuickMenu script files (.js). This location
must be set relative to the HTML page versus the data file. |
| dqm__os9_ie5mac_offset_X |
Negative or
Positive Value |
This parameter
fixes a position reporting bug in IE5 on the Mac OS9 platform. Adjust the horizontal X
offset value until the first level sub menus pop-up in the correct location. |
| dqm__os9_ie5mac_offset_Y |
Negative or
Positive Value |
This parameter
fixes a position reporting bug in IE5 on the Mac OS9 platform. Adjust the vertical Y
offset value until the first level sub menus pop-up in the correct location. |
| dqm__osx_ie5mac_offset_X |
Negative or
Positive Value |
This parameter
fixes a position reporting bug in IE5 on the Mac OSX platform. Adjust the horizontal X
offset value until the first level sub menus pop-up in the correct location. |
| dqm__osx_ie5mac_offset_Y |
Negative or
Positive Value |
This parameter
fixes a position reporting bug in IE5 on the Mac OSX platform. Adjust the vertical Y
offset value until the first level sub menus pop-up in the correct location. |
| dqm__ie4mac_offset_X |
Negative or
Positive Value |
This parameter
fixes a position reporting bug in IE4 on the Mac OS9 platform. Adjust the horizontal X
offset value until the first level sub menus pop-up in the correct location. |
| dqm__ie4mac_offset_Y |
Negative or
Positive Value |
This parameter
fixes a position reporting bug in IE4 on the Mac OS9 platform. Adjust the vertical Y
offset value until the first level sub menus pop-up in the correct location. |
| dqm__nn4_reload_after_resize |
true or false |
Bugs in Netscape
4.x can cause layers (sub menus) to be rendered incorrectly upon resizing the browser
window. The only way to work around this issue is to reload the page after a resize.
This and the following parameters allow the menu to automatically reload the page for the
user after a resize, prompts the user to reload the page manually after a resize, or
attempts to correct the menu after a resize without reloading. |
| dqm__nn4_resize_prompt_user |
true or false |
Optionally prompt
the user to reload the page or automatically reload the page. The user will only be
prompted or the page automatically reloaded if the mouse is placed over the menu after a
resize. |
| dqm__nn4_resize_prompt_message |
Text Message |
The custom
message to appear prompting the user to reload the page after a resize event has occurred
in Netscape 4.x. Only applicable if the 'dqm__nn4_resize_prompt_user' parameter is set
equal to 'true'. |
|
|
Documentation
Index