Old menu system I wrote in 2001

mouseMenuClass.js

/**********************************************************************************************************
XWeb Mouse Menu Class v2.4.5

Version 2 brings in several things.  First is the removal of proprietary MS code and the implementation of standard code.
It now only works with MSIE 5.5+ and Mozilla 0.9.2+.  The code has taken more of an object oriented approach and the introduction
of a menu handler (thanks to Erik @ WebFX for the idea).  If anyone finds any bugs, feel free to email them to me.  I've started to 
lay down the ground work for v3, which will include support for unlimited submenus.

***Version history***
Version 1:  Microsoft IE 4+ only.
Version 2:  Object Oriented and Widget encapsulation; MSIE 5.5+ and Mozilla support only, menu handler added, menu timer added.
Version 2.01:  Code Tightened
Version 2.02:  Bugs fixed.
Version 2.21:  More object orientated code added;  Now practically everything is an object;  Syntax to make menus has changed.
Version 2.39:  Added in icons for menu items;  Now, with switches, menu bar items have the native ability to be either links or javascript; Separators for the menus have been added.
Version 2.4.2:  Menu bars now have separators for menu bar items.  Menus now fade in using the Animator object.
Version 2.4.5:  Minor bug updates.

Browsers Supported:
MSIE 5.5+
Mozilla 0.9.2+
Netscape 6.1+

Online Documentation Coming Soon
(c) 2001   Jeremy McPeak  jeremy@wdonline.com
***********************************************************************************************************/
var interupt = false;
var subInterupt = false;
var mouseMenuSubFnRun = false;
var mouseMenuFnRun =false;
var menuTim, subTim;

setEvent(document,"mouseover",XWeb_MouseMenu_MouseHandler);
setEvent(document,"mouseout",XWeb_MouseMenu_MouseHandler);
setEvent(document,"click",XWeb_MouseMenu_MouseHandler);

var XWebMouseMenu = {
	menuBar         : {
		i : 0, all : {}, 
		getID : function () { return "xweb_MouseMenuBar_" + this.i++; },
		cont : function (eSrc) {
			for (i=0;i<this.i;i++) {
				if(eSrc && document.getElementById("xweb_MouseMenuBar_"+i+"").contains(eSrc)) return true;
			}
			return false;
		}
	},
	menuBarItem   : {
		i : 0, all : {}, getID : function () { return "xweb_MouseMenuBarItem_" + this.i++; }
	},
	menu              : {
		i : 0, all : {}, 
		getID : function () { return "xweb_MouseMenuMenu_" + this.i++; },
		cont : function (eSrc) {
			for (i=0;i<this.i;i++) {
				if (eSrc && document.getElementById("xweb_MouseMenuMenu_"+i+"").contains(eSrc)) return true;
			}
			return false;
		},
		checkShown : function () {
			var aIsShown = new Array();
			for (i=0;i<this.i;i++) {
				if (XWebMouseMenu.menu.all["xweb_MouseMenuMenu_"+i+""].shown) return ("xweb_MouseMenuMenu_"+i+"");
			}
			return false;
		}
	},
	menuItem      : {
		i : 0, all : {}, getID : function () { return "xweb_MouseMenuMenuItem_" + this.i++; }
	},
	subMenu         : {
		i : 0, all : {}, getID : function () { return "xweb_MouseMenuSubMenu_" + this.i++; }
	},
	all                      : {}
};

function XWeb_MouseMenu() {
	this.oLayer = document.createElement("DIV");
	this.oLayer.id = XWebMouseMenu.menuBar.getID();
	this.id = this.oLayer.id;
	XWebMouseMenu.menuBar.all[this.id] = this;
	XWebMouseMenu.all[this.id] = this;
	this.oLayer.className = "cls-xweb-mousemenu-bar";
	document.body.appendChild(this.oLayer);
	this.menuItems = [];
	this.base = XWeb_BaseClass;
	this.base(this.oLayer.id);
}

XWeb_MouseMenu.prototype = new XWeb_BaseClass();
XWeb_MouseMenu.prototype.add = function (sText,sClick,sSubMenu) {
	var num = this.menuItems.length;
	this.menuItems[num] = new XWeb_MouseMenuItem(this,sText,sClick,sSubMenu);
};

XWeb_MouseMenu.prototype.addSeparator = function () {
	var oSep = document.createElement("SPAN");
	oSep.className = "cls-xweb-mousemenu-bar-separator";
	oSep.innerHTML = "&nbsp;";
	this.oLayer.appendChild(oSep);
};

function XWeb_MouseMenuItem(oParent,sText,sClick,sSubMenu) {
	this.parent = oParent;
	this.oLayer = document.createElement("SPAN");
	this.oLayer.id = XWebMouseMenu.menuBarItem.getID();
	this.oLayer.className = "cls-xweb-mousemenu-baritem";
	this.id = this.oLayer.id;
	XWebMouseMenu.menuBarItem.all[this.id] = this;
	var args = XWeb_MouseMenuItem.arguments;
	if ((typeof args[3] == "boolean") || (typeof args[3] == "undefined") || (typeof args[3] == "number")) {
		if (args[3] || (typeof args[3] == "undefined")) this.oLayer.setAttribute("href",sClick,0);
		else this.oLayer.setAttribute("jstoexe",sClick,0);
	} else if  (typeof args[3] == "string") {
		this.parent[sSubMenu] = new XWeb_MouseMenu_Menu(this.parent,this);
		this.oLayer.setAttribute("menu",this.parent[sSubMenu].id,0);
	}
	this.oLayer.appendChild(document.createTextNode(sText));
	this.parent.oLayer.appendChild(this.oLayer);
}

XWeb_MouseMenuItem.prototype.mouseHover = function () {
	this.oLayer.className = "cls-xweb-mousemenu-baritem-over";
};

XWeb_MouseMenuItem.prototype.mouseOff = function () {
	this.oLayer.className = "cls-xweb-mousemenu-baritem";
};

function XWeb_MouseMenu_AbstractMenu(parent,menuItem) {
	if(!parent) return;
	this.menuItem = menuItem;
	this.parent = parent;
	this.oLayer = document.createElement("DIV");	
	this.oLayer.className = "cls-xweb-mousemenu-menu";
	this.oTable = document.createElement("TABLE");
	this.oTable.className = "cls-xweb-mousemenu-menutable";
	this.oTable.border = 0;
	this.oTable.cellSpacing = 0;
	this.oTable.cellPadding = 0;
	this.oTBody = document.createElement("TBODY");
	this.oTable.appendChild(this.oTBody);
	this.oLayer.appendChild(this.oTable);
	document.body.appendChild(this.oLayer);
	this.menuItems = [];
	this.shown = false;
	this.base = XWeb_BaseClass;
};

XWeb_MouseMenu_AbstractMenu.prototype = new XWeb_BaseClass();
XWeb_MouseMenu_AbstractMenu.prototype.addSeparator = function () {
	var tableRow = document.createElement("TR");
	var sepCell = document.createElement("TD");
	sepCell.className = "cls-xweb-mouseMenu-TD-separator";
	sepCell.colSpan = 3;
	var sepDiv = document.createElement("DIV");
	sepDiv .className = "cls-xweb-mouseMenu-Div-separator";
	sepCell.appendChild(sepDiv);
	tableRow.appendChild(sepCell);
	this.oTBody.appendChild(tableRow);
};

function XWeb_MouseMenu_Menu(parent,menuBarItemID) {
	this.classParent = XWeb_MouseMenu_AbstractMenu;
	this.classParent(parent,menuBarItemID);
	this.oLayer.id = XWebMouseMenu.menu.getID();
	this.id = this.oLayer.id;
	this.isSubMenu = false;
	XWebMouseMenu.menu.all[this.id] = this;
	XWebMouseMenu.all[this.id] = this;
	this.base(this.oLayer.id);
}

XWeb_MouseMenu_Menu.prototype = new XWeb_MouseMenu_AbstractMenu();
XWeb_MouseMenu_Menu.prototype.add = function (sText,sURL,sIcon,sSubMenu) {
	var num = this.menuItems.length;
	this.menuItems[num] = new XWeb_MouseMenu_MenuItem(this,sText,sURL,sIcon,sSubMenu);
};

XWeb_MouseMenu_Menu.prototype.showMenu = function() {
	var y = this.parent.getPosHeight();
	var x = this.parent.getLeft() + this.menuItem.oLayer.offsetLeft;
	if ((x+ this.getWidth()) > pg.x) this.moveTo(pg.x - this.getWidth(),y);
	else this.moveTo(x+1,y);
	this.menuItem.mouseHover();
	this.show();
	this.shown = true;
};

XWeb_MouseMenu_Menu.prototype.hideMenu = function(hax) {
	var oMenuShown = document.getElementById(this.id);
	releaseEvent(oMenuShown,"mouseenter",chkMouseEnter);
	clearTimeout(menuTim);
	if (!interupt || hax) {
		this.hide();
		this.shown = false;
		this.menuItem.mouseOff();
	}
	mouseMenuFnRun = false;
	interupt = false;
};

function XWeb_MouseMenu_SubMenu(parent,tableRowID) {
	this.classParent = XWeb_MouseMenu_AbstractMenu;
	this.classParent(parent,tableRowID);
	this.oLayer.id = XWebMouseMenu.subMenu.getID();
	this.id = this.oLayer.id;
	this.isSubMenu = true;
	XWebMouseMenu.subMenu.all[this.id] = this;
	XWebMouseMenu.all[this.id] = this;
	this.base(this.oLayer.id);	
}

XWeb_MouseMenu_SubMenu.prototype = new XWeb_MouseMenu_AbstractMenu();
XWeb_MouseMenu_SubMenu.prototype.add = function (sText,sURL,sIcon,bJsSwitch) {
	var num = this.menuItems.length;
	this.menuItems[num] = new XWeb_MouseMenu_MenuItem(this,sText,sURL,sIcon,bJsSwitch);
};

XWeb_MouseMenu_SubMenu.prototype.showMenu = function(eSrc) {
	var parentLength = this.parent.getLeft() + this.parent.getWidth();
	var y = this.menuItem.tableRow.offsetTop + this.parent.getTop();
	y = (user.ns)?y-1:y;
	if ((parentLength + this.getWidth()) > pg.x) this.moveTo(this.parent.getLeft() - this.getWidth() + 2,y);
	else this.moveTo(parentLength - 3,y);
	this.menuItem.mouseHover();
	this.show();
	this.shown = true;
};

XWeb_MouseMenu_SubMenu.prototype.hideMenu = function(eSrc) {
	var subShown = document.getElementById(this.id);
	releaseEvent(subShown,"mouseenter",chkSubMouseEnter);
	clearTimeout(subTim);
	if (!subInterupt) {
		this.menuItem.mouseOff();
		self.status = "";
		this.hide();
		this.shown = false;
		if (eSrc && document.getElementById(this.parent.id).contains(eSrc)) { 
			if (eSrc && eSrc.id == this.parent.id) this.parent.hideMenu();
		} else this.parent.hideMenu();
	}
	mouseMenuSubFnRun = false;
	subInterupt = false;
};

function XWeb_MouseMenu_MenuItem(objParent,sText,sURL,sIcon,sSubMenu) {
	this.parent = objParent;
	this.tableRow = document.createElement("TR");
	this.tableRow.id = XWebMouseMenu.menuItem.getID();
	this.tableRow.className = "cls-xweb-mousemenuitem-parent";
	
	this.leftCell = document.createElement("TD");
	this.leftCell.className = "cls-xweb-mousemenu-left";
	
	this.middleCell = document.createElement("TD");
	this.middleCell.className = "cls-xweb-mousemenu-middle";
	this.middleCell.appendChild(document.createTextNode(sText));
	this.rightCell = document.createElement("TD");
	this.rightCell.className = "cls-xweb-mousemenu-right";
	this.rightCell.align = "right";
	this.rightCell.vAlign = "middle";
	if (sIcon) {
		this.icon = document.createElement("IMG");
		this.icon.src = sIcon;
		this.leftCell.appendChild(this.icon);
		this.leftCell.align = "left";
		this.leftCell.vAlign = "middle";
	} else {
		this.leftCell.appendChild(document.createTextNode(" "));
	}
	this.tableRow.appendChild(this.leftCell);
	this.tableRow.appendChild(this.middleCell);
	this.tableRow.appendChild(this.rightCell);
	this.parent.oTBody.appendChild(this.tableRow);
	
	this.id = this.tableRow.id;
	XWebMouseMenu.menuItem.all[this.id] = this;
	XWebMouseMenu.all[this.id] = this;
	var args = XWeb_MouseMenu_MenuItem.arguments;
	if ((typeof args[4] == "boolean") || (typeof args[4] == "undefined") || (typeof args[4] == "number")) {
		if (args[4] || typeof args[4] == "undefined") this.tableRow.setAttribute("href",sURL,0);
		else this.tableRow.setAttribute("jstoexe",sURL,0);
		this.rightCell.appendChild(document.createTextNode(" "));
	} else if  (typeof args[4] == "string" && !this.parent.isSubMenu) {
		this.rightImg = document.createElement("IMG");
		this.rightImg.src = "img/arrow.gif";
		this.rightCell.appendChild(this.rightImg);
		this.parent[sSubMenu] = new XWeb_MouseMenu_SubMenu(this.parent,this);
		this.tableRow.setAttribute("submenu",this.parent[sSubMenu].id,0);
	}
}

XWeb_MouseMenu_MenuItem.prototype.mouseHover = function () {
	this.leftCell.className = "cls-xweb-mousemenu-left-highlight"
	this.middleCell.className = "cls-xweb-mousemenu-middle-highlight";
	this.rightCell.className = "cls-xweb-mousemenu-right-highlight";
};

XWeb_MouseMenu_MenuItem.prototype.mouseOff = function () {
	this.leftCell.className = "cls-xweb-mousemenu-left"
	this.middleCell.className = "cls-xweb-mousemenu-middle";
	this.rightCell.className = "cls-xweb-mousemenu-right";
};

function XWeb_MouseMenu_MouseHandler(event) {
	var eSrc = (user.ns)?event.target:window.event.srcElement;
	eSrc = (eSrc.className)?eSrc:eSrc.parentNode;
	eSrc = (!eSrc.tagName || eSrc.tagName == "HTML" || eSrc.tagName == "BODY")?0:eSrc;
	var clsName = (eSrc)?eSrc.className:0;

	switch (event.type) {
	case "mouseover":
			if (clsName == "cls-xweb-mousemenu-baritem") {
				if (!eSrc.getAttribute("menu")) {
					if (eSrc.getAttribute("href")) self.status = eSrc.getAttribute("href");
					var oSrc = XWebMouseMenu.menuBarItem.all[eSrc.id];
					oSrc.mouseHover();
				}
				var menuID = eSrc.getAttribute("menu");
				if (chkMenuShown() && chkMenuShown() != menuID) {
					if (!chkSubMenuShown()) XWebMouseMenu.menu.all[chkMenuShown()].hideMenu(true);
					if (chkSubMenuShown()) XWebMouseMenu.subMenu.all[chkSubMenuShown()].hideMenu();
				}
				if (menuID) {
					self.status = chkMenuShown();
					XWebMouseMenu.menu.all[menuID].showMenu();
				}
			} else if ((chkMenuShown() && !chkSubMenuShown())&& !chkMenuCont(eSrc) && !chkMenuBarCont(eSrc)) startMenuCountDown(chkMenuShown());
					
			if (eSrc.parentNode && eSrc.parentNode.className == "cls-xweb-mousemenuitem-parent") {
				var ePrnt = eSrc.parentNode;
				if (!ePrnt.getAttribute("submenu")) {
					var oSrc = XWebMouseMenu.menuItem.all[ePrnt.id];
					oSrc.mouseHover();
					self.status = ePrnt.getAttribute("href");
				}
				var subMenuID = ePrnt.getAttribute("submenu");
				if (chkSubMenuShown() && chkSubMenuShown() != subMenuID && !chkSubMenuCont(eSrc)) XWebMouseMenu.subMenu.all[chkSubMenuShown()].hideMenu(eSrc);
				if (subMenuID) {
					XWebMouseMenu.subMenu.all[subMenuID].showMenu();
				}
			} else if (chkSubMenuShown() && !chkSubMenuCont(eSrc) && !chkMenuBarCont(eSrc)) startSubMenuCountDown(eSrc,chkSubMenuShown());
		break;
		case"mouseout": 
			if (clsName == "cls-xweb-mousemenu-baritem-over" && !eSrc.getAttribute("menu")) {
				if (eSrc.getAttribute("href")) self.status = "";
				var oSrc = XWebMouseMenu.menuBarItem.all[eSrc.id];
				oSrc.mouseOff();
			}
			if (eSrc.parentNode && eSrc.parentNode.className == "cls-xweb-mousemenuitem-parent" && !eSrc.parentNode.getAttribute("submenu")) {
				var oSrc = XWebMouseMenu.menuItem.all[eSrc.parentNode.id];
				oSrc.mouseOff();
				self.status = "";
			}
		break;
		case "click":
			if ((eSrc && clsName == "cls-xweb-mousemenu-baritem-over" && eSrc.getAttribute("href")) || (eSrc.parentNode && eSrc.parentNode.className == "cls-xweb-mousemenuitem-parent" && eSrc.parentNode.getAttribute("href")) ) {
				window.location = (eSrc.getAttribute("href"))?eSrc.getAttribute("href"):eSrc.parentNode.getAttribute("href");
			} else if ((eSrc && clsName == "cls-xweb-mousemenu-baritem-over" && eSrc.getAttribute("jstoexe")) || (eSrc.parentNode && eSrc.parentNode.className == "cls-xweb-mousemenuitem-parent" && eSrc.parentNode.getAttribute("jstoexe"))) {
				var js = (eSrc.getAttribute("jstoexe"))?eSrc.getAttribute("jstoexe"):eSrc.parentNode.getAttribute("jstoexe");
				eval(js);
			} else if (chkMenuCont(eSrc) || chkMenuBarCont(eSrc) || chkSubMenuCont(eSrc)) {
				return;
			
			} else {
				for (i=0;i<XWebMouseMenu.menu.i;i++) {
					XWebMouseMenu.menu.all["xweb_MouseMenuMenu_"+i+""].hideMenu();
				}
				for (i=0;i<XWebMouseMenu.subMenu.i;i++) {
					XWebMouseMenu.subMenu.all["xweb_MouseMenuSubMenu_"+i+""].hideMenu();
				}
			}
		break;
	}
}

function chkMenuBarCont(eSrc) {
	for (i=0;i<XWebMouseMenu.menuBar.i;i++) {
		if(eSrc && document.getElementById("xweb_MouseMenuBar_"+i+"").contains(eSrc)) return true;
	}
	return false;
}

function chkMenuCont(eSrc) {
	for (i=0;i<XWebMouseMenu.menu.i;i++) {
		if (eSrc && document.getElementById("xweb_MouseMenuMenu_"+i+"").contains(eSrc)) return true;
	}
	return false;
}

function chkMenuShown() {
	var aIsShown = new Array();
	for (i=0;i<XWebMouseMenu.menu.i;i++) {
		if (XWebMouseMenu.menu.all["xweb_MouseMenuMenu_"+i+""].shown) return ("xweb_MouseMenuMenu_"+i+"");
	}
	return false;
}

function chkSubMenuShown() {
	for (i=0;i<XWebMouseMenu.subMenu.i;i++) {
		if (XWebMouseMenu.subMenu.all["xweb_MouseMenuSubMenu_"+i+""].shown) return ("xweb_MouseMenuSubMenu_"+i+"");
	}
	return false;
}

function chkSubMenuCont(eSrc) {
	for (i=0;i<XWebMouseMenu.subMenu.i;i++) {
		if (eSrc && document.getElementById("xweb_MouseMenuSubMenu_"+i+"").contains(eSrc)) return true;
	}
	return false;
}

function startMenuCountDown(sMenuShown) {
	var oMenuShown = document.getElementById(sMenuShown);
	if (mouseMenuFnRun) return;
	if (oMenuShown) {
		setEvent(oMenuShown,"mouseenter",chkMouseEnter);
		mouseMenuFnRun = true;
		menuTim = setTimeout(function (){ XWebMouseMenu.menu.all[sMenuShown].hideMenu();},1000);
	}
}

function startSubMenuCountDown(eSrc,sSubShown) {
	var oSubShown = document.getElementById(sSubShown);
	if (mouseMenuSubFnRun) return;
	if (oSubShown) {
		setEvent(oSubShown,"mouseenter",chkSubMouseEnter);
		mouseMenuSubFnRun = true;
		subTim = setTimeout(function (){ XWebMouseMenu.subMenu.all[sSubShown].hideMenu(eSrc);},1000);
	}
}

function chkMouseEnter(event) {
	var eSrc = (user.ns)?event.target:window.event.srcElement;
	eSrc = (eSrc.className)?eSrc:eSrc.parentNode;
	if (user.ie) {
		if (eSrc.id == chkMenuShown()) interupt = true;
		else interupt = false;
	}
	if (user.ns) interupt = true;
}

function chkSubMouseEnter(event) {
	var eSrc = (user.ns)?event.target:window.event.srcElement;
	eSrc = (eSrc.className)?eSrc:eSrc.parentNode;
	if (user.ie) {
		if (eSrc.id == chkSubMenuShown()) subInterupt = true;
		else subInterupt = false;
	}
	if (user.ns) subInterupt = true;
}