[Back to previous page] [Next Page in Series]

Ken Ward's Java Script Tutorial ...

JavaScript Triple Menu

Triple drop down menu

Below is a javascript triple drop down menu that can also be seen on the main site page, where it is used appropriately   The first of the three drop down menus gives options of selecting from three subjects: Computer Stuff, Self Development and Computer Software.

To explore self development and computer stuff: - choose a topic from the drop-down box on the left, then a subject from the box in the middle. And finally choose a page from the drop down menu on the right.

Select a topic ...

... then a subject ... ... and then a page to go ...

When one of these three options is selected the middle menu gives a list of subjects appropriate to that topic. When a subject is chosen from the list of subjects then a list of available pages appears in the last box. The user can then select a page, and go to that page. In the box above there is fast access to several hundred files!   The user can get to any file within 3 clicks. This is a magic number for usability experts! It is the maximum distance (in user clicks) that a site should have. The actual use of the triple menu as a navigational device is limited in most sites that can provide closer access to files by using double or single drop down menus. Multiple drop down menus or selects can organise a great deal of data in a user friendly way. However, no technology should be used merely for the sake of it!

In this case, the triple is used appropriately (on the main page) because the site contains a number of distinct subjects. Here it is used as a demonstration of multiple menus, so it is also appropriate!

How it works

See using a menu to write a menu, which explains some of the basic things in creating menus that write other menus.

The JavaScript triple drop down menu begins with a list of what I called topics which are written in the first menu of the form in the normal way. At this stage the other menus are empty except for the first item of text, for example, 'Select ...'. When the user chooses a topic, then the next menu is filled in depending on the topic chosen. So if computer stuff is selected, then the next menu is filled with subjects such as 'JavaScript', 'HTML', etc.

If another option is chosen, then different subjects are added.

All this time the last menu remains empty. We don't know what to put in it until the user selects a subject.

When the user selects a subject, then we fill the last menu with a list of files.

So if the user has selected computer stuff in the first menu, and JavaScript in the second menu, we populate the last menu with a list of JavaScript pages.

Had the user taken a different tack and selected self development and chosen communication in the subjects menu, we would supply him or her with a list of files appropriate to that subject.

In the example menu, there are 3 topics. There are about 13 subjects and each subject has a few or a lot of files which add up to about 200 different pages (I imagine. I haven't counted!). So the triple menu has the possibility of organising quite a lot of information and presenting it to the user so that within 3 clicks the user can reach any page on the site.

For the first menu, there is an onChange event that changes the items in the second menu. So the topics menu changes the items in the subjects menu.

The second menu, the subjects menu, has an onChange event that changes the items in the last menu. The subjects menu changes the list of files in the files menu.

Finally, the files or pages menu has an onChange event that opens the page selected by the user.

So multiple menus can be thought of as cascading menus.

Changes in the topics menu do not affect the files menu. They affect only the subjects menu. Similarly changes in the subjects menu do not affect the topics menu. They affect only the files menu. And, at the end, changes in the files menu do not affect the other menus. Changes here open the appropriate page selected by the user.

The form code

The code for the triple menu for this page is actually in a js file because this does not confuse search engines and does not clutter up the actual page. The who code is shown in an html file in the code page.

Because of the large number of files to handle, the triple menu was written, in part, by Double Drop Down Menu Builder. That is, the code was changed somewhat to create the triple menu. For the sake of this tutorial some of the original default names have been changed for the sake of readability. So the form below is called 'formTripleMenu', but it is called 'formDoubleMenu' in the original code.

The form below has 3 selects which are called:

This appears logical enough! The menu for the topics is already filled in in the page and the other menus are filled in with subjects or files depending on the selection made by the user in the first menu (Topics);

<!-- ####################### copy code below into body

#### -->

<form name="formTripleMenu" id="formTripleMenu" action="">

<table bgcolor="#0000A0" border="1">

<tr>

<td colspan="3" width="528">

<strong>

<font size="2" color="#FFFFFF">

To explore self

development and computer stuff: - choose a topic from the drop-down box on the left, then

a subject from the box in the middle. And finally choose a page from the drop down menu on

the right.

</font>

</strong>

</td>

</tr>

<tr>

<td valign="top" align="center" width="171">

<div align="center">

<center>

<p>

<small>

<strong>

<font color="#ffffff">

Select a topic ...

</font>

</strong>

</small>

</td>

<td valign="top" align="center" width="176">

<small>

<strong>

<font color="#FFFFFF">

... then

a subject ...

</font>

</strong>

</small>

</td>

<td valign="top" align="center" width="169">

<small>

<strong>

<font color="#FFFFFF">

... and

then a page to go ...

</font>

</strong>

</small>

</td>

</tr>

<tr align="center">

<td width="171" valign="top" align="center">

<!-- ####################### start of select containing topics ####################### -->

<select name="menuTopics" id="menuTopics" onchange="changeSubjects()" size="1">

<option value="none">

Topics appear here

</option>

<option value="none">

Computer Stuff

</option>

<option value="none">

Self Development

</option>

<option value="none">

Computer Software

</option>

</select>

</td>

<td width="176" valign="top" align="center">

<!-- ####################### start of select contaning subjects ####################### -->

<select name="menuSubjects" id="menuSubjects" onchange="changeFiles()" size="1">

<option value="none">

Subjects appear here

</option>

</select>

</td>

<td width="169" valign="top" align="center">

<!-- ####################### start of select containing pages ####################### -->

<select name="menuFiles" id="menuFiles" onchange="go(this)" size="1">

<option value="none">

Pages appear here

</option>

</select>

</td>

</tr>

</table>

</form>

<!-- ####################### stop copying the body menu code here ####################### -->

So we have the basis for the menu, the mere skeleton, for JavaScript to work on.

Next: Triple Menu 2: Detecting which topic has been selected.

 


Ken Ward's HTML Guide...

 

[If you need to learn more about HTML visit the HTML Tutorial]

To ask questions, make comments, etc,
use the mailing list

I am always pleased to hear from you.
To ask questions, make comments, etc,
use the mailing list : Click here to join 1stJavaScript


 

 

And for some programming for your brain: check out New Life Course