DHTML Lab: Hierarchical Menus Ver. 2 (Cross-Browser/Frames); Menu Navigation

Hierarchical Menus Ver. 2 (Cross-Browser/Frames)
navigating the menus

WebReference

Parameters used for the menus on this page:

menuWidth = 120;
childOverlap = 5;
childOffset = 5;
perCentOver = null;
secondsVisible = .5;
fntCol = "black";
fntSiz = 8;
fntBold = false;
fntItal = false;
fntFam = 
"MS Sans Serif";
backCol = "#9FB7C0";
overCol = "#507F90";
overFnt = "white";
borWid = 2;
borCol = "#9FB7C0";
borSty = "outset";
itemPad = 2;
imgSrc = "tri.gif";
imgSiz = 8;
separator = 0;
separatorCol = "";
isFrames = false;

Animated GIF demonstrating heirarchical menus for non-DHTML browsers.

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

Mousing Over the Menu

When the user mouses over any menu, the menuOver() function is called. It does not differ from its Version 1 incarnation. The relevant variables are updated and if the menu's hide timer has previously been set, it is cleared to avoid inadvertent hiding of the menu:

function menuOver() {
  this.isOn = true;
  isOverMenu = true;
  currentMenu = this;
  if (this.hideTimer) clearTimeout(this.hideTimer);
}

Mousing Out of the Menu

The menuOut() function has two changes from the previous version.

First, recall that in the Explorer event bubbling scenario, we have had to track the source of some mouse events to avoid background color "flicker." Review our discussion on the relevant page in column 15. Since the event may fire in either the window or a frame, we identify it using the menuLoc variable:

function menuOut() {
  if (IE4) {
    theEvent = menuLoc.event;
    if (theEvent.srcElement.contains(theEvent.toElement)) return;
  }
  this.isOn = false;
  isOverMenu = false;
  allTimer = setTimeout("currentMenu.hideTree()",10); 
}

The second change involves the final statement, which in version 1 was:

if (IE4) allTimer = setTimeout("currentMenu.hideTree()",10);

In our previous version, the menu element boundaries were identical to item boundaries, since the menu did not take up any additional screen space.

In Version 2, the menu provides the borders, so if a border is specified, the user's mouse physically moves over the menu element. Therefore, the menu events fire at a different time than the item events.

In Version 1, they fired at exactly the same pixel on the screen. This meant that, in Navigator's event hierarchy, the item event fired after the menu event. (see column 14) Thus, we allowed the item's mouseout handler to hide the menu.

In Version 2, when mousing out, the mouse first leaves the item, then the menu, so the menu hiding call now occurs in the menuOut() function for both browsers.

On the next page, we'll review the item mouse event functions.