DHTML Lab: HierMenus CENTRAL: Version 3 Frameset Instructions, Step 4 - dhtmlab.com | WebReference

DHTML Lab: HierMenus CENTRAL: Version 3 Frameset Instructions, Step 4 - dhtmlab.com

Instructions -
Frameset Menus -
Step 4 of 6

Revised: June 26, 2001

Return to Step 3Step 4 of 6Go to Step 5
Define your menu arrays in an external file called hierArrays.js, remembering that top-level menu arrays have nine extra elements

You must create an external JavaScript file that defines the content and behavior of your specific menus. This file, hierArrays.js, contains no functions, just a series of JavaScript arrays, the most convenient way to group information to be used later.

The array structure has been discussed in great detail in these column pages: column 14, column 18, column 20, column 21.

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. Three consecutive array elements serve to define each menu item.
  4. The array of a top-level menu has nine extra elements that can customize the look of the menu tree.
Sample hierArrays.js fileNotes
arMenu1 = new Array(
120,                    
200,"",                 
"","",                  
"#3399FF","#55BBFF",    
"#0000FF","#000088",    
"Experts","http://www.webreference.com/experts/",1,
"Contents","http://www.webreference.com/index2.html",0,
"Services","http://www.webreference.com/index2.html",0,
"About","http://www.webreference.com/about.html",0
)
arMenu1_1 = new Array(
"3-D Animation","http://www.webreference.com/3d/",0,
"Design","http://www.webreference.com/dlab/",0,
"DHTML","http://www.webreference.com/dhtml/",1,
"Internet","http://www.webreference.com/outlook/",0,
"JavaScript","http://www.webreference.com/js/",0
)
arMenu1_1_3 = new Array(
"Columns","http://www.webreference.com/dhtml/",0,
"Diner","http://www.webreference.com/dhtml/diner/",0,
"Dynomat","http://www.webreference.com/dhtml/dynomat/",0
)

Arrays for first menu tree.

This tree has three menu levels.
The top-level menu is defined by arMenu1.
The first nine elements of arMenu1 customize the look of this specific menu tree.
The remaining twelve elements define the display and behavior of the menu's four items. (three elements per item)

The second array, arMenu1_1, defines the child menu that appears when the user mouses over item 1 in the top-level menu. It only has elements that pertain to the contained items, as the menu look is already established, and tree-specific.

The third array, arMenu1_1_3, defines the child menu that appears when the user mouses over item 3 in the second-level menu. It, like all child menu arrays, only has elements that pertain to the contained items.


arMenu2 = new Array(
175,
150,300,
"black","white",
"#2D9B83","#4BB9A1",
"black","black",
"Experts","http://www.webreference.com/experts/",1,
"Contents","http://www.webreference.com/index2.html",0
)
arMenu2_1 = new Array(
"3-D Animation","http://www.webreference.com/3d/",0,
"Design","http://www.webreference.com/dlab/",0,
"DHTML","http://www.webreference.com/dhtml/",0,
"Internet","http://www.webreference.com/outlook/",0,
"JavaScript","http://www.webreference.com/js/",0
)

Arrays for second menu tree.

This tree has two menu levels.
The top-level menu is defined by arMenu2.
The first nine elements of arMenu2 customize the look of this specific menu tree.
The remaining twelve elements define the display and behavior of the menu's four items. (three elements per item)

The second array, arMenu2_1, defines the child menu that appears when the user mouses over item 1 in the top-level menu. It only has elements that pertain to the contained items, as the menu look is already established, and tree-specific.

The First NINE Elements of a Top-Level Menu Array

The setting of these elements is OPTIONAL. If you provide a null or empty string ("") value, the default values, set in the navigation page, will be applied. If you provide a value, the default values are overriden for the specific menu tree.

ElementDescriptionValueOverrides
1Menu Width
Sets the menu width for the specific menu tree only.
Integer (pixels)menuWidth
2Left Position
A top-level menu appears at the user's mouse position. This behavior can be overriden by setting this element and/or the next one. The top-level menu will appear at the horizontal page position specified.
Integer (pixels)user mouse position
3Top Position
The top-level menu will appear at the vertical page position specified. Can be used in conjuction with element 2, above, to absolutely position the top-level menu.
Integer (pixels)user mouse position
4Font Color
Sets the font color of the displayed text in the menu tree.
String
(any valid color identifier)
fntCol
5Font Color Upon Mouseover
Sets the font color of menu item displayed text, when the user mouses over the item. Explorer always recognizes this variable. Navigator will only implement it if NSfontOver is set to true.
String
(any valid color identifier)
overFnt
6Background Color
Sets the background color for all items in the menu tree.
String
(any valid color identifier)
backCol
7Background Color Upon Mouseover
Sets the background color of an item, in the menu tree, when the user mouses over the item.
String
(any valid color identifier)
overCol
8Border Color
Sets the menu border color for the menu tree.
String
(any valid color identifier)
borCol
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 global menu border setting, borCol, or the tree-specific setting in element 8.
String
(any valid color identifier)
separatorCol


The Item-Defining Array Elements
Each group of three array elements defines a menu item.
ElementDescription 
FirstItem Display
Sets the text to be displayed for the item.
ValueString
Example"DHTML Diner","http://www.dhtmlab.com/diner/",1
SecondItem URL
ValueString
(empty string or http: or javascript: URL)
Examples
  1. "DHTML Diner","",1
    - no click action

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

  3. "New Page","javascript:top.location='anotherpage.html'",0
    - script to execute upon user click
ThirdChild Menu
Is there an associated child menu that will pop up when the user mouses over the item?
If set to true, the triangle image will appear in the item, and an associated child menu will be assumed to exist.
ValueBoolean
true/false, or 1/0.
Examples
  1. "DHTML Diner","http://www.dhtmlab.com/diner/",1
    - child menu exists

  2. "DHTML Diner","http://www.dhtmlab.com/diner/",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: July 20, 1999
Revised: June 26, 2001

URL: http://www.webreference.com/dhtml/hiermenus/version3/instructions/frameset/step4.html