web blazonry web development scripts and tutorials Samsung Galaxy S III, White 16GB Get best price
   PHP       Name Generators       Perl       CSS       Javascript       Java       MySql       How Tos       Resources   

Javascript Home


image scripts
  Image Load Order
  Mouse Overs
  SlideShow

JavaScript Resources
  Free JavaScript Books(new)
  Recommended Sites
  Bestselling Books

Bookmark and Share




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:


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

<SCRIPT LANGUAGE="JavaScript"><!--
function openURL()
{
    // grab index number of the selected option
    selInd = document.theForm.aaa.selectedIndex;

    // get value of the selected option
    goURL = document.theForm.aaa.options[selInd].value;

    // redirect browser to the grabbed value (here a URL)
    top.location.href = goURL;
}

//-->
</SCRIPT>

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:

<form name="theForm"> <tt>
<select name="aaa" size="1">
<option selected value="/index.php">Blazonry home </option>
<option value="#">-------------------- </option>
<option value="/info/hosting.php">How to Pick a Web Host </option>
<option value="/scripting/adtest.php">Test Google Ads </option>
<option value="#">-------------------- </option>
<option value="/name_generator/wuname.php">wu name </option>
<option value="/name_generator/usname.php"> US Name </option>
<option value="/name_generator/babyname.php">Baby Name </option>
<option value="#">-------------------- </option>
<option value="/css/index.php">CSS Tutorial </option>
<option value="/scripting/linksdb/index.php">Web DB Tutorial </option>
</select>
<input type="button" value=" GO " onClick="openURL()"> </tt>
</form>


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:

top.main.document.location.href=goURL;


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:

opener.document.location.href=goURL;

Related blazonry.com article: JavaScript Pop-Up Windows.

 

Newest Pages
Test Google Ads Ver. 2
Free Linux Admin Books
Free Linux Books for Programmers
Free Books for Linux on the Desktop
Free PHP Books
Free JavaScript Books
Free Java Books - Advanced
Free Java Books - Basic
Free Perl Books
Free Python Books
Quote of the Day (PHP)
Debugging Part 2
How to Test Google Ads
Most Popular Pages
Baby Name Generator
U.S. Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL
Intro to Web Databases (PHP, MySQL)

Least Popular Pages
iNews Applet (Java)
Java Resources
Site Monitor (Perl)
PHP Resources
 
 

  privacy policy     ||     © 1997-2013. astonishinc.com   All Rights Reserved.