Redirects with a Drop Down Menu
There are some sites, where the site may have an article, that is more than one
page long, and at the end they allow the user to jump to what ever page they want
with a drop down menu. This allows for a better site navigation since the user does
not have to click through all of the pages just to get to where they want to go.
Like the our Redirect with a Timer tutorial, we will use window.location to redirect
a user to different pages with a drop down menu.
<script language="JavaScript" type="text/javascript">
function redirect(site){
window.location= site
}
</script>
<select onchange="redirect(this.value)">
<option value="#">Where would you like to go?</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
</select>
This is a very simple script. The JavaScript is just a function called redirect, and is requesting that a variable be passed to it. Then the JavaScript redirects the browser to the variable that was passed to it. Then there is a drop down menu with four options. We see that in the select tag we have the JavaScript even onchange. This event, passed the value of the drop down menu to the redirect function that we have created. We then have four options for the user to choose from. The first option, does not have a real value, that is in case the user chooses this option it will reload the current page. There the other options we have are Google.com, Yahoo.com, and Ask.com. When the user chooses any of these options, the browser will be redirected to the search engine that the user chooses. Below is an example that will allow you to choose a tutorial from Code-Sucks.
iEntry 10th Anniversary
CSS Snippets
JavaScript Snippets