Cross-Browser Hierarchical Menus
hiding part or all of the menu tree

Webreference

Contents

Back to the normal script.

Recall that the selective or full hiding of the menu tree is handled by five functions, all of which are methods of the menu element:

    hideTree() - controls the possible hiding of all menus;
hideChildren() - hides the child menus of the current menu;
 hideParents() - hides the parent menus of the current menu;
     hideTop() - controls the delayed hiding of the top level menu;
    hideSelf() - hides the top level menu;

These functions have not undergone any changes to become cross-browser. They are repeated below for reference. For a detailed discussion, on the logic of their statements, please refer to our previous column.

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

function hideChildren(item) {
  if (this.visibleChild.hasChildVisible) {
    this.visibleChild.visibleChild.showIt(false);
    this.visibleChild.hasChildVisible = false;
  }

  if (!this.isOn || !item.hasMore || (keep with next line)
      this.visibleChild != this.child) {
    this.visibleChild.showIt(false);
    this.hasChildVisible = false;
  }
}

function hideParents() {

  if (this.hasParent) {
    this.showIt(false);
    if (this.parentMenu.hasParent) {
      this.parentMenu.isOn = false;    
      this.parentMenu.showIt(false);
      this.parentMenu.parentMenu.isOn = false;
      whichEl = this.parentMenu.parentMenu
    }
    else {
      this.parentMenu.isOn = false;
      whichEl = this.parentMenu;
    }
  }
  else {
    whichEl = this;
  }

  whichEl.hideTop();
}

function hideTop() {
  whichEl = this;
  this.hideTimer = (keep with next line)
    setTimeout("whichEl.hideSelf()",mSecsVis);
}

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

Let's move on to some final comments, before our code pages.