JavaScript: Pull-down Menu

The pull-down menu is an excellent way to condense many links into a small area. This article first shows you how to create a basic pull-down menu. Next, I explain variations for not providing a "go"-type button, using the menu with frames, and using the menu with pop-up windows.

Here's a working example of our menu:


Blazonry home -------------------- How to Pick a Web Host Test Google Ads -------------------- Wu name US Name Baby Name -------------------- Style Sheet Tutorial Web DB Tutorial

The JavaScript that goes within the HEAD section of the document is:

How the Menu Works
The name of the form used in this example is theForm and the name of the select field is aaa (see HTML form below). The first line grabs the index number of the option that is selected in the select box. The index numbering starts at 0 and goes up to however many options you have. The value in the option field is the URL we want to go to. The final line sets the browsers location to this URL, and this sends it on its way.

The HTML portion is nothing more than a form, with a pull-down menu and a button which calls the above function. The different options in the menu define the URL and the text displayed. The GO button uses the onClick method to call our function. The code looks like:

Variations To The Pull-Down Menu

Pull-down Menu Without a GO button (automatically redirect)
You do not have to provide a "go"-type button to click. The user would go to the menu option selected as soon as the person selects the site. This can be quicker and easier, but can be frustrating if the person selects the wrong option by accident. Because the user selects by scrolling down a list of options that are close to each other, this problem happens more often than you might think. For this reason, I always provide a "go" button. Note that amazon.com uses a "go" button in their search menu. With their extensive usability labs, doing what amazon does (in this case) is a good approach.

The changes needed to not have a "go" button are:

Remove the button code.
Change the SELECT item to include the onChange method to look like:
<SELECT NAME="aaa" SIZE="1" onChange="openURL()">

Using the Pull-Down Menu In Frames
You can use the menu in frames. For example, use the menu in a top navigation frame. When a menu option is selected, change the bottom frame . Let's say the name of the bottom frame is main. You would change the last line of the JavaScript to:

Using the Pull-Down Menu In Pop-Up Windows
Using the menu in a different window is similar to using in frames. Instead of using the keyword top, you specify the name of the window you want the page changed. Or, you can use other window keywords such as opener which refers to the window that opened the window.

An example: you have a small pop-up window you use for navigation that has the pull-down menu in it. You want it to change the main window that opened this document. You would use: