Cascading Menu Script Explained

You can refer to the full JavaScript code for HMenu.js at any time through this link.

The Script

Let's recap on the elements dealt with in Cascading Menus. A menu is made up of four basic items - the menu itself, menu items, submenu items, and submenus. A menu item is a single entry in a menu. A submenu item opens a submenu when the mouse is moved over it. The menu is the container for all the menu items and submenu items. All menus that are not submenus are referred to as top level menus.

The menus themselves are defined using HTML and a lot of DIV elements, one placed inside the other, and all placed inside the grandaddy DIV element, menuContainer.

initMenu()

To make the menus come to life, the webmaster has to add onload="initMenu()" to their document's BODY tag. initMenu() is the function that gets the ball rolling.

Which brings us on to the file where all the real code is contained, HMenu.js. The rest of the article will walk you through it, section by section.

function initMenu(){
	// test for IE4+, it won't work otherwise
	if(!document.all) return false;
	
	menuContainer.activeMenu = null;
	menuContainer.closeAll = closeAll;
	findMenus();
	attachMenus();
}

initMenu() looks to be a very plain function, and it is. First, it makes sure that the browser is Internet Explorer 4 or above. This is done with if(!document.all) return false;. What this does is check to see if the object document.all exists. document.all is the object that Internet Explorer uses to keep track of all the information in a web page. Netscape Navigator and others don't use this object, so if it doesn't exist then we aren't using Internet Explorer and we exit the function.

Next we initialize the variable menuContainer.activeMenu. menuContainer is the DIV element that we use to hold all the menu definitions. We just give it a variable activeMenu so that we can always tell which, if any, menu is open. Then we add a function to the menuContainer element, closeAll. This function will close the active menu, and all its submenus.

After we attach the variable and the function to menuContainer, we then run the function findMenus(). This function sorts though all the HTML that we created to find all the real menu definitions, including the submenus.

findMenus()

function findMenus(){
	var cTag = menuContainer.children;
	for(var i=0; i < cTag.length; i++){
		tcTag = cTag[i];
		if(tcTag.className == "menu"){
			var tMenu = findSubMenus(tcTag);
			menus[menus.length] = tMenu;
		}
	}
	for(var i=0; i < menus.length; i++){
		var tcTag = menus[i]
		moveHTML(tcTag);
	}
	for(var i=0; i < menus.length; i++){
		var tcTag = menus[i];
		setupMenu(tcTag);
	}
}

It does this by using the special collection (a collection is an array of objects or elements) children. This is all of the elements immediately inside of any given HTML element. I say immediate because, like real children, you don't count the ones that belong to one of your children (grandchildren). It stores all of the children of the menuContainer element to the variable cTag. Then, we loop through each of the children, storing the actual child element in the variable tcTag. You don't have to do this, but it makes it easier to type later.

Then we check to see if it is a menu. Since all menus, including submenus, have the class="menu" inside their DIV element, we can check for that by examining the child's className property. If the className property is set to menu, then bingo, we have a menu! We must also check to see if there are any submenus. That is done with the function findSubMenus(). We pass findSubMenus() the menu element, and then it gives us back a genuine menu object. Now, before we delve into this new function, let's explain what a menu object is.

The Menu Object

function Menu(){
	this.id = "";
	this.subMenus = new Array();
	this.items = new Array();
	this.hasChildren = false;
	this.isChild = false;
	this.parentMenu = null;
	this.parentItem = null;
}

A menu object is a special type of function that doesn't really do anything. Instead, it just stores information into whatever variable is used to create the object using this.

To create a menu object, you use the new operator:

var menuObject = new Menu();

So in our case, anything stored using this, would actually be stored in menuObject. In other programming languages, it would be called a class. A menu object contains its id (set later), a collection of all its subMenus (if it has any), a collection of the items in the menu, and information regarding its location in the menu hierarchy.

hasChildren tells us whether or not this menu has any submenus and isChild tells us if this is a submenu. If this is a submenu, parentMenu will point to the menu that this sprouts from, and parentItem will point to the item that this sprouts from.

findSubMenus()

function findSubMenus(menu){
	var cMenu = menu.children;
	var tMenu = new Menu();
	tMenu.id = menu.id;
	
	for(var i=0; i < cMenu.length; i++){
		var tcMenu = new Item();
		tcMenu.id = cMenu[i].id;
		if(tcMenu.id.indexOf("subMenu") != -1){
			++i;
			var subMenu = cMenu[i];
			tMenu.subMenus[tMenu.subMenus.length] = findSubMenus(subMenu);
			tMenu.subMenus[(tMenu.subMenus.length - 1)].isChild = true;
			tMenu.subMenus[(tMenu.subMenus.length - 1)].parentMenu = tMenu;
			tMenu.subMenus[(tMenu.subMenus.length - 1)].parentItem = tcMenu;
			tMenu.hasChildren = true;
			tcMenu.hasMenu = true;
			tcMenu.menu = tMenu.subMenus[(tMenu.subMenus.length - 1)];
		}
		tcMenu.parentMenu = tMenu;
		tMenu.items[tMenu.items.length] = tcMenu;
	}
	return tMenu;
}

findSubMenus() starts like findMenus() by storing the children for the element in the variable cMenu. Then we create a menu object, which we discussed a moment ago, in tMenu. Now we set the menu object's id to be the same as the element's id. Once again we loop through all the of element's children, only this time we create a new item object in tcMenu. An item object stores the item element's id, a variable that points to the menu it is in (parentMenu), a variable to tell us if the item is a submenu item (hasMenu), and if it is a submenu item the variable menu will point to the submenu.

We are trying to see if the item's class is set to subMenu. As we already know, a submenu item comes just before the definition for the submenu, so when we find a submenu item we automatically jump to the next child (++i). Then we search this new submenu for more more submenus by calling findSubMenus() again, passing the newly found submenu. The menu object returned by findSubMenus() is then added to the current menu's subMenus collection, and we set the properties in the menu object that pertain only to a submenu.

Confusing? Functions like this (called recursive functions, because they call themselves) usually are. Let's try a practical example from the first article, with the editors. First findMenus() finds menu1, the only menu we have. It calls findSubMenus() and passes menu1. findSubMenus() then starts looping through menu1 and immediately finds the first submenu item, the item for Bruce Morris (submenu1_1). It then jumps to the next child in menu1, which is menu1_1, the submenu for Bruce Morris. We call findSubMenus() again, this passing menu1_1. When we loop though menu1_1's children, we never find any items with subMenu in className, so instead of calling findSubMenus() again, we create all the menu items, and then pass back the new menu object. Now we are back in the original findSubMenus() call, and in the next loop we find the submenu item for Charlie Morris, and the process starts again. After we loop through all the submenu items and menus, we pass back the menu object for menu1 to findMenus() and we try to find another menu, but we don't, so findMenus() continues in a different way.

Ok, back to findSubMenus(). As we are looping though the menu's items, if the item is not a submenu item then we don't need to call findSubMenus() again. After we check to see if an item is a submenu item, whether it is or not, we add the item to the menus items collection. Once we exhaust all the items in the menu, we will pass the menu object back to findMenus()...

findMenus() - Continued...

As we search menuContainer for menus, the menu objects that are returned from findSubMenus() are stored in a global array called simply enough menus. This array will contain all of the top level menus for the page.

After we find all the menus, it's time to do the complicated stuff.

For convenience, content for the menus is written in HTML, but to make all the menus separate boxes, we have first to move the HTML around. This is accomplished in the second loop in findMenus().

function findMenus(){
	var cTag = menuContainer.children;
	for(var i=0; i < cTag.length; i++){
		tcTag = cTag[i];
		if(tcTag.className == "menu"){
			var tMenu = findSubMenus(tcTag);
			menus[menus.length] = tMenu;
		}
	}
	for(var i=0; i < menus.length; i++){
		var tcTag = menus[i];
		moveHTML(tcTag);
	}
	for(var i=0; i < menus.length; i++){
		var tcTag = menus[i];
		setupMenu(tcTag);
	}
}

With this loop, instead of cycling through all the children of the menu elements, we use the menu objects created by findSubMenus(). The loop goes though menus, the array containing all of the top level menu objects. We store the menu object in the variable tcTag, and then we call a new function, moveHTML(). We pass the menu object to moveHTML(), and now we brace ourselves, because this is another one of those recursive functions.

moveHTML()

function moveHTML(menu){
	if(menu.hasChildren == true){
		for(var i=0; i < menu.subMenus.length; i++){
			moveHTML(menu.subMenus[i]);
		}
	}
	var tMenu = eval(menu.id);
	var tMenuHTML = tMenu.outerHTML;
	
	tMenu.outerHTML = "";
	menuContainer.innerHTML += tMenuHTML;
}

As simple as this code looks, it does a bundle. First we start by checking to see if this menu has any submenus, because if it does, we will need to move that HTML first. This is where the recursiveness comes into play. If the current menu (right now the top menu) has any submenus, we will loop through all of the submenus. For every submenu, we will call moveHTML() again, and again check for submenus, until we get to the very last (bottom) submenu. For every menu that we find, the code after the loop will execute.

First we reference the actual HTML element. Since an element is referenced by its id, we use the eval() function. This will turn the string contained in the menu object's id variable (say "menu1") into the the code for referencing the element (menu1). Next we temporarily store the element's HTML, contained in its outerHTML variable. Then we erase the element from the document by setting its HTML (in outerHTML) to nothing. Then we recreate it by adding the HTML inside the menuContainer element. The HTML inside an element is stored in innerHTML, hence the inner. And now we have the menu element restored, good as new, only now, it isn't nested inside of another menu any more.

In case you're wondering why we can't move the HTML as soon the menu is found, it's because we can't move the child of an element that we've already referenced, without creating errors.

findMenus() - Continued...Again

Now that we have moved all the HTML around so that the menus will look right, we have to make the menus actually do something. Right now, they are just a bunch or boxes (at least now they're pretty) that do nothing. They don't even appear yet. The last loop in findMenus() takes care of that (but not all by itself) and is the most complicated part of the script.

function findMenus(){
	var cTag = menuContainer.children;
	for(var i=0; i < cTag.length; i++){
		tcTag = cTag[i];
		if(tcTag.className == "menu"){
			var tMenu = findSubMenus(tcTag);
			menus[menus.length] = tMenu;
		}
	}
	for(var i=0; i < menus.length; i++){
		var tcTag = menus[i]
		moveHTML(tcTag);
	}
	for(var i=0; i < menus.length; i++){
		var tcTag = menus[i];
		setupMenu(tcTag);
	}
}

This last loop, once again, goes through the menus array, only this time it calls the latest greatest function setupMenu(). Once again we pass the menu object to the function, and once again we will brace ourselves for a recursive ride.