Introduction

Universal Related Popup Menus

The Universal Related Popup Menus (URPM) consist of two popup menus with matching submit buttons controlled by JavaScript and CGI. The left popup (menu1) is the "subject" menu and contains the main areas of the site (in this case WebReference.com). The right menu is the "topic" menu and contains the topics grouped under each subject. The topic menu defaults to topics under the first subject. In this case it lists the current experts on the site.

Related Select Lists

By adding the SIZE attribute to the SELECT tags, you can display multiple options at once. The SELECT menu displays as a scrolling list of options, rather than a popup menu. For the first SIZE options in each select list it takes just a single click to select and submit an option. Setting SIZE=1 displays the select lists as a popup menu.

The CGI redirect script is identical for both menus. In order to handle two sets of related menus the JavaScript was made more general using variables for the forms and elements instead of hard coding them.

Bug Fix: In the relate function, the last line makes the function act as a live popup. It does not relate as JavaScript 1.0 does not support the new option command. To make it work with any amount of forms within the page, I recently changed the line from:

where formName is passed as "this.form" (converted to formNum by getFormNum function), and elementNum is the Nth element within that form. More details follow.

How the Menus Degrade

With browsers that support JavaScript 1.1 "new Option" command (currently Netscape 3.0+, and Explorer 4.0+) the subject menu controls the topic menu. Each time the subject menu is changed the code dynamically changes the topic menu to correspond to the topics under that subject. This allows two levels of site heirarchy to fit into one line of vertical screen real estate. You can also add a third sub-topic related menu using a similar technique.

For browsers that support JavaScript 1.0+ the popups are "live." They react to changes in state. When the user changes a menu option the code redirects them to the matching page. Clicking the "Go" button is not necessary. However, the "Go" submit button can also be used to jump to the current menu selection.

For browsers without JavaScript the menus work just like any other CGI-based select menu. Select an option and click on "Go." The code uses a redirect CGI script that jumps to the appropriate page. The key lines in the redirect script are:

The full redirect.cgi script is also available in text form.

Note: For some reason this page bombs Gecko M7 Mac, use the next 2-D page technique instead.

Comments are welcome