DHTML Lab: HierMenus CENTRAL: Version 4 Setup - Step 4 - dhtmlab.com | WebReference

DHTML Lab: HierMenus CENTRAL: Version 4 Setup - Step 4 - dhtmlab.com

V4 Setup Instructions
Step 4 of 6


Return to Step 3Step 4 of 6Go 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:

  1. Every menu is defined by an array.
  2. Menu trees are defined by a group of menu arrays that follow a naming convention.
  3. 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.
  4. 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 fileNotes
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","/dhtml/",1,0,1],
["Perl","/perl/",1,0,0],
["XML","http://webref.com/xml/",1,0,0]
]
HM_Array1_1_6 = [
[],
["Diner","/dhtml/diner/",1,0,0],
["Dynomat","http://webref.com/dhtml/dynomat/",1,0,0],
["Links","/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.

ParameterDescriptionValueOverrides
1Menu 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
2Left 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
3Top 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
4Font 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
5Font 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
6Background 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
7Background 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
8Border Color
Sets the menu border color for the menu tree.
Hexadecimal color value or color name.
Specified as string
HM_GL/PG_BorderColor
9Separator 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
10Top 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)
11Top 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)
12Tree 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)
13Position 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)
14Top 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)
15Tree 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)
16Evaluate Upon Tree Show
Executes a JavaScript statement when the menu tree is made visible.
String JS expression to be evaluatedHM_GL/PG_UponDisplay
17Evaluate Upon Tree Hide
Executes a JavaScript statement when the menu tree is hidden.
String JS expression to be evaluatedHM_GL/PG_UponHide
18Right 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
19Display 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
20Top 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)
21Tree 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).
ParameterDescription 
1Item Display
Sets the text to be displayed for the item.
ValueString, or JS expression that returns a string
Example"Diner","http://www.dhtmlab.com/diner/",1,0,1
2Item URL
ValueString
(empty string or http: or javascript: URL)
Examples
  1. "Diner","",1,0,1
    - no click action

  2. "Diner","http://www.dhtmlab.com/diner/",1,0,1
    - URL to navigate to upon user click

  3. "Next","javascript:top.location='2.html'",1,0,1
    - script to execute upon user click
3Item Is Rollover
Should the rollover behavior (new background/foreground colors and image rollovers, if specified) be applied to this menu item?
ValueBoolean
true/false, 1/0, or JS expression.
Examples
  1. "Diner","http://www.dhtmlab.com/diner/",1,0,1
    - do rollovers

  2. "Diner","/diner/",false,0,1
    - no rollover action

4Item Permanently Highlighted
Highlight this item constantly, as if it is always being rolled over by the mouse.
ValueBoolean
true/false, 1/0, or JS expression.
Examples
  1. "Diner","http://www.dhtmlab.com/diner/",1,0,1
    - display normally

  2. "Diner","/diner/",1,true,1
    - permanently hightlighted item

5Item 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.
ValueBoolean
true/false, or 1/0, or JS expression.
Examples
  1. "Diner","http://www.dhtmlab.com/diner/",1,0,1
    - child menu exists

  2. "Diner","http://www.dhtmlab.com/diner/",1,0,0
    - no child menu
Return to Step 3
Step 4 of 6
Go to Step 5

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: February 1, 2002
Revised: February 1, 2002

URL: http://www.webreference.com/dhtml/hiermenus/version4/instructions/noframes/step4.html

Justtechjobs.comFind a programming school near you






Online Campus Both