DHTML Lab: Hierarchical Menus Version 3 | 2 | WebReference

DHTML Lab: Hierarchical Menus Version 3 | 2


Logo

Hierarchical Menus: Version 3
tree-specific parameters

elMenu1

elMenu2

elMenu3

elMenu4

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","http://www.webreference.com/index2.html",1,
"Services","http://www.webreference.com/index2.html",1,
"About","http://www.webreference.com/about.html",0
)
arMenu1_1 = new Array(
"3-D Animation","http://www.webreference.com/3d/",1,
"Design","http://www.webreference.com/dlab/",1,
"DHTML","http://www.webreference.com/dhtml/",1,
"Internet","http://www.webreference.com/outlook/",1,
"JavaScript","http://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","http://www.webreference.com/index2.html",1,
"Services","http://www.webreference.com/index2.html",1,
"About","http://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","http://www.webreference.com/index2.html",1,
"Services","http://www.webreference.com/index2.html",1,
"About","http://www.webreference.com/about.html",0
)

or:

arMenu1 = new Array(
null,
null,null,
null,null,
null,null,
null,null,
"Experts","allCode1.html",1,
"Contents","http://www.webreference.com/index2.html",1,
"Services","http://www.webreference.com/index2.html",1,
"About","http://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","http://www.webreference.com/index2.html",1,
"Services","http://www.webreference.com/index2.html",1,
"About","http://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","http://www.webreference.com/index2.html",1,
"Services","http://www.webreference.com/index2.html",1,
"About","http://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","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
)
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
)
arMenu3 = new Array(
"",
"","",
"","",
"","",
"","",
"Experts","http://www.webreference.com/experts/",0,
"Contents","http://www.webreference.com/index2.html",1
)
arMenu3_2 = new Array(
"Features","http://www.webreference.com/articles.html",0,
"Forum","http://www.webreference.com/cgi-bin/Ultimate.cgi",0,
"How-to","http://www.webreference.com/dev/",0,
"New","http://www.webreference.com/headlines/",0,
"Hot Sites","http://www.webreference.com/hot/",0
)
arMenu4 = new Array(
168,
"","",
"black","white",
"#F84130","#FF5F4E",
"#9A0E20","white",
"Experts","http://www.webreference.com/experts/",0,
"Services","http://www.webreference.com/index2.html",1
)
arMenu4_2 = new Array(
"Domains","http://www.webreference.com/services/dns/",0,
"Graphics","http://www.webreference.com/services/gw/",0,
"Jobs","http://www.webreference.com/jobs/",0,
"Reference","http://www.webreference.com/services/reference/",0,
"ROADMAP","http://www.webreference.com/roadmap/",0,
"Search","http://www.webreference.com/cgi-bin/search.cgi",0,
"Validation","http://www.webreference.com/services/validation/",0,
"Cool Sites","http://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

All Rights Reserved. Legal Notices.
Created: Sept. 03, 1998
Revised: Sept. 03, 1998

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