DHTML Lab: Hierarchical Menus Version 3 | 13

Hierarchical Menus: Version 3
menu mouse events

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

Background Reading:

popDown():
  column 14
  column 15
  column 18
  column 20

menuOver():
  column 14
  column 15
  column 18
  column 20

menuOut():
  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.

You'll be happy to know that you are reading our obligatory short page! It's a little like reading a page of dialogue in Proust.

popDown()

The function called when a user mouses out of the HTML links, popDown(), has only a couple of version 3 modifications:

function popDown(menuName){
    if (!isLoaded || !areCreated) return;
    whichEl = eval(menuName);
    whichEl.isOn = false;
    if (!clickKill) whichEl.hideTop();
}

We check the new isLoaded variable as well as areCreated, and return if either of them are false. The next two statements are the same: the visible menu is identified and assigned to whichEl and its isOn property is set to false. The last statements accounts for the new click option. If the menus are to be hidden with a mouseover, then the menu's hideTop() method is called. Otherwise, the menu remains visible.

Menu mouseover

The menuOver() function is exactly the same as in previous versions: properties are set and the hide timer is cleared.

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

Menu mouseout

menuOut() is also the same, except that, now, the menu tree is hidden on a mouseout only if clickKill is false. If we have selected the click event for mouse hiding, the hideTree() method of the menu is not called.

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

Mousing over and out of items, unfortunately, is a lot different in this version. So, back to those long pages.