DHTML Lab: Hierarchical Menus, III; Frames - Menu Creation

Hierarchical Menus in Frames
Menu Creation

Tri-level Menu Creation

Recall that our technique involves the option of having up to three levels in the menu hierarchy. The menus in the three levels are created by the makeTop(), makeSecond() and makeThird() functions.

Our present frames-based technique uses these three functions, as is. Refer to our previous discussion of the function statements.

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;
}
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 = "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);
}
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 = "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);
}

Positioned Element Creation

All three of the functions call makeElement(), which actually creates the positioned elements for the menus. The frames version of makeElement() requires a couple of simple modifications.

First, the values of window and document.body, in the conditional creation of whichContainer have been changed to main and main.document.body, for Navigator and Explorer, respectively. This simply tells the script that all top-level menus will be created in the frame called main.

function makeElement(whichEl,whichContainer) {
 if (arguments.length==1)
  whichContainer = (NS4) ? main : main.document.body;
 if (NS4) {
  eval(whichEl + "= new Layer(menuWidth,whichContainer)");
 }
 else {
  elStr = "<DIV ID=" + whichEl
        + " STYLE='position:absolute'></DIV>";
  whichContainer.insertAdjacentHTML("BeforeEnd",elStr);
  eval(whichEl + "= main." + whichEl);
 }
   
 return eval(whichEl);
}

makeElement() returns the newly-created element back to the calling functions, by evaluating the whichEl string. whichEl, in the frames version, refers to different objects for the two browsers. In Navigator, whichEl is created in the navigation frame, and addresses the positioned element created in the main frame. In Explorer, whichEl is the actual element inserted in the main frame. Therefore, in the Explorer-specific part of makeElement(), we add a statement that defines a navigation frame whichEl variable which is assigned the main frame whichEl element. Now both browsers can share the same variable for addressing the menu elements.

Next, a look at the two functions that set up the new menu element properties and methods.