We are providing HierMenus to you at no cost. HierMenus code requires a confirmed membership with internet.com. Please register by clicking here and come back soon to download your free copy of HeirMenus code.
Click Here to Register

Site Navigation
Bulletins
About
Documentation
FAQ
Samples
Known Issues
Technology Jobs

internet.commerce

Partner With Us
internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers
 
HierMenusCentral Enhance the Functionality of Your Web Site with DHTML HierMenus.
    

home / docs / archive / version 5 / instructions / step 4

V5 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 23 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, typically contains no functions (unless you want to put some of your own there), just a series of JavaScript arrays, a convenient way to group information to be used later. The HM_Arrays.js is also where you will optionally place your rollover image assignments for embedded images that you include in your arrays (if you include embedded images in your arrays and want them to have a rollover effect).

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 possible future child-menu specific enhancements). The customization element for top-level menus can optionally contain 23 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.
  5. Each element (i.e., collection of parameters between square brackets, [...]) must be followed by a comma except the final element of each menu, which must not be followed by a comma.

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
true,                          // top_keep_in_window_x
true],                         // top_keep_in_window_y
["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 23 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
1,         // top_keep_in_window_x
1],        // top_keep_in_window_y
["Experts","/experts/",1,0,1],
["Contents","/index2.html",1,0,1],
["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],
]

HM_o_RolloverImages {
   img2_2_1:"/art/item221on.gif",
   img2_2_2:"/art/item222on.gif",
   img2_2_3:"/art/item223on.gif",
   img2_2_4:"/art/item224on.gif"
}

HM_Array2_2 = [
[],
["<img name='img2_2_1' id='img2_2_1' 
     src='/art/item221off.gif' height='16' 
     width='40' />","/3d/",1,0,0],
["<img name='img2_2_2' id='img2_2_2' 
     src='/art/item222off.gif' height='16' 
     width='40' />","/dlab/",1,0,0],
["<img name='img2_2_3' id='img2_2_3' 
     src='/art/item223off.gif' height='16' 
     width='40' />","/html/",1,0,0],
["<img name='img2_2_4' id='img2_2_4' 
     src='/art/item224off.gif' height='16' 
     width='40' />","/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 HM_o_RolloverImages object is defined next; it provides the locations of the images that will be used as rollover images in the next menu definition.

Finally, the last menu, which will appear when the "Contents" entry is rolled over in Menu 2 (HM_Array2) is defined. Note that this menu entry includes images by way of embedded HTML strings within the menu item descriptions. IMPORTANT NOTE: HM_Array2_2 is defined here with additional line-wrapping for better display on this Web page. In actual implementations, each menu item should be defined on a single line.

The HM_o_RolloverImages Object

The HM_o_RolloverImages object is optional; it is only needed if you wish to define an image rollover effect for images that you have embedded into your menu item descriptions. Technically, the HM_o_RolloverImages object can be defined anywhere on your pages prior to the loading of the actual HM scripts themselves. But since its functionality is so tightly bound to the menu items it makes the most sense to simply define it in the same place you define your menu arrays. You should define only one HM_o_RolloverImages object on each page, and it should contain the necessary information for all embedded HierMenus image rollovers that exist on that page.

The syntax of the HM_o_RolloverImages object is as follows:

HM_o_RolloverImages = {
   Image ID 1:"source of rollover image 1",
   Image ID 2:"source of rollover image 2",
   ...
   Image ID n:"source of rollover image n"
}

Note especially the following:

  1. The object is always called HM_o_RolloverImages.

  2. A single pair of curly brackets ({}) encloses all of the ID/source image pairs.

  3. Within the curly brackets, pairs of image ID's and their corresponding rollover images (the actual URL location of the rollover image itself) are designated. The image ID should be the exact same value used in the id and name attributes of the image. Be sure to use the same case that you did when defining the image. A single colon should separate an image ID from its corresponding rollover image location, and the image location itself should be quoted. (There is one exception to the "exact name" identification described here. See the group image rollover discussion in Release Bulletin 9 for further information.)

  4. Each ID/source pair is separated by a comma. The last ID/source pairing must not be followed by a comma.

For further discussion of the HierMenus rollovers, please refer to Release Bulletin 9.

The First Element of a Top-Level Menu Array

The first element in a top-level menu array can contain up to 23 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 an empty value (i.e., a comma by itself) then 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. Note that in a cross-frames environment, permanently visible menus are displayed in the content frame of the page, not the navigation page.		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)
22Top Keep In Window X
The top-level menu in the menu tree should be horizontally repositioned such that as much of the menu as possible is displayed within the viewable portion of the user's browser window.		Boolean.
Specified as true/false, integer (1/0), string, or string JS expression		HM_GL/PG_TopKeepInWindowX
23Top Keep In Window Y
The top-level menu in the menu tree should be vertically repositioned such that as much of the menu as possible is displayed within the viewable portion of the user's browser window.		Boolean.
Specified as true/false, integer (1/0), string, or string JS expression		HM_GL/PG_TopKeepInWindowY


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

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

Created: 3/25/2004
Updated: 3/25/2004
URL: http://www.hiermenuscentral.com/documentation/archive/v4/instructions/step4.html