DHTML Lab: Hierarchical Menus Version 3 | 12

Hierarchical Menus: Version 3
menu setup

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 = 120;
childOverlap = 50;
childOffset = 5;
perCentOver = null;
secondsVisible = .5;
fntCol = "black";
fntSiz = 10;
fntBold = true;
fntItal = true;
fntFam = "sans-serif";
backCol = "#DDDDDD";
overCol = "#CCCCCC";
overFnt = "black";
borWid = 2;
borCol = "black";
borSty = "solid";
itemPad = 3;
imgSrc = "tri.gif";
imgSiz = 10;
separator = 1;
separatorCol = "black";
isFrames = false;
keepHilite = true; 
NSfontOver = false;
clickStart = true;
clickKill = true;
showVisited = "";

Background Reading:

menuSetup():
  column 14
  column 15
  column 18
  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.

The menuSetup() function actually fares a lot better than itemSetup(), with very few alterations. It is passed three arguments by NS4 and only the first by IE4 (in makeMenuNS() and makeMenuIE()). The second and third arguments are used to determine child menu dependency, which IE4 establishes in itemSetup().

function menuSetup(hasParent,openCont,openItem) {
  this.onmouseover = menuOver;
  this.onmouseout = menuOut;
  
  this.showIt = showIt;
  this.keepInWindow = keepInWindow;
  this.hideTree = hideTree
  this.hideParents = hideParents;
  this.hideChildren = hideChildren;
  this.hideTop = hideTop;
  this.hasChildVisible = false;
  this.isOn = false;
  this.hideTimer = null;
  this.childOverlap = (perCentOver != null) ?
[cc]   ((perCentOver/100) * this.menuWidth) : childOverlap
  this.currentItem = null;
  this.hideSelf = hideSelf;
    
  if (hasParent) {
    this.hasParent = true;
    this.parentMenu = openCont;
    if (NS4) {
      this.parentItem = openItem;
      this.parentItem.child = this;
    }
  }
  else {
    this.hasParent = false;
  }
  if (NS4) {
    this.bgColor = this.menuBorCol;
    this.fullHeight = this.lastItem.top
[cc]  + this.lastItem.clip.bottom + borWid;
    this.clip.right = this.menuWidth;
    this.clip.bottom = this.fullHeight;
  }
  else {
    with (this.style) {
      width = this.menuWidth;
      borderWidth = borWid;
      borderColor = this.menuBorCol;
      borderStyle = borSty;
    }
    this.lastItem.style.border="";
    this.fullHeight = this.scrollHeight;
    this.showIt(false);
    this.onselectstart = cancelSelect;
    this.moveTo = moveTo;
    this.moveTo(0,0);
  }
}

The first statements are the same as in version 2, with the usual property and method assignments:

  this.onmouseover = menuOver;
  this.onmouseout = menuOut;
  
  this.showIt = showIt;
  this.keepInWindow = keepInWindow;
  this.hideTree = hideTree
  this.hideParents = hideParents;
  this.hideChildren = hideChildren;
  this.hideTop = hideTop;
  this.hasChildVisible = false;
  this.isOn = false;
  this.hideTimer = null;

Unlike version 2, every menu has a childOverlap property of its own, since the pixel value of the overlap may differ from menu-to-menu, if you use perCentOver and the menus are different widths.

  this.childOverlap = (perCentOver != null) ?
[cc]   ((perCentOver/100) * this.menuWidth) : childOverlap;

Every menu is given a currentItem property that stores the item being moused over. We will need this if the keepHilite parameter is true. It is initialized to null;

  this.currentItem = null;

Previous versions gave only the top-level menu a hideSelf() method. Recall that it was used to hide the top-level menu after a mouseout delay. In version 3, any menu in the hierarchy can appear as the first one in the cascade. Therefore, all menus need the hideSelf() method.

  this.hideSelf = hideSelf;

  if (hasParent) {
    this.hasParent = true;
    this.parentMenu = openCont;
    if (NS4) {
      this.parentItem = openItem;
      this.parentItem.child = this;
    }
  }
  else {
    this.hasParent = false;
  }

The remainder of the function is the same as before, except that it accounts for tree-specific parameters. One line has been added to the IE4 code (this.fullHeight = this.scrollHeight) that sets the fullHeight property (used by the keepInWindow() method) of the item.

  if (NS4) {
    this.bgColor = this.menuBorCol;
    this.fullHeight = this.lastItem.top
[cc]   + this.lastItem.clip.bottom + borWid;
    this.clip.right = this.menuWidth;
    this.clip.bottom = this.fullHeight;
  }
  else {
    with (this.style) {
      width = this.menuWidth;
      borderWidth = borWid;
      borderColor = this.menuBorCol;
      borderStyle = borSty;
    }
    this.lastItem.style.border="";
    this.fullHeight = this.scrollHeight;
    this.showIt(false);
    this.onselectstart = cancelSelect;
    this.moveTo = moveTo;
    this.moveTo(0,0);
    
  }

Our menus are now created, both physically, and as JavaScript objects, so the next step is to display them.