DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum V (v3.05) | 2

Hierarchical Menus Ver. 3 - Addendum V (v3.05)
the Explorer nine-menu-trees-maximum problem

The Menu Naming Scheme

The menu tree array and object naming scheme was developed in version 1. As a refresher, we include an extract from column 15 that illustrates this:

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

The topLevelMenuInteger is the same integer as the one assigned to its parent top level menu. The topLevelItemInteger corresponds to the item in the top level menu that opens this menu.

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

The following arrays were used to create the menus above:

arMenu1 = new Array(
 "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/",1
)
arMenu1_1_3 = new Array(
 "Columns","https://www.webreference.com/dhtml/",0,
 "Links","https://www.webreference.com/dhtml/links.html",0,
 "About","https://www.webreference.com/dhtml/about.html",0
)

This naming scheme is used in our menu items as well. Using the column 15 example, above, the contained items would have these identifiers:

Child Identification Using Item ID

In Version 3, we greatly improved menu creation speed in Explorer by creating all item elements as non-positioned SPAN elements. This led to a difficulty in identifying an item's possible child menu. In column 21, we solved it in this way, in our discussion of the itemSetup() function:

There is a major difference between the version 3 IE4-specific code and all other versions as far as the order-of-element-creation is concerned. In previous versions, and in the NS4-specific code in version 3, the item element is physically created before any related child menu is created. Here, we create the item after the child menu. The item's child property and the child menu's parentMenu and parentItem properties must be set here, in itemSetup(), since it is only now, after both the child menu and the item have been created, that we have objects to assign properties to. The only way to identify an associated child menu, at this late stage, is through its ID attribute:

if (IE4 && this.hasMore) {
   this.child = eval("elMenu" + this.id.substr(this.id.indexOf("_")-1));
   this.child.parentMenu = this.container;
   this.child.parentItem = this;
}

The Problem Line

The this in the above statements refers to the menu item element that pops up a child menu. For example, item1_1 pops up elMenu1_1 and item1_1_3 pops up elMenu1_1_3.

In the purple statement, above, we use indexOf() to find the first occurance of the underscore character, [indexOf("_")], in the item's ID. We then backtrack one character, [indexOf("_")-1], and extract a substring of the item's ID beginning at that character [this.id.substr(this.id.indexOf("_")-1)]. So, if the item's ID is item1_1_3, our substring will be "1_1_3". If we append this to "elMenu", we produce the string "elMenu1_1_3", which, when evaluated, returns the correct child menu for item1_1_3.

On the next page, we'll see why this line was poorly thought out, and correct it.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan 26, 1999
Revised: Jan 26, 1999

URL: https://www.webreference.com/dhtml/column21/addendum5/col21addV2.html