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.

<HTMl>
<head>
<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] = "http://www.utexas.edu/";
dest[2] = "http://www.austin360.com/";
dest[3] = "http://www.yahoo.com/";



function go(d) {

// Change location of current window one selected from menu
// d.menu.options.selectedIndex 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 http://www.utexas.edu


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

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

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

}
</script>

</head>
<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>Altavista
<option>The Onion
</select>
</form>
</body>
</html>

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] = "http://www.utexas.edu/";
dest[2] = "http://www.austin360.com/";
dest[3] = "http://www.yahoo.com/";

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[d.menu.options.selectedIndex];      
}

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

 


  Updated 2006 August 11
  Comments to www@www.utexas.edu