WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / web / dev / menus / intro4

Two, Three or More (!) Related Menus

Senior Systems Engineer – Disk-Based Backup/Replication (PA) Next Step Systems US-PA-Philadelphia Post A Job | Post A Resume

Developer News News Flash: Adobe Has iPhone Workaround Adobe's Flash 10.1 Goes Mobile (Minus iPhone) A Salute to Visionary CEOs

Universal Related Popup Menus 2.01

It seems our readers are never satisfied. A few readers have asked for four- and even five-level menus, to help navigate huge Web sites. Some have also asked about having multiple related menus in one page. Ask and ye shall receive. Rather than extend our nonrecursive technique for our relate function (relate calls relate2...) let's explore a more elegant solution to both requests.

Recursive Relate for Unlimited Levels

The problem with our current relate function is that it's not recursive, so each time we add another level we need another relate function. This technique is inefficient, and cries out for recursiveness. By making relate recursive (where it calls itself if there are more levels to relate), we can add as many levels as we want. A recursive relate, however, requires a different array structure (nested) to work. Fortunately, switching to a nested array also helps solve our second request, multiple menus per page.

Passing Arrays for Multiple Menus

Our previous 2- and 3-level technique used a hard coded array, named "a" to define our menus on the fly. This limited us to one related menu per page. Some users asked for the ability to include two or more different related menus per page. By passing our menu array as a parameter, we can make the relate function even more generic, to handle different menu arrays. Passing arrays as parameters has an added benefit:

1. External Arrays - they can be defined externally and centralized in one location. For example, larger sites could have a site-wide pop-up menu nav bar that could reference one external file, making maintenance and updates easy.

Note: we found a bug in Netscape 3 with external .js files, which are rendered as text. The correct TYPE attribute for the SCRIPT tag is TYPE="application/x-javascript", but IE chokes on this, so most folks use TYPE="text/javascript". Netscape 3 displays external .js files as text, unless you configure your server explicitly to serve .js files as "application/x-javascript" content (as we have). Another solution is to SSI the .js file into your page.

So with these two key changes in mind, let's get to the code. But first, a little demonstration.

WebReference.com Nav Bar Example

The first two-level related menu shows an abbreviated version of internet.com, using our new technique. Notice the first menu has a "leaf" (an option with no submenu) that is also live (in this example, Internet Marketing).. The second four-level menu expands our previous three-level WebReference nav bar. Both use the same relate function, but use two different arrays read in from an external file. (the fourth menu is a mockup for illustration, all links point to 3D)

The Code

First I'd like to extend special thanks to Michaël Guitton for his tireless help with refining this code. He took our existing 3-level code and added external arrays, plus a recursive relate. We've been refining the code ever since. Isn't open source great?

First let's look at what's changed in the relate function call, that we use within your SELECT FORM elements. Instead of referencing a hard-coded two- or three-dimensional array (i.e., a[i][j][k]...) we reference the appropriate level of our nested array "m," which represents the entire menu tree (less the first menu, which is hard coded into the HTML). The reference to m is now passed into relate, at the level matching the select menu's level thus:

<SELECT NAME="m4" ID="m4" onChange="relate(this.form, 0, m, 1)">

Much cleaner. The first two parameters are the same (form, elt), the third has changed from a reference to this.selected index to the menu array "m" and the depth of this select menu (1st, 2nd, 3rd in a series). Relate finds a reference to the menu array (m) at the proper depth (1) and calls update (new function, encapsulates the select menu Option updates) to redefine the submenus. To use the relate function on a second level menu you just change the depth to 2. This is a much simplified version of our original rewrite that looked like this (5-level menu):

<SELECT NAME="m4" ID="m4" CLASS=saveHistory onChange="var" formNum =
get(this.form); relate(this.form, 0, ref(m[ sindex(formNum, 3,
0)][sindex(formNum, 2, 0) ][ sindex(formNum, 1, 0) ],  this.selectedIndex))">

Yikes! In our next version we simplified this call to look like this:

<SELECT NAME="m4" ID="m4" onChange="relate(this.form, 0, ref(this.form, 0, m, 4))" >

This encapsulates most of the referencing complexity, but this.form is redundant here, and ref is unnecessary. The current version (2.01) is simplified even more, and the relate function call looks like this:

<SELECT NAME="m4" ID="m4" onChange="relate(this.form, 0, m, 4)">

We've eliminated the ref function here. So to use relate you just have to change the menu array name, and the depth of the menu, the code does the rest. This newest version relegates the referencing complexity to the relate function, and makes for easier select menu setup.

The Relate Function

The relate function itself has changed in our newest version. Relate updates the current menu's submenus based on the selection of this.form. It first finds the level in the menu array where the current pop-up menu is stored, then passes that reference to the menu array to update(), which updates (redefines) the submenus. Since we aren't testing for new Option constructor support (if (v)) each time we dig thru the menu tree this makes for cleaner and faster code.

function relate(form, elt, tree, depth)
{ // relate submenus based on sel of form - calls update to redef submenus
   if (v) {
      var num = get(form); // fetch the current form index
      var a = tree;        // set a to be the tree array
      while (a != null && --depth != -1)
         // traverse menu tree until we reach the corresponding option record
         a = a[sindex(num, -depth, elt)];
      // at depth 3, should end up w/ something like a[i][j][k]
      // where each index holds the value of s(elected )index in related form select elts
      if (a != null && a.length) {
         // if a array exists and it has elements,
         // feed update() w/ this record reference
         update(num, elt, a); 
         return;
      }
   }
   // if a hasn't any array elements or new Option unsupported then end up here ;)
   jmp(form, elt); // make like a live popup
}

Let's step through the relate code. get(form) works as before, looping through the document.forms property until it returns the current form's index.

s(elected)index Function

The s(elected)index function returns the selected index of any given form. Specifically it finds the selected index of the forms elt (0) in the neighborhood (offset) of the current form (num = get(this.form)).

function sindex(num, offset, elt)
{
// sel finds selected index of num + offset's form elt's element
// in this case elt is always 0, or first select menu in each form
  var sel = document.forms[ num + offset ].elements[elt].selectedIndex;
  if (sel < 0) sel = 0;
    return sel;
}

Here's how you use sindex.

sindex(get(this.form), 0, 0)

sindex(get(this.form), 1, 0)

sindex(get(this.form), -1, 0)

Array Referencing

The key to relate is finding the right level in the menu array tree ("a" above) that corresponds to the current pop-up menu's level. The while loop in relate, specifically the code in green, moves towards the leaves of the menu tree until we reach the level where the current pop-up menu data is stored. Here's how it works:

Ex:
	num   <- get(this.form)
	elt   <- 0
	a     <- menu tree (array structure)
	depth <- 3 // 3rd form in our URPM

1. while (a != null && 2 != -1) // true
	a <- a[sindex(num, -2, 0)];
        // a now holds a reference to "grandfather" option record
	depth <- 2

2. while (a != null && 1 != -1) // true
	a <- a[sindex(num, -2, 0)][sindex(num, -1, 0)];
        //   ^^^^^^^^^^^^^^^^^^^^^^
	//   previous value of a
        //   a now holds a reference to "father" option record
	depth <- 1

3. while (a != null && 0 != -1) // true
	a <- a[sindex(num, -2, 0)][sindex(num, -1, 0)][sindex(num, 0, 0)];
        //   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	//   previous value of a
	//   a now holds a reference to current option record
	depth <- 0

4. while (a != null && -1 != -1) // false
	// exit loop: a remains unchanged
	a <- a[sindex(num, -2, 0)][sindex(num, -1, 0)][sindex(num, 0, 0)];
	depth <- -1

Update Submenus

Once we've a found a reference within the menu array to the right level we're home free. We pass the form's number and the menu array (referenced correctly) to update, which updates the submenus recursively.

function update(num, elt, m)
{ // updates submenus - form(num)'s menu options, and all submenus
   // if refd form exists
   if (num != -1) {
      num++; // reference next form, assume it follows in HTML
      with (document.forms[num].elements[elt]) {
         for (var i = options.length - 1; 0 < i; i--)
            options[i] = null; // null out options in reverse order (bug work-around)
         for (var i = 0; i < m.length; i++) {
            options[i] = new Option(m[i].text, m[i].value); // fill up next menu's items
         }  
         options[0].selected = true; // default to 1st menu item, windows bug kludge
      }
      if (m[0].length != 0) {
         update(num, elt, m[0]); // update subsequent form if any grandchild menu exists
      }
   }
}

Update works similarly to the way relate did before, nulling out the next menu's array and redefining it. Only now, we pass in the nested array (m) referenced at the right place, and recursively redefine subsequent menus.

Once we run out of child menus we return out of relate. If in the course of traversing our menu tree we run into a leaf (a tree with unequal branches, m.length != 0) we bypass the return and act like a live popup. Note that childless option records shouldn't be first in menu records. Pretty nifty, huh?

Now, on to our new external arrays. The new code allows you to define multiple arrays for different related menus in one page. The structure of each array has changed from the old code to the new. Instead of a two- or three-dimensional array (a[i][j][k]...) which must be hard coded into different relate functions we create a nested array, like a C hacker does, thus:

if (v) {
  i = new Array(
    new Array( // internet.com news channels
      new O("InternetNews.com","http://www.InternetNews.com",null),
      new O("InternetNews Radio","http://stream.internet.com/",null),
      new O("atNewYork","http://www.atnewyork.com/",null),
      new O("NewsLinx","http://www.newslinx.com",null)
  ),
    new Array( // internet.com web dev channels
      new O("WebDeveloper.com","http://www.WebDeveloper.com",null),
      new O("WDVL.com","http://WDVL.com/",null),
      new O("WebReference.com","http://www.WebReference.com/",null)
    )
  );
}

This example shows a simple two-level related menu tree, which is an abbreviated version of internet.com's sites. We define a nested array, i, with the first level array empty, representing the first menu (internet.com channels), in the second level arrays representing each channel. The O method assigns the option's text and value to the current array's element. It also adds another nested dimension for any submenus.

So our menu tree array "m" (passed in as "i" above) is in fact an array of hierarchical menus. relate() maps the child menus to the subsequent form's select elts.

function O(text, value, submenu)
{
   this.text = text;
   this.value = value;
   this.length = 0;
   if (submenu != null) {
      // submenu is an array of options...
      for (var i = 0; i < submenu.length; ) {
         this[i] = submenu[i];
         this.length = ++i;
      }
   }
}

That's it! This technique works for any level related menu, and has been tested up to five levels. To extend this technique up to four levels for example, you would do the following.

First menu:

<SELECT NAME="i1" ID="i1" onChange="relate(this.form, 0, m, 1))">

Second menu:

<SELECT NAME="i2" ID="i2" onChange="relate(this.form, 0, m, 2))">

etc. and define the nested menus like this: (4-D menus here)

if (v) {
	m = new Array(
		new Array(
			new O("3-D Animation","/3d/", new Array(
//				new O("Glossary","/3d/glossary/", null),
				new O("Lesson56","/3d/lesson56/", new Array(
					new O("56.1","/3d/lesson56/", null),
					new O("56.2","/3d/lesson56/part2.html",null),
...				))
			),
			new O("Design","/dlab/", new Array(
				new O("About","/dlab/about.html", new Array(
					new O("About.1","/3d/lesson56/", null),
					new O("About.2",
...

What about Frames?

Some of you have asked about using the URPM in a FRAMESET. Not a problem. Frame-enabling these popups just take a couple minor changes related to the jmp() function. We create an 'urpm' object, which points to the current window by default (self). Then in the jmp() function we change 'location = ...' to 'urpm.location = ...' and voila! All you need to do then is to set 'urpm' to the relevant frame using the parent property. All the "4d" code has been changed to work with frames, and you can also see a demonstration (zip file).

Here are the changes we made:

var urpm = self; // frame work-around
urpm = parent.dummy; // Set the target to the relevant frame

function jmp(form, elt)
{ // urpm.location added for optional navigation to named frames
   if (form != null) {
      with (form.elements[elt]) {
         if (0 <= selectedIndex)
            urpm.location = options[selectedIndex].value; // jump to selected option's value
      }
   }
}

To see how we did it in this page just view source. A stripped down version of this page with only the two related menus is available here. As always it's open source, so if you think of any improvements let us know.

Comments are welcome

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Solutions

Whitepapers and eBooks

Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications Adobe Article: Java Developers Finding a Home at Adobe Flex IBM Articles: A Smarter Business Needs Smarter Technology Intel Xeon Processor Increases Server Efficiency and Capabilities Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise Oracle Whitepaper: Using Oracle In-Memory Database Cache to Accelerate the Oracle Database Oracle Whitepapers - Innovation for IT Leaders Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking Internet.com eBook: Get Ready for Windows 7 Microsoft Article: Expression Web 3--New Features for PHP Developers Whitepapers: Manage Your Business Infrastracture with IBM Whitepaper: Maximize Your Storage Investment with HP Internet.com eBook: Becoming a Better Project Manager Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Webcast: Connecting PHP to Microsoft Technologies Video: Microsoft Partner Program Benefits Video: Windows Azure Debugging Tips SAP BusinessObjects Webcast: Unlock the Power of Reporting with Crystal Reports

IBM Webcast: Speed Business Innovation with Reduced Cost and Risk Video: Deploy Applications on Windows Azure MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Downloads & Free Trials: Microsoft's New Efficiency Resource Center Get the Windows 7 SDK Free Trial: Red Gate SQL Backup Pro 6

Iron Speed Designer Application Generator MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Virtual Lab: Migrating PHP Applications Enabling Web Slices and Accelerators with a PHP Site Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products

All About Botnets MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

Created: Sept. 28, 1999
Revised: Nov. 4, 1999

URL: http://webreference.com/dev/menus/intro4.html