|
EXAMPLE
1) Insert these lines of code at
the top in the
<BODY> section of the page.
2) Insert the following HTML code in the
<BODY> section where you want the rollover menu to appear in the page.
3) Download
this ZIP file with
the dqm_ie.js, dqm_ns.js, dqm_ns6.js, dqm_script.js
and sample_data.js files and unzip into
the appropriate directory. The ZIP includes the rollover images to help you with
the script.
4) Associate each
menu group with the image by changing the index reference within the id=menuX
and name=menuX portion of the statement.
<img src="quickmenu/menu.gif" width="45" height="19"
name="menu0" id="menu0" onmouseover="showMenu(event)"
onmouseout="hideMenu(event)">
<img src="quickmenu/products.gif" width="71" height="19"
name="menu1" id="menu1" onmouseover="showMenu(event)"
onmouseout="hideMenu(event)">
5) Modify or add parameters to customize
your menu in the sample_data.js file:
GENERAL SETTINGS
Copyright notice
DQM_Notice = "DHTML
QuickMenu, Copyright (c) - 2001, OpenCube Inc. - www.opencube.com."
This must be included for the menu to work.
Default sub menu width
DQM_sub_menu_width = 130
Where 130 is the width of each sub menu. To define a sub menu width for a
specific submenu suffix, the param name with the submenus base index.
Specific sub menu width
DQM_sub_menu_width0 = 150
Where 150 is the width of the sub menu. To identify a submenu use the subs base
index, e.g. if the first item in the submenu is index 1_0_0 then the submenus
base index is 1_0.
Codebase folder
DQM_codebase = "quickmenu/"
Where quickmenu/ is the folder location of the JavaScript source files. A value
of "" assumes the location is the same folder.
Onload statement
DQM_onload_statement = ""
The JavaScript statement to execute upon loading the HTML page. This parameter
is offered for a work around to issues arising when attempting to execute
multiple document level 'Onload' statements. If the HTML page containing the menu
has no additional JavaScript code using the 'Onload' event handler, this parameter
may be left blank.
Main menu image rollover
DQM_rollover_image0 = "quickmenu/menu_hl.gif"
The name and location of the image file to be displayed when the image is
highlighted and the associated submenu appears. This image will be rendered to
the same dimensions as its corresponding image within the HTML page.
Main menu image rollover
width and height
DQM_rollover_wh0 = "45,19"
The width and height of the rollover image should match the dimensions of its
associated HTML image.
BORDER SETTINGS
Border color
DQM_border_color = "#000000"
Define all colors in hexadecimal, and enclose in double quotes. For a
transparent border set the value to 'transparent'.
Border width
DQM_border_width = 1
Where 1 is the width of the border which surrounds the sub menus.
Divider height
DQM_divider_height = 1
Where 1 is the height of the divider line which separates sub menus items. The
divider line is rendered in the same color as the border.
SUB MENU DESCRIPTIONS AND FORMATTING
Sub menu descriptions and
associated icons
DQM_subdesc0_0 = "<font color='#000000'>DHTML QuickMenu</font><br>A fully customizable menu
script."
Plain text or HTML formatted sub menu item description.
Icon image ID
DQM_icon_index0_0 = 0
Where the icon id is the index number of the defined icon. See the icon image
section for information on defining icon images.
Font family
DQM_fontfamily = "Verdana"
The font family name, e.g. "Arial", "Verdana", etc...
Font size
DQM_fontsize = 11
Where 11 is the pixel size of the font.
Text decoration
DQM_textdecoration = "normal"
Value = "normal" or "underline".
Highlight text decoration
DQM_hl_textdecoration = "normal"
Value = "normal" or "underline"
Font weight
DQM_fontweight = "normal"
Value = "normal" or "bold".
Font style
DQM_fontstyle = "normal"
Value = "normal" or "italic".
Margin left
DQM_margin_left = 5
Where 5 is the left margin width
Margin top
DQM_margin_top = 3
Where 3 is the top margin height
Margin bottom
DQM_margin_bottom = 3
Where 3 is the bottom margin height
Text color
DQM_textcolor = "#333333"
Define all colors in hexadecimal, and enclose in double quotes.
Highlight text color
DQM_hl_textcolor = "#000000"
Define all colors in hexadecimal, and enclose in double quotes.
Sub item background color
DQM_menu_bgcolor = "#c8c8c1"
Define all colors in hexadecimal, and enclose in double quotes.
Sub item highlight
background color
DQM_hl_bgcolor = "#C2BCA7"
Define all colors in hexadecimal, and enclose in double quotes.
SUB MENU COORDINATE SETTINGS
To specify the coordinates of
a given sub menu, use the submenus base index value (defined with the
"subdesc0_0_0..." - "descN_N_N..." tags), e.g.
"menuxy0" would refer to the first level sub menu,
"menuxy0_1" would refer to the second level submenu which appears as
the mouse passes over the second submenu description of the first images
initial sub menu, etc...
Sub menu X,Y coordinate
DQM_sub_xy = "0,0"
Value = X,Y Where X,Y are the horizontal and vertical coordinates relative to the
top-left corner of the calling image or top-right corner of the calling sub menu
item.
ICON IMAGE SETTINGS
Icon image
DQM_icon_image0 = "quickmenu/bullet.gif"
The name and location of the bullet image. See the DQM_icon_index parameter
under the submenu descriptions section for information on how to associate
icons with submenu items.
Icon highlight image
DQM_icon_rollover0 = "quickmenu/bullet_hl.gif"
The name and location of the highlighted bullet image.
Icon dimensions
DQM_icon_image_wh0 = "13,8"
Value = width, height. Defines the dimensions of the icon image.
URL LINKS
When adding URL links to the main menu images
you must include a hyperlink tag (<a href="http://...") within the
HTML for the document as well as a URL parameter in your sample_data.js
file (url0 = "http://...").
Sub menu item URL link
DQM_url0_0 = "dhtml_menu.html"
The URL link for the sub menu item. URL links may be defined relative or
absolute.
URL targeting
DQM_urltarget = "_self"
Value = "_self", "_parent", "_new", "your frame_name".
6) Define the path to the js files
in the <BODY> section:
<script language="JavaScript1.2"
src="quickmenu/sample_data.js"></script>
<script language="JavaScript1.2" src="quickmenu/dqm_script.js"></script>
For
more information or to purchase the shareware version which supports unlimited
submenu levels and is available as part of the Web
Effects - DHTML package (which includes a vertical scroller and a
popup menu tree), visit OpenCube.com.
|
