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

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


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


Parameters used for the menus on this page:

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;

Menu Animated GIF
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.

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 itemOver() and itemOut() functions have been discussed in detail in column 14, column 15, and column 18.

Mousing Over an Item

The itemOver() function is exactly the same as in Version 1, only we locate the source of the event for Explorer using menuLoc.

function itemOver(){
  if (IE4) {
    theEvent = menuLoc.event;
    if (theEvent.srcElement.tagName == "IMG") return;
    this.style.backgroundColor = overCol;
    this.style.color = overFnt;
  else {
    this.bgColor = overCol;
  if (this.container.hasChildVisible) {
  if(this.hasMore) {
    if (NS4) { 
      this.childX = this.container.left +
[cc]    (menuWidth - childOverlap);
      this.childY = this.pageY + childOffset;
    else {
      this.childX = this.container.style.pixelLeft +
[cc] (menuWidth - childOverlap);
      this.childY = this.style.pixelTop +
[cc]    this.container.style.pixelTop + childOffset;
    this.container.hasChildVisible = true;
    this.container.visibleChild = this.child;

Mousing Out of an Item

Again, the only change to the function is the menuLoc identifier for the event.

function itemOut() {
  if (IE4) {
    theEvent = menuLoc.event;
    if (theEvent.srcElement.contains(theEvent.toElement)
     || (theEvent.fromElement.tagName=="IMG" &&
[cc] theEvent.toElement.contains(theEvent.fromElement)))
    this.style.backgroundColor = backCol;
    this.style.color = fntCol;
  else {
    this.bgColor = backCol;
    if (!isOverMenu) {
      allTimer = setTimeout("currentMenu.hideTree()",10);

Notice that, even though the setTimeout() for menu hiding is used in menuOut(), it has been retained here for Navigator, as well!

If we do not specify a border for our menus, the event behavior will be the same as in Version 1, and we'll need to hide the menus by setting the timeout in the item's mouseout handler. If the menu's mouseout fires first, isOverMenu is set to false, so itemOut() knows that menu hiding is its responsibility.

More review, next page, with the in-window placement and link functions.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: May. 22, 1998
Revised: May. 22, 1998

URL: http://www.webreference.com/dhtml/column20/hier2Itover.html