Cross-Browser Hierarchical Menus
the JavaScript Array

Webreference

Contents

Pass your mouse over the links above to view the menus created by the arrays discussed on this page.

The arrays used to define our cross-browser menus are exactly the same as those discussed in our Navigator column. This page is, therefore, a re-worded refresher for those who may have been confused by the strict naming scheme that must be followed.

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, get it? The element naming schemes preferred by this column are outlined in our about page.

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 too 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
)

Confusion gone? Let's move on!

Next let's look at a couple of quirks related to cross-browser styling of the menu items.