spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / column21

Logo

Hierarchical Menus: Version 3
menu hiding

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

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 = 140;
childOffset = 5;
perCentOver = 30;
secondsVisible = 1;

fntCol = "black";
fntSiz = "10";
fntBold = true;
fntItal = false;
fntFam = "serif";
backCol = "#2D9B83";
overCol = "#4BB9A1";
overFnt = "black";

borWid = 2;
borCol = "darkgreen";
borSty = "solid";
itemPad = 3;

imgSrc = "tri.gif";
imgSiz = 10;

separator = 1;
separatorCol =
   "darkgreen";

isFrames = false;

keepHilite = true; 
NSfontOver = false;
clickStart = true;
clickKill = true;
showVisited = "";

Background Reading:

hide functions:
  column 14 (1)
  column 14 (2)
  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.

hideAll()

The hideAll() function is called to hide all menu trees. In version 2, it looped through all created top-level menus (topCount), and hid any visible children, then the top-level menu. Since version 3 allows any child menu to be the first-displayed menu, our for loop identifies the menu stored in a top-level menu's startChild property. It then hides children lower in the hierarchy than startChild, and finally startChild itself:

function hideAll() {
    for(i=1;i<topCount;i++) {
        temp = eval("elMenu" + i + ".startChild");
        temp.isOn = false;
        if (temp.hasChildVisible) temp.hideChildren();
        temp.showIt(false);
    }    
}

Menu Tree Hiding

The three functions used to hide parts or all of a menu hierarchy, hideTree(), hideParents() and hideChildren(), have not changed since version 2:

function hideTree() { 
    allTimer = null;
    if (isOverMenu) return;
    if (this.hasChildVisible) {
        this.hideChildren();
    }
    this.hideParents();
}
function hideParents() {
    tempMenu = this;
    while (tempMenu.hasParent) {
        tempMenu.showIt(false);
        tempMenu.parentMenu.isOn = false;        
        tempMenu = tempMenu.parentMenu;
    }
    tempMenu.hideTop();
}
function hideChildren(item) {
    tempMenu = this.visibleChild;
    while (tempMenu.hasChildVisible) {
        tempMenu.visibleChild.showIt(false);
        tempMenu.hasChildVisible = false;
        tempMenu = tempMenu.visibleChild;
    }

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

hideTop()

The hideTop() function calls hideSelf() to hide the first-displayed menu in a menu tree (startChild). In previous versions, it used a timer variable to delay the call to hideSelf(). In version 3, where a click event can hide a menu tree, hideSelf() is either called immediately (when clickStart is true) or with a delay, as before.
function hideTop() {
    whichEl = this;
    (clickKill) ? whichEl.hideSelf() :
[cc]   (this.hideTimer = setTimeout("whichEl.hideSelf()",mSecsVis));
}

hideSelf()

Finally, hideSelf(), which hides the first-displayed menu in a tree, remains the same:

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

Hiding on a click

Recall that if we have set clickKill to true, then everytime the user clicks in the page, the clicked() function is called:

function clicked() {
    if (!isOverMenu && currentMenu!=null && !currentMenu.isOn) {
        whichEl = currentMenu;
        whichEl.hideTree();
	}
}

clicked() first checks to see if the user's mouse is over a menu (isOverMenu). If it isn't, it proceeds to verify that a visible menu exists and that its isOn property is not true. If all the conditions are met, it hides the currentMenu tree.

Only a couple more, equally painless, pages to come. The first addresses those nasty "denial" error messages.


Produced by Peter Belesis and


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

All Rights Reserved. Legal Notices.
Created: Sept. 03, 1998
Revised: Sept. 03, 1998

URL: http://www.webreference.com/dhtml/column21/hier3Hide.html