Dropdown: Select and Go
Enhance your website navigation with a drop down menu. Here’s a quick and simple implementation of a menu using a select box and a few lines of JavaScript. With Select And Go users pull down the menu, make a selection and instantly navigate to their chosen web page. With Select And Push Go, a Go button press is required after the selection is made.
1. SELECT AND GO
Add this javascript into the head section of your html:
<script language="JavaScript" type="text/JavaScript">
function changePage(newLoc)
{
nextPage = newLoc.options[newLoc.selectedIndex].value
if (nextPage != "")
{
document.location.href = nextPage;
}
}
</script>Add this html into the body of your web page:
<form method="POST" name="SelectAndGo" >
<label>SELECT AND GO: </label>
<select name="selectedPage"
onChange="changePage(this.form.selectedPage)">
<option value = "">Make a Selection</option>
<option value = "http://www.yahoo.com">Yahoo</option>
<option value = "http://www.nytimes.com">New York Times</option>
<option value = "http://www.amazon.com">Amazon.com</option>
</select>
</form>2. SELECT AND PUSH GO
In this solution, the user must press the GO button after the selection is made.
The JavaScript piece is the same changePage function call as above.
Here’s the HTML code to insert into the body section:
<form method="POST" name="SelectAndGo" >
<label>SELECT AND PUSH THE GO BUTTON: </label>
<select name="selectAndPushGo" >
<option value = "http://www.yahoo.com">Yahoo</option>
<option value = "http://www.nytimes.com">New York Times</option>
<option value = "http://www.amazon.com">Amazon.com</option>
</select>
<input type = "button" value = "Go Now"
onClick="changePage(this.form.selectAndPushGo)" />
</form>The Select And Go solution is used to change photo galleries: View Gallery
RELATED ARTICLES:
http://www.netmechanic.com/news/vol3/javascript_no12.htm
http://www.sbrady.com/hotsource/javascript/selectandgo.html