The University of Texas at Austin- What Starts Here Changes the World
Services Navigation

Example 5 - A Quick Links Menu

This example demonstrates how to make a menu of links and write a Javascript function to ease navigation. If you have a long list of links that you want to make available on every page, you can include the links in a drop-down menu and write a simple Javascript function to respond to menu choices.

<title>JavaScript Example</title>

<script language="JavaScript">

// Create array to hold four URLs;
var dest = new Array(4);
dest[0] = window.location.href;
dest[1] = "";
dest[2] = "";
dest[3] = "";

function go(d) {

// Change location of current window one selected from menu
// returns a number that corresponds
// to the choice they selected in the pop up menu on the form
// If a user selected the first choice, selectedIndex = 0 and the 
// URL will be set to dest[0] or

window.location.href = dest[d.destination.options.selectedIndex];      

// Open new window with selected location
// var x =[d.destination.options.selectedIndex],"New Window");

// To set the URL for another frame in this frameset
// top.framename.location.href = dest[]);


<body bgcolor="white">

<form name="x">
<label for="destination"><h3>Where do you want to go?</h3></label>
<select id="destination" onchange="go(x)">
<option>Quick Links</option>
<option value="1">The University of Texas</option>
<option value="2">Austin 360</option>
<option value="3">Yahoo</option>
<option>The Onion

Test Example 5.

The Javascript for this example is actually quite simple. It consists of an onChange event handler for the drop down form, an array of URLs, and a simple function that changes the location property of the window, based on what destination was selected in the drop down menu. Let's take a closer looks.

First, the script defines an array of URLs that should correspond to the URLs for your destinations in the drop down.

var dest = new Array(4);
dest[0] = window.location.href;
dest[1] = "";
dest[2] = "";
dest[3] = "";

Notice the drop-down form has 4 possible menu choices. Each element of the dest[] corresponds to a URL for location. The go() function does all of the work. It simply sets the location property of the window object to be the URL in the dest[] array that corresponds to the item chosen.

function go(d) {
   window.location.href = dest[];      

The only other element is the onChange event handler for the form to execute the go() function.


  Updated 2006 August 11
  Comments to