DHTML Lab: Hierarchical Menus Ver. 2 (Cross-Browser/Frames); JavaScript Arrays

Hierarchical Menus Ver. 2 (Cross-Browser/Frames)
the JavaScript arrays

WebReference

Contents

Parameters used for the menus on this page:

menuWidth = 120;
childOverlap = 50;
childOffset = 3;
perCentOver = null;
secondsVisible = .5;
fntCol = "blue";
fntSiz = 10;
fntBold = false;
fntItal = false;
fntFam = "sans-serif";
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;

Animated GIF demonstrating heirarchical menus for non-DHTML browsers.

The arrays used to define our menus remain the same as in version 1. What follows below is a "reprint" of the description of the array structure first published in column15.

The Array Naming Scheme

Recall that:

Every menu, belonging to whatever level, is defined by an array. The array is assigned to a variable with the prefix: arMenu. (the actual menu element will have a corresponding prefix of elMenu).
ar = array, el = element.

The menu array contains the content of every item in the menu. Each item corresponds to three array elements. The first three array elements (0-2) define the first menu item, the second group of three elements (3-5) define the second menu item, and so on.

The three array elements for each item define:

• the text to be displayed (string)
• the link URL to load if the item is clicked (string)
• whether this item opens a child menu (Boolean)

  "Experts","http://www.webreference.com/experts/",1

• Experts is the text to be displayed describing the item,
• http://www.webreference.com/experts/ the URL to navigate to when the item is clicked, and
• 1 (same as true) specifies the existence of a child menu associated with this item.

Top level menu arrays are given a single integer suffix, beginning at 1 (one). If we want to build four menu trees, the arrays for the top level menus are assigned to: arMenu1, arMenu2, arMenu3 and arMenu4.

Second level menus (child menus of top level menus) are created from arrays that have a suffix of the form:

topLevelMenuInteger_topLevelItemInteger

For example, this menu, elMenu1, is created from the array, arMenu1:
In turn, this menu has an item (the first one) that when moused over opens the child menu below:

This second level child menu is created from the array: arMenu1_1, and named elMenu1_1, since it is opened by the first item (_1) in the parent menu created by arMenu1.

Third level menus are created from arrays that have this naming scheme:

secondLevelMenuName_secondLevelItemInteger

Full Example

The following arrays are used to create the two top level menus and all the child menus that appear when the two links in the left column are moused over.

arMenu1 = new Array(
 "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/",1
)
arMenu1_1_3 = new Array(
 "Columns","http://www.webreference.com/dhtml/",0,
 "Links","http://www.webreference.com/dhtml/links.html",0,
 "About","http://www.webreference.com/dhtml/about.html",0
)
arMenu1_1_5 = new Array(
 "Columns","http://www.webreference.com/js/",0,
 "JxPharmacy","http://www.webreference.com/js/pharmacy/",0,
 "Doctor What?","http://www.webreference.com/js/about.html",0
)

arMenu2 = new Array(
 "Web/Net","",1,                <-- NOTE; not a link!
 "WebMaster","http://www.webreference.com/index2.html",0,
 "On-Site Originals","http://www.webreference.com/index2.html",0,
 "About Us","http://www.webreference.com/index2.html",0
)
arMenu2_1 = new Array(
 "Books","http://www.webreference.com/books/",0,
 "Browsers","http://www.webreference.com/browsers/",0,
 "History","http://www.webreference.com/history.html",0,
 "Magazines","http://www.webreference.com/magazines/",0,
 "Software","http://www.webreference.com/software.html",0,
 "Standards","http://www.webreference.com/standards.html",0,
 "Statistics","http://www.webreference.com/statistics.html",0,
 "Tutorials","http://www.webreference.com/tutorials.html",0
)

Now, we're ready to explore the main external script for Version 2.