DHTML Lab: Hierarchical Menus Version 3 | 5

Hierarchical Menus: Version 3
menu hiding

WebReference

Click the link above to reveal menu. Click anywhere on the page to hide menu.

Parameters used for the menus on this page:

menuVersion = 3;
menuWidth = 140;
childOffset = 5;
perCentOver = 30;
secondsVisible = 1;
fntCol = "black";
fntSiz = "10";
fntBold = true;
fntItal = false;
fntFam = "serif";
backCol = "#2D9B83";
overCol = "#4BB9A1";
overFnt = "black";
borWid = 2;
borCol = "darkgreen";
borSty = "solid";
itemPad = 3;
imgSrc = "tri.gif";
imgSiz = 10;
separator = 1;
separatorCol =
   "darkgreen";
isFrames = false;
keepHilite = true; 
NSfontOver = false;
clickStart = true;
clickKill = true;
showVisited = "";

Background Reading:

hide functions:
  column 14 (1)
  column 14 (2)
  column 20

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

The [cc] symbol denotes code continuation. The code is part of the preceding line. It is placed on a new line for column formatting considerations only.

hideAll()

The hideAll() function is called to hide all menu trees. In version 2, it looped through all created top-level menus (topCount), and hid any visible children, then the top-level menu. Since version 3 allows any child menu to be the first-displayed menu, our for loop identifies the menu stored in a top-level menu's startChild property. It then hides children lower in the hierarchy than startChild, and finally startChild itself:

function hideAll() {
    for(i=1;i<topCount;i++) {
        temp = eval("elMenu" + i + ".startChild");
        temp.isOn = false;
        if (temp.hasChildVisible) temp.hideChildren();
        temp.showIt(false);
    }    
}

Menu Tree Hiding

The three functions used to hide parts or all of a menu hierarchy, hideTree(), hideParents() and hideChildren(), have not changed since version 2:

function hideTree() { 
    allTimer = null;
    if (isOverMenu) return;
    if (this.hasChildVisible) {
        this.hideChildren();
    }
    this.hideParents();
}

function hideParents() {
    tempMenu = this;
    while (tempMenu.hasParent) {
        tempMenu.showIt(false);
        tempMenu.parentMenu.isOn = false;        
        tempMenu = tempMenu.parentMenu;
    }
    tempMenu.hideTop();
}

function hideChildren(item) {
    tempMenu = this.visibleChild;
    while (tempMenu.hasChildVisible) {
        tempMenu.visibleChild.showIt(false);
        tempMenu.hasChildVisible = false;
        tempMenu = tempMenu.visibleChild;
    }
    if (!this.isOn || !item.hasMore || this.visibleChild != this.child) {
        this.visibleChild.showIt(false);
        this.hasChildVisible = false;
    }
}

hideTop()

function hideTop() {
    whichEl = this;
    (clickKill) ? whichEl.hideSelf() :
[cc]   (this.hideTimer = setTimeout("whichEl.hideSelf()",mSecsVis));
}

hideSelf()

Finally, hideSelf(), which hides the first-displayed menu in a tree, remains the same:

function hideSelf() {
    this.hideTimer = null;
    if (!this.isOn && !isOverMenu) { 
        this.showIt(false);
    }
}

Hiding on a click

Recall that if we have set clickKill to true, then everytime the user clicks in the page, the clicked() function is called:

function clicked() {
    if (!isOverMenu && currentMenu!=null && !currentMenu.isOn) {
        whichEl = currentMenu;
        whichEl.hideTree();
	}
}

clicked() first checks to see if the user's mouse is over a menu (isOverMenu). If it isn't, it proceeds to verify that a visible menu exists and that its isOn property is not true. If all the conditions are met, it hides the currentMenu tree.

Only a couple more, equally painless, pages to come. The first addresses those nasty "denial" error messages.