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.
|
