DHTML Lab: Cross-Browser Hierarchical Menus; Child Menu Creation

Cross-Browser Hierarchical Menus
second and third level menu creation

Webreference

Contents

Open the menus above to remind yourself that this is a technique worth learning.

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

The functions that create the second and third level menus are completely cross-browser, as they use custom functions and methods defined elsewhere.

We repeat them here for the sake of completeness. For a detailed discussion on the statements, refer to our previous column.

Second Level Menu Creation

function makeSecond() {
   secondCount = topCount + "_" + topItemCount;
   
   secondArray = eval("arMenu" + secondCount);
   secondName = "elChild" + secondCount
   
   secondMenu = makeElement(secondName);
   secondMenu.setup = menuSetup;
   secondItemCount = 0;
   for (j=0; j<secondArray.length; j+=3) {
      secondItemCount++;
      secondItemName =  (keep with next line)
        "item" + secondCount + "_" + secondItemCount;
      secondItem = makeElement(secondItemName,secondMenu)      
      
      if (secondItemCount > 1)
         secondItem.prevItem = (keep with next line)
eval("item" + secondCount  + "_" +(secondItemCount-1));
      secondItem.setup = itemSetup;
      secondItem.setup(j,secondArray);
      
      if (secondItem.hasMore) makeThird();
   }
   secondMenu.setup(true,secondItem,topMenu,topItem);
}

Third Level Menu Creation

function makeThird(){
   thirdCounter = secondCount + "_" + secondItemCount;
   
   thirdArray = eval("arMenu" + thirdCounter);
   thirdName = "elGrandChild" + thirdCounter;
   thirdMenu = makeElement(thirdName)
   
   thirdMenu.setup = menuSetup;
   thirdItemCount=0;
   for (k=0; k<thirdArray.length; k+=3) {
      thirdItemCount++;
      thirdItemName =  (keep with next line)
         "item" + thirdCounter + "_" + thirdItemCount;
      thirdItem = makeElement(thirdItemName,thirdMenu);
      if (thirdItemCount > 1)
         thirdItem.prevItem =  (keep with next line)
eval("item" + thirdCounter + "_" + (thirdItemCount-1));
      thirdItem.setup = itemSetup;
      thirdItem.setup(k,thirdArray);
   }
   thirdMenu.setup(true,thirdItem,secondMenu,secondItem);
}

Now, that was an easy page. With all our menus created, we wait for the user to mouseover one of the links associated with a menu.