Hierarchical Menus Version 2 - Parameters
complete parameter script
Step-by-step instructions for including Hierarchical Menus in your pages have been given in all the menu columns, most recently in: [20] Hierarchical Menus, Version 2.
In the present browser session, we have created one important part of the Hierarchical Menu script: the parameter variables. In the text area below, these parameters have been incorporated into a cross-browser script that also includes browser detection overhead, backward-compatibility statements and external file inclusion statements.
Copy and paste the text area content into the HEAD of any page in which menus should appear. If you are using frames, paste the code into the document that appears in the navigation frame.
Don't forget to include links that pop up the menus in your page, and to correctly define the menu-creating arrays in hierArrays.js.
Copy the code above to your system's clipboard and paste into your HTML editor.
in NS4:
- Click the Select Code button.
- With your cursor over the highlighted selection, use your platform's Copy command, either through the File menu on the toolbar or a mouse right-click.
- Use your system's Paste command to insert the parameters into your editor.
in IE4:
- Click the Select Code button. The parameter list is copied to the clipboard automatically.
- Use your system's Paste command to insert the parameters into your editor.
This is the first interactive tool, here at DHTML Lab. We hope it has been of use. It is our intention to publish such menu-generating tools, associated with our columns, from time-to-time. Let us know what you think.






Produced by Peter Belesis and
All Rights Reserved. Legal Notices.
Created: June 17, 1998
Revised: July 21, 1998
URL: http://www.webreference.com/dhtml/dynomat/hiermenus/hierTool6.html
\n\n" +
"";
yy = startStr + paramStr + endStr;
tarea.value = yy;
if(IE4)sarea.innerText = yy;
setCookie('menuParams',paramStr)
}
window.onload = initIt;
topCount = 1;
areCreated = false;
beingCreated = false;
isOverMenu = false;
currentMenu = null;
allTimer = null;
function startIt() {
if (NS4) setTimeout("window.onresize=reDo",100);
makeTop();
}
function makeTop(){
beingCreated = true;
while(eval("window.arMenu" + topCount)) {
makeMenu(false,topCount);
topCount++
}
if (IE4) {
divColl = document.all.tags("DIV");
for (i=0; i 1) ? menu.item : null;
itemName = "item" + menuCount + "_" + menu.itemCount;
menu.item = makeElement(itemName,menu);
menu.item.prevItem = prevItem;
menu.item.setup = itemSetup;
menu.item.setup(menu.itemCount,menu.array);
if (menu.item.hasMore) {
makeMenu(true,menuCount + "_" + menu.itemCount,menu,menu.item);
menu = menu.parentMenu;
}
}
menu.lastItem = menu.item;
if (!isChild) parName = parItem = null;
menu.setup(isChild,parMenu,parItem);
}
function makeElement(whichEl,whichContainer) {
if (arguments.length==1) {
whichContainer = (NS4) ? window : document.body;
if (NS4) elWidth = menuWidth;
}
else {
if (NS4) elWidth = menuWidth-(borWid*2)-(itemPad*2);
}
if (NS4) {
eval(whichEl + "= new Layer(elWidth,whichContainer)");
}
else {
elStr = "";
whichContainer.insertAdjacentHTML("BeforeEnd",elStr);
}
return eval(whichEl);
}
function itemSetup(whichItem,whichArray) {
this.onmouseover = itemOver;
this.onmouseout = itemOut;
arrayPointer = (whichItem-1)*2;
this.dispText = whichArray[arrayPointer];
this.hasMore = whichArray[arrayPointer + 1];
htmStr = (this.hasMore) ? imgStr + this.dispText : this.dispText;
if (NS4) {
if (fntBold) htmStr = htmStr.bold();
if (fntItal) htmStr = htmStr.italics();
htmStr = htmStr.fontcolor(fntCol);
htmStr = "" + htmStr+ "";
this.document.write(htmStr);
this.document.close();
this.bgColor = backCol;
this.visibility = "inherit";
this.container = this.parentLayer;
if (whichItem == 1) {
this.top = borWid + itemPad;
}
else {
this.top = this.prevItem.top + this.prevItem.clip.height + separator;
}
this.left = borWid + itemPad;
this.clip.top = this.clip.left = -itemPad;
this.clip.bottom += itemPad;
this.clip.right = menuWidth-(borWid*2)-itemPad;
}
else {
with (this.style) {
padding = itemPad;
color = fntCol;
fontSize = fntSiz + "pt";
fontWeight = (fntBold) ? "bold" : "normal";
fontStyle = (fntItal) ? "italic" : "normal";
fontFamily = fntFam;
borderBottomWidth = separator + "px";
borderBottomColor = separatorCol;
borderBottomStyle = "solid";
backgroundColor = backCol;
}
this.innerHTML = htmStr;
this.container = this.offsetParent;
if (whichItem == 1) {
this.style.pixelTop = 0;
}
else {
this.style.pixelTop = this.prevItem.style.pixelTop + this.prevItem.offsetHeight;
}
this.style.pixelLeft = 0;
}
}
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;
if (hasParent) {
this.hasParent = true;
this.parentMenu = openCont;
this.parentItem = openItem;
this.parentItem.child = this;
}
else {
this.hasParent = false;
this.hideSelf = hideSelf;
}
if (NS4) {
this.bgColor = borCol;
this.fullHeight = this.lastItem.top + this.lastItem.clip.bottom + borWid;
this.clip.right = menuWidth;
this.clip.bottom = this.fullHeight;
}
else {
with (this.style) {
width = menuWidth;
borderWidth = borWid;
borderColor = borCol;
borderStyle = borSty;
}
this.lastItem.style.border="";
this.showIt(false);
this.onselectstart = cancelSelect;
this.moveTo = moveTo;
this.moveTo(0,0);
}
}
function popUp(menuName,e){
if (beingCreated) return;
if (!beingCreated && !areCreated) startIt();
hideAll();
currentMenu = eval(menuName);
xPos = (NS4) ? e.pageX : event.x;
yPos = (NS4) ? e.pageY : event.y;
currentMenu.moveTo(xPos,yPos);
currentMenu.keepInWindow()
currentMenu.isOn = true;
currentMenu.showIt(true);
}
function menuOver() {
this.isOn = true;
isOverMenu = true;
currentMenu = this;
if (this.hideTimer) clearTimeout(this.hideTimer);
}
function menuOut() {
if (IE4) {
if (event.srcElement.contains(event.toElement)) return;
}
this.isOn = false;
isOverMenu = false;
allTimer = setTimeout("currentMenu.hideTree()",10);
}
function itemOver(){
if (IE4) {
if (event.srcElement.tagName == "IMG") return;
this.style.backgroundColor = overCol;
this.style.color = overFnt;
}
else {
this.bgColor = overCol;
}
if (this.container.hasChildVisible) {
this.container.hideChildren(this);
}
if (this.hasMore) {
if (NS4) {
this.childX = this.container.left + (menuWidth - childOverlap);
this.childY = this.pageY + childOffset;
}
else {
this.childX = this.container.style.pixelLeft + (menuWidth - childOverlap);
this.childY = this.style.pixelTop + this.container.style.pixelTop + childOffset;
}
this.child.moveTo(this.childX,this.childY);
this.child.keepInWindow();
this.container.hasChildVisible = true;
this.container.visibleChild = this.child;
this.child.showIt(true);
}
}
function itemOut() {
if (IE4) {
if (event.srcElement.contains(event.toElement)
|| (event.fromElement.tagName=="IMG" && event.toElement.contains(event.fromElement)))
return;
this.style.backgroundColor = backCol;
this.style.color = fntCol;
}
else {
this.bgColor = backCol;
if (!isOverMenu) {
allTimer = setTimeout("currentMenu.hideTree()",10);
}
}
}
function moveTo(xPos,yPos) {
this.style.pixelLeft = xPos;
this.style.pixelTop = yPos;
}
function showIt(on) {
if (NS4) {this.visibility = (on) ? "show" : "hide"}
else {this.style.visibility = (on) ? "visible" : "hidden"}
}
function keepInWindow() {
scrBars = 20;
if (NS4) {
winRight = (window.pageXOffset + window.innerWidth) - scrBars;
rightPos = this.left + menuWidth;
if (rightPos > winRight) {
if (this.hasParent) {
parentLeft = this.parentMenu.left;
newLeft = ((parentLeft-menuWidth) + childOverlap);
this.left = newLeft;
}
else {
dif = rightPos - winRight;
this.left -= dif;
}
}
winBot = (window.pageYOffset + window.innerHeight) - scrBars;
botPos = this.top + this.fullHeight;
if (botPos > winBot) {
dif = botPos - winBot;
this.top -= dif;
}
}
else {
winRight = (document.body.scrollLeft + document.body.clientWidth) - scrBars;
rightPos = this.style.pixelLeft + menuWidth;
if (rightPos > winRight) {
if (this.hasParent) {
parentLeft = this.parentMenu.style.pixelLeft;
newLeft = ((parentLeft - menuWidth) + childOverlap);
this.style.pixelLeft = newLeft;
}
else {
dif = rightPos - winRight;
this.style.pixelLeft -= dif;
}
}
winBot = (document.body.scrollTop + document.body.clientHeight) - scrBars;
botPos = this.style.pixelTop + this.fullHeight;
if (botPos > winBot) {
dif = botPos - winBot;
this.style.pixelTop -= dif;
}
}
}
function popDown(menuName){
if (!areCreated) return;
whichEl = eval(menuName);
whichEl.isOn = false;
whichEl.hideTop();
}
function hideAll() {
for(i=1; i";
startIt();
}
function cancelSelect(){return false}
}
//-->