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

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


Cross-Browser Hierarchical Menus
second and third level menu creation



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) {
      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;
      if (secondItem.hasMore) makeThird();

Third Level Menu Creation

function makeThird(){
   thirdCounter = secondCount + "_" + secondItemCount;
   thirdArray = eval("arMenu" + thirdCounter);
   thirdName = "elGrandChild" + thirdCounter;
   thirdMenu = makeElement(thirdName)
   thirdMenu.setup = menuSetup;
   for (k=0; k<thirdArray.length; k+=3) {
      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;

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.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Feb. 27, 1998
Revised: Feb. 27, 1998

URL: http://www.webreference.com/dhtml/column15/menu2Child.html