DHTML Lab: Hierarchical Menus Version 3 | 2

Hierarchical Menus: Version 3
tree-specific parameters

Click the links above to reveal menus. Click anywhere on the page to hide menus.

Parameters used for the menus on this page:

menuVersion = 3;
menuWidth = 120;
childOverlap = 50;
childOffset = 5;
perCentOver = null;
secondsVisible = .5;
fntCol = "blue";
fntSiz = 9;
fntBold = false;
fntItal = false;
fntFam = "arial";
backCol = "#DDDDDD";
overCol = "#FFCCCC";
overFnt = "purple";
borWid = 2;
borCol = "black";
borSty = "solid";
itemPad = 3;
imgSrc = "tri.gif";
imgSiz = 10;
separator = 1;
separatorCol = "red";
isFrames = false;
keepHilite = true; 
NSfontOver = false;
clickStart = true;
clickKill = true;
showVisited = "yellow";

Background Reading:

Arrays:
  column 14
  column 15
  column 18
  column 20

Much user feedback has revolved around the need for tree-specific parameters. That is, the ability for each menu tree to have its own:

width
absolute top/left popup position
font/background colors
mouseover font/background colors
border color
item separator color

The most efficient way to create and set tree-specific parameters is in the arrays that define the menus. Specifically, since the parameters will apply to the complete menu tree, in the top-level menu array for each tree.

Recall that a simple two-level menu tree was defined by these arrays:

arMenu1 = new Array(
"Experts","allCode1.html",1,
"Contents","https://www.webreference.com/index2.html",1,
"Services","https://www.webreference.com/index2.html",1,
"About","https://www.webreference.com/about.html",0
)
arMenu1_1 = new Array(
"3-D Animation","https://www.webreference.com/3d/",1,
"Design","https://www.webreference.com/dlab/",1,
"DHTML","https://www.webreference.com/dhtml/",1,
"Internet","https://www.webreference.com/outlook/",1,
"JavaScript","https://www.webreference.com/js/",1
)

In version 3, we add nine additional elements to the beginning of the top-level array. These elements set tree-specific parameters that override the related default parameters set in the HEAD of your page. These elements must be defined, whether you wish to use tree-specific parameters or not.

arMenu1 = new Array(
width,
left_position,top_position,
font_color,mouseover_font_color,
background_color,mouseover_background_color,
border_color,separator_color,
"Experts","allCode1.html",1,
"Contents","https://www.webreference.com/index2.html",1,
"Services","https://www.webreference.com/index2.html",1,
"About","https://www.webreference.com/about.html",0
)

If you want a menu tree to use only the default parameters, give these elements an empty string or null value:

arMenu1 = new Array(
"",
"","",
"","",
"","",
"","",
"Experts","allCode1.html",1,
"Contents","https://www.webreference.com/index2.html",1,
"Services","https://www.webreference.com/index2.html",1,
"About","https://www.webreference.com/about.html",0
)

or:

arMenu1 = new Array(
null,
null,null,
null,null,
null,null,
null,null,
"Experts","allCode1.html",1,
"Contents","https://www.webreference.com/index2.html",1,
"Services","https://www.webreference.com/index2.html",1,
"About","https://www.webreference.com/about.html",0
)

Setting the Parameters

The first three parameter elements (width, left_position,top_position) accept pixel integer values. The remainder (color-related) accept valid color-denoting strings.

Examples:

A menu tree that has a "default look" but appears at the 230-340 x-y position would have this top-level array:

arMenu1 = new Array(
"",
230,340,
"","",
"","",
"","",
"Experts","allCode1.html",1,
"Contents","https://www.webreference.com/index2.html",1,
"Services","https://www.webreference.com/index2.html",1,
"About","https://www.webreference.com/about.html",0
)

A menu tree that is 200 pixels wide, appears wherever the mouse event occurs, has black text on a blue background, which becomes white on light-blue upon mouseover, and which has default border and separator colors, has this top-level array:

arMenu1 = new Array(
200,
"","",
"black","white",
"blue","#55BBFF",
"","",
"Experts","allCode1.html",1,
"Contents","https://www.webreference.com/index2.html",1,
"Services","https://www.webreference.com/index2.html",1,
"About","https://www.webreference.com/about.html",0
)

The combinations are, of course, endless. In the left column, there are four links which display menu trees. The default parameters for these menus are also reproduced in the left column. The arrays that define the menus are reproduced below. Compare the arrays to the results for a clear understanding of how the tree-specific parameters work.

The third menu has no tree-specific parameters and has the look defined by the in-page variables. The other three have some or all of the tree-specific parameters set.

arMenu1 = new Array(
120,
200,"",
"","",
"#3399FF","#55BBFF",
"#0000FF","#000088",
"Experts","https://www.webreference.com/experts/",1,
"Contents","https://www.webreference.com/index2.html",0,
"Services","https://www.webreference.com/index2.html",0,
"About","https://www.webreference.com/about.html",0
)
arMenu1_1 = new Array(
"3-D Animation","https://www.webreference.com/3d/",0,
"Design","https://www.webreference.com/dlab/",0,
"DHTML","https://www.webreference.com/dhtml/",1,
"Internet","https://www.webreference.com/outlook/",0,
"JavaScript","https://www.webreference.com/js/",0
)
arMenu1_1_3 = new Array(
"Columns","https://www.webreference.com/dhtml/",0,
"Diner","https://www.webreference.com/dhtml/diner/",0,
"Dynomat","https://www.webreference.com/dhtml/dynomat/",0
)
arMenu2 = new Array(
175,
150,300,
"black","white",
"#2D9B83","#4BB9A1",
"black","black",
"Experts","https://www.webreference.com/experts/",1,
"Contents","https://www.webreference.com/index2.html",0
)
arMenu2_1 = new Array(
"3-D Animation","https://www.webreference.com/3d/",0,
"Design","https://www.webreference.com/dlab/",0,
"DHTML","https://www.webreference.com/dhtml/",0,
"Internet","https://www.webreference.com/outlook/",0,
"JavaScript","https://www.webreference.com/js/",0
)
arMenu3 = new Array(
"",
"","",
"","",
"","",
"","",
"Experts","https://www.webreference.com/experts/",0,
"Contents","https://www.webreference.com/index2.html",1
)
arMenu3_2 = new Array(
"Features","https://www.webreference.com/articles.html",0,
"Forum","https://www.webreference.com/cgi-bin/Ultimate.cgi",0,
"How-to","https://www.webreference.com/dev/",0,
"New","https://www.webreference.com/headlines/",0,
"Hot Sites","https://www.webreference.com/hot/",0
)
arMenu4 = new Array(
168,
"","",
"black","white",
"#F84130","#FF5F4E",
"#9A0E20","white",
"Experts","https://www.webreference.com/experts/",0,
"Services","https://www.webreference.com/index2.html",1
)
arMenu4_2 = new Array(
"Domains","https://www.webreference.com/services/dns/",0,
"Graphics","https://www.webreference.com/services/gw/",0,
"Jobs","https://www.webreference.com/jobs/",0,
"Reference","https://www.webreference.com/services/reference/",0,
"ROADMAP","https://www.webreference.com/roadmap/",0,
"Search","https://www.webreference.com/cgi-bin/search.cgi",0,
"Validation","https://www.webreference.com/services/validation/",0,
"Cool Sites","https://www.coolcentral.com",0
)

URLs in Arrays

If you are using a frameset, you should use absolute URL references. Do not use relative addresses. The URL must be accessible from the main frame, which may be in a different directory than the navigation frame. Keeping all URLs absolute avoids file errors.

Now, the fun starts. A line-by-line look at the main external script.

Produced by Peter Belesis and

URL: https://www.webreference.com/dhtml/column21/hier3Arrays.html

DHTML Lab: Hierarchical Menus Version 3 | 2

Hierarchical Menus: Version 3tree-specific parameters

Setting the Parameters

Examples:

URLs in Arrays

Find a programming school near you

Hierarchical Menus: Version 3
tree-specific parameters