DHTML Lab: Hierarchical Menus, I; The JavaScript Array

DHTML Hierarchical Menus, Part I
the JavaScript array

Webreference

Contents

Pass your mouse over the links above for the more-complex menus discussed on this page.

The content of every item is defined by three pieces of information:

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

For example, the first item in the first top level menu (Webreference) that appears in the left column, displays the text, Experts. When the user clicks it, the URL, https://www.webreference.com/experts/ is loaded. On a mouseover, a child menu appears.

We could define an array to contain all three of these values with the following syntax:

arMenu1 = new Array(
  "Experts","https://www.webreference.com/experts/",1
)

The third element in the array is 1, the same as true. 0, of course, is false.

The complete top level menu can be defined in a single one-dimensional array:

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
)

In previous columns, we have used multi-dimensional arrays for storing different parameters for our techniques. See, Low Bandwidth Rollovers, Database Front End and Dynamic Headline Fader for examples. Our present technique could use a three-dimensional array for the three item parameters. For the sake of diversity, and learning, we will use a one-dimensional array and discuss how to selectively retrieve information from it.

Naming the Arrays

All our top level menus are created from arrays that have the naming scheme: arMenu1, arMenu2, arMenu3...

The second menu in the left column (Contents) is defined by this array:

arMenu2 = new Array(
  "Web/Net","",1,
  "WebMaster","https://www.webreference.com/index2.html",0,
  "On-Site Originals","https://www.webreference.com/index2.html",0,
  "About Us","https://www.webreference.com/index2.html",0
)

Notice that the first item (Web/Net) has a blank string for the URL designator. If the item in question does not have a corresponding URL, that is, it is not a link, the array element cannot be omitted. A blank string must be inserted.

Arrays for Child Menus

Every second and third level menu is also defined by an array. The naming scheme is very important and must be followed religiously for our technique to work.

Second level menus take the name of the parent and a suffix denoting which item in the parent menu opened it. For example, in the first menu on the left, Experts opens a child menu. This child menu is defined by an array named arMenu1_1. The first part, arMenu1, identifies the menu family, or tree, that the menu belongs to. The suffix, _1, will tell our routines that it is opened by the first item of the parent.

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
)

Third level menus are named with the same logic, and have an additional suffix. Using the same example: Experts opens a five item child menu, which in turn has its own child menus off the third (DHTML) and fifth (JavaScript) items. The arrays that define these third level menus are:

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
)
arMenu1_1_5 = new Array(
  "Columns","https://www.webreference.com/js/",0,
  "JxPharmacy","https://www.webreference.com/js/pharmacy/",0,
  "Doctor What?","https://www.webreference.com/js/about.html",0
)

We therefore define our menu hierarchy through a series of arrays with a strict naming scheme. As you can see above, by placing the three elements for each item on a separate line, the array structure is simple to follow and extremely readable. Remember that the last element in an array is not followed by a comma.

Experiment with the menus on the left, referring to the arrays discussed, which are reproduced in their entirety below. The arrays used in the more complex front page menus are reproduced on our second code page.

Arrays for Left Column Menus

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
)
arMenu1_1_5 = new Array(
  "Columns","https://www.webreference.com/js/",0,
  "JxPharmacy","https://www.webreference.com/js/pharmacy/",0,
  "Doctor What?","https://www.webreference.com/js/about.html",0
)
arMenu2 = new Array(
  "Web/Net","",1,
  "WebMaster","https://www.webreference.com/index2.html",0,
  "On-Site Originals","https://www.webreference.com/index2.html",0,
  "About Us","https://www.webreference.com/index2.html",0
)
arMenu2_1 = new Array(
  "Books","https://www.webreference.com/books/",0,
  "Browsers","https://www.webreference.com/browsers/",0,
  "History","https://www.webreference.com/history.html",0,
  "Magazines","https://www.webreference.com/magazines/",0,
  "Software","https://www.webreference.com/software.html",0,
  "Standards","https://www.webreference.com/standards.html",0,
  "Statistics","https://www.webreference.com/statistics.html",0,
  "Tutorials","https://www.webreference.com/tutorials.html",0
)

The arrays determine the text display, the linked URL and the offspring (so-to-speak) of each item. The style, that is, the look of the item is determined through CSS.