Least Tern > Tech Class > Teacher Resources > Resources for Web Design

JavaScript: Drop Down Menu

ripple line

This script has been made available for download from The JavaScript Source

 

This is the Easy Way:

ripple line

This is the Harder Way:

Here is a Movie showing you how. The short film will open in a new window. Close that window to return here.

#1 - Copy the code below (do not use the code in the Source window) and paste the code anywhere between <head> and </head>:

<script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>

What does it do?

  1. tells the Browser that you will be using a JavaScript
  2. Creates a function called MM_jumpMenu with the parameters (targ,selObj,restore).
  3. This is followed by statements in the {} that will send the user to the web page they select in the menu and restore the first list item when the page is reloaded.

#2 - Paste this code exactly where you want the little form to appear:

<form name="form1">
<select name="students" onChange="MM_jumpMenu('parent',this,0)">
<option selected>Where do you want to go?</option>
<option value="Cursors/coolcursors.html">Cool Cursors </option>
<option value="movingobject.html">Moving Object JavaScript</option>
<option value="drop_down.html">Drop Down Menu JavaScript</option>
</select>
</form>

Now what?

  1. Change the blue text to the URL of the web sites you want to link to.
  2. Change the green text to the words you want to list in the menu.

    Final Result:

Elizabeth Sky-McIlvain 11/17/02