|
home / docs / archive / version 4 / instructions / step 4
V4 Setup Instructions
Step 4 of 6
| Return to Step 3 | Step 4 of 6 | Go to Step 5 | | Define your menu arrays in an external file called HM_Arrays.js, remembering that top-level menu arrays have 21 configuration parameters in their first element. |
|
You must create an external JavaScript file that defines the content and behavior of your
specific menus. This file, HM_Arrays.js, contains no functions, just
a series of JavaScript arrays, the most convenient way to group information to be used later.
The Version 4 array structure has been discussed in great detail in these columns:
column 35, column 36,
and column 38.
In Short:
- Every menu is defined by an array.
- Menu trees are defined by a group of menu arrays that follow a naming convention.
- All menu arrays, whether top-level or child menus, begin with an element that
contains customization parameters specific to that menu or menu tree. At this time,
only top level menus have parameters that can be used within this element; the
child menu customization element is blank (and is reserved for future child-menu
specific enhancements). The customization element for top-level menus can optionally
contain 21 configuration parameters, separated by commas.
- Menu item elements, which follow the customization element in both top level
and child menus, contain 5 parameters, separated by commas.
In Detail:
| Sample HM_Arrays.js file | | Notes |
|---|
HM_Array1 = [
[100, // menu_width
"HM_f_CenterMenu('HM_Menu1')", // left_position
90, // top_position
"red", // font_color
"yellow", // mouseover_font_color
"yellow", // background_color
"black", // mouseover_background_color
"blue", // border_color
"green", // separator_color
1, // top_is_permanent
1, // top_is_horizontal
0, // tree_is_horizontal
1, // position_under
1, // top_more_images_visible
1, // tree_more_images_visible
"null", // evaluate_upon_tree_show
"null", // evaluate_upon_tree_hide
, // right_to_left
1, // display_on_click
true, // top_is_variable_width
false], // tree_is_variable_width
["Experts","/experts/",1,0,1],
["Contents","/index2.html",1,0,0],
["Services","/index2.html",1,0,0],
["About","http://webref.com/about.html",1,0,0]
]
HM_Array1_1 = [
[],
["3-D Animation","/3d/",1,0,0],
["Design","/dlab/",1,0,0],
["HTML","http://webref.com/html/",1,0,0],
["JavaScript","/js/",1,0,0],
["Graphics","/graphics/",1,0,0],
["DHTML","http://www.webreference.com/dhtml/",1,0,1],
["Perl","/perl/",1,0,0],
["XML","http://webref.com/xml/",1,0,0]
]
HM_Array1_1_6 = [
[],
["Diner","http://www.webreference.com/dhtml/diner/",1,0,0],
["Dynomat","http://webref.com/dhtml/dynomat/",1,0,0],
["Links","http://www.webreference.com/dhtml/links/",1,0,0]
]
|  |
Arrays for the first menu tree.
This tree has three menu levels.
The top-level menu is defined by HM_Array1.
The first element of HM_Array1 contains 21 parameters, separated by commas, that can be used
to customize the look of this specific menu tree.
The remaining four elements define the display and behavior of the menu's four items.
Note that within each menu element, there are 5 parameters (separated by commas) that define the
specific menu item.
The second array, HM_Array1_1, defines the child menu that appears when the user mouses over
item 1 in the top-level menu. It has an empty element ([]) followed by 8 menu
elements. The empty element is there for future expansion; if additional features are later developed
that can be applied to child menus specifically, they will go here. Until then, child menus like
HM_Array1_1 will contain only an empty element, followed by individual menu item elements.
The third array, HM_Array1_1_6, defines the child menu that appears when the user mouses
over item 6 in the second-level menu. It, like all child menu arrays, only has elements that pertain
to the contained items.
|
|
|
HM_Array2 = [
[120, // menu width
200, // left_position
300, // top_position
"black", // font_color
"white", // mouseover_font_color
"white", // background_color
"black", // mouseover_background_color
"black", // border_color
"gray", // separator_color
0, // top_is_permanent
0, // top_is_horizontal
0, // tree_is_horizontal
1, // position_under
1, // top_more_images_visible
1, // tree_more_images_visible
"null", // evaluate_upon_tree_show
"null", // evaluate_upon_tree_hide
, // right_to_left
, // display_on_click
0, // top_is_variable_width
0], // tree_is_variable_width
["Experts","/experts/",1,0,1],
["Contents","/index2.html",1,0,0],
["Services","/index2.html",1,0,0],
["About","/about.html",1,0,0]
]
HM_Array2_1 = [
[],
["3-D Animation","/3d/",1,0,0],
["Design","/dlab/",1,0,0],
["HTML","/html/",1,0,0],
["JavaScript","/js/",1,0,0],
] | |
Arrays for the second menu tree.
This tree has two menu levels.
The top-level menu is defined by >HM_Array2.
The first element of >HM_Array2 contains parameters that customize the look of this specific
menu tree. Note that some of the parameters are simply left blank (a single comma with no value). Parameters
left blank will simply use default values; from the Global or page
specific parameters, or from the script itself, as appropriate.
The remaining four elements define the display and behavior of the menu's four items. Note that within
each menu element, there are 5 parameters (separated by commas) that define the specific menu item.
The second array, HM_Array2_1, defines the child menu that appears when the user mouses
over item 1 in the top-level menu. It has an empty element ([]) followed by 4 menu
elements. Each menu element has 5 parameters.
|
| The First Element of a Top-Level Menu Array |
|---|
The first element in a top-level menu array can contain up to
21 individual customization parameters. The setting of these parameters is OPTIONAL; however,
you must maintain the ordering of the parameter values within the element. For example, if
you need to set the font color to green but you do not need to set any of the other
parameters, then your customization element might look like this: [,,,"green"] (three
empty parameters, followed by the font color parameter). If you provide
a null or empty string ("") value, the default values, taken from the Global or page
specific parameters, or as initially defined in the script if there is no corresponding
global parameter, will be applied. If you provide a value, the default values are overriden
for the specific menu tree.
|
| Parameter | Description | Value | Overrides |
|---|
| 1 | Menu Width
Sets the menu width for the specific menu tree only. | Pixels.
Specified as integer, string, or string JS expression to be evaluated | HM_GL/PG_MenuWidth |
| 2 | Left Position
By default, a top-level menu appears at the user's mouse position. This behavior can be overriden by setting this parameter and/or the next one. The top-level menu will appear at the horizontal page position specified. | Pixels.
Specified as integer, string, or string JS expression. You may also use the special mouse_x_position and mouse_y_position keywords. See this discussion for more details. | user mouse position |
| 3 | Top Position
The top-level menu will appear at the vertical page position specified. Can be used in conjuction with parameter 2, above, to absolutely position the top-level menu. | Pixels.
Specified as integer, string, or string JS expression. You may also use the special mouse_x_position and mouse_y_position keywords. See this discussion for more details. | user mouse position |
| 4 | Font Color
Sets the font color of the displayed text in the menu tree. | Hexadecimal color value or color name.
Specified as string | HM_GL/PG_FontColor |
| 5 | Font Color Upon Mouseover
Sets the font color of menu item displayed text, when the user mouses over the item. | Hexadecimal color value or color name.
Specified as string | HM_GL/PG_FontColorOver |
| 6 | Background Color
Sets the background color for all items in the menu tree. | Hexadecimal color value or color name.
Specified as string | HM_GL/PG_BGColor |
| 7 | Background Color Upon Mouseover
Sets the background color of an item, in the menu tree, when the user mouses over the item. | Hexadecimal color value or color name.
Specified as string | HM_GL/PG_BGColorOver |
| 8 | Border Color
Sets the menu border color for the menu tree. | Hexadecimal color value or color name.
Specified as string | HM_GL/PG_BorderColor |
| 9 | Separator Color
Sets the color of the item separator lines for the menu tree. Recognized only by Explorer. Navigator will always render the separator lines in the same color as the border color. | Hexadecimal color value or color name.
Specified as string | HM_GL/PG_SeparatorColor |
| 10 | Top Is Permanent
Defines whether the top-level menu in a menu tree is permanently visible. | Boolean.
Specified as true/false, integer (1/0), string, or string JS expression | script default (false) |
| 11 | Top Is Horizontal
Causes the items in a top-level menu to be displayed side-by-side (horizontally). | Boolean.
Specified as true/false, integer (1/0), string, or string JS expression | script default (false) |
| 12 | Tree Is Horizontal
Causes the items in all child menus in a menu tree to be displayed side-by-side (horizontally). | Boolean.
Specified as true/false, integer (1/0), string, or string JS expression | script default (false) |
| 13 | Position Under
Causes the first child menu in a menu tree, with a permanent horizontal top-level menu, to be positioned directly under its parent item. | Boolean.
Specified as true/false, integer (1/0), string, or string JS expression | script default (false) |
| 14 | Top More Images Visible
Suppresses the display of "more" images in top-level menu items. | Boolean.
Specified as true/false, integer (1/0), string, or string JS expression | script default (true) |
| 15 | Tree More Images Visible
Suppresses the display of "more" images in child menu items. | Boolean.
Specified as true/false, integer (1/0), string, or string JS expression | script default (true) |
| 16 | Evaluate Upon Tree Show
Executes a JavaScript statement when the menu tree is made visible. | String JS expression to be evaluated | HM_GL/PG_UponDisplay |
| 17 | Evaluate Upon Tree Hide
Executes a JavaScript statement when the menu tree is hidden. | String JS expression to be evaluated | HM_GL/PG_UponHide |
| 18 | Right To Left
Child Menu displays and more images are displayed from right to left. | Boolean.
Specified as true/false, integer (1/0), string, or string JS expression | HM_GL/PG_RightToLeft |
| 19 | Display On Click
Display this menu only when the user clicks the corresponding link. | Boolean.
Specified as true/false, integer (1/0), string, or string JS expression | HM_GL/PG_ClickStart |
| 20 | Top Is Variable Width
The top-level menu in the menu tree will be variable width. If true, the Menu Width parameter becomes the maximum width of menu items. | Boolean.
Specified as true/false, integer (1/0), string, or string JS expression | script default (false) |
| 21 | Tree Is Variable Width
The child menus of this menu tree will be variable width. If true, the Menu Width parameter becomes the maximum width of menu items. | Boolean.
Specified as true/false, integer (1/0), string, or string JS expression | script default (false) |
| The Item-Defining Array Elements |
|---|
| Each menu item element consists of 5 parameters that define the menu item. Like the customization element, you may leave an individual parameter empty, but
you must maintain the ordering of the parameter values within the element. For example, if
you need to set the Permanent Highlight flag for an item, your menu element might
look like this: ["Menu Item","link.html",,1] (the description, the link, an empty value for the
rollover flag, and then the Permanent Highlight flag). |
| Parameter | Description | |
|---|
| 1 | Item Display
Sets the text to be displayed for the item. |
Value | String, or JS expression that returns a string |
| Example | "Diner","http://www.dhtmlab.com/diner/",1,0,1 |
| 2 | Item URL
|
Value | String
(empty string or http: or javascript: URL) |
| Examples |
-
"Diner","",1,0,1
- no click action
- "Diner","http://www.dhtmlab.com/diner/",1,0,1
- URL to navigate to upon user click
- "Next","javascript:top.location='2.html'",1,0,1
- script to execute upon user click
|
| 3 | Item Is Rollover
Should the rollover behavior (new background/foreground
colors and image rollovers, if specified) be applied to this menu item? |
Value | Boolean
true/false, 1/0, or JS expression. |
| Examples | -
"Diner","http://www.dhtmlab.com/diner/",1,0,1
- do rollovers
-
"Diner","/diner/",false,0,1
- no rollover action
| | 4 | Item Permanently Highlighted
Highlight this item constantly,
as if it is always being rolled over by the mouse. |
Value | Boolean
true/false, 1/0, or JS expression. |
| Examples | -
"Diner","http://www.dhtmlab.com/diner/",1,0,1
- display normally
-
"Diner","/diner/",1,true,1
- permanently hightlighted item
| | 5 | Item Has Child
Is there an associated child menu that will pop up when the user mouses over the item?
If set to true, an associated child menu will be assumed to exist. |
Value | Boolean
true/false, or 1/0, or JS expression. |
| Examples | -
"Diner","http://www.dhtmlab.com/diner/",1,0,1
- child menu exists
-
"Diner","http://www.dhtmlab.com/diner/",1,0,0
- no child menu
|
|
