Cross-Browser Hierarchical Menus
menu creation and setup

Webreference

Contents

More of the same.

In longer script listings, cross-browser code is blue, Navigator-specific code is red, and Explorer code is green.

The all-important makeTop() function has no browser-specific code. A complete discussion of the statement logic can be found in our previous column.

Here, we have changed the status bar courtesy display to be slightly more informative. Since it is updated every time a top level menu item is created, the display changes more frequently, helping the user to understand what is happening in the background.

function makeTop() {

 while(eval("window.arMenu" + topCount)) {
  topArray = eval("arMenu" + topCount);
  topName = "elMenu" + topCount;

  topMenu = makeElement(topName);
  topMenu.setup = menuSetup;

  topItemCount = 0;
  for (i=0; i<topArray.length; i+=3) {
   topItemCount++;
  
   status = "Creating Hierarchical Menus: " + topCount + " / " + topItemCount;

   topItemName = "item" + topCount + "_" + topItemCount;
   topItem = makeElement(topItemName,topMenu);

   if (topItemCount>1)
    topItem.prevItem = (keep with next line)
      eval("item" + topCount + "_" +(topItemCount-1));

   topItem.setup = itemSetup;
   topItem.setup(i,topArray);

   if (topItem.hasMore) makeSecond();
  }
      
  topMenu.setup(false,topItem);
  topCount++
 }

 status = (topCount-1) + " Heirarchical Menu Trees Created"
 areCreated = true;
}

Don't worry, there are a couple of lines of browser-specific statements on our next page.