advertisement

Everyone has used it before, they go to a website, and there is a drop down box that says “Where do you want to go?” they select something from the list and without pressing anything else they are whisked away to the page that they selected.

Navigations like this are great and really save space on a website, in this tutorial I will show you how to make one just like it and explain how to use it on your own website.

To get started with this, we are going to need an HTML document to write our javascript in –

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="TutorialCode.com" />

<title>Select-and-Go Navigation</title>
</head>

This is just the beginning head section of your website, inside the head section of your document is where you put your javascript. And that is exactly what we are going to be doing right now! Underneath the <title> tag, just before the </head> tag is where you will be adding all this javascript.

<script language="Javascript" type="text/javascript">
<!-- Hide from older browsers

We have to first tell the browser that we want to start our javascript document. We then comment out our javascript, this is because older browsers that do not support javascript will just treat it as text and actually output all your javascript to the user. You obviously don’t want this, so by commenting it out the browser won’t display it.

function jumpPage(newLoc) {

Next we want to create a new javascript function. We will be using this function to jump between our pages. We pass an argument to our function for the new location that you select from your drop down box.

	newPage = newLoc.options[newLoc.selectedIndex].value

We create a variable called newPage, this will be used in the next part of our function, we find out the index and value of our new location and assign it to our variable.

	if (newPage != "") {
		window.location = newPage
	}

Now we use an if statement, this is saying that IF newPage (our variable) does NOT equal nothing, (not empty) then move the user to a new page, using window.location, and the page that we move the user to is dependant on our variable newPage, and what the value of newPage is.

}

// End hiding from older browsers -->
</script>

End our function, and tell the browser that no more script is coming.

<body onload="document.formNav.newLocation.selectedIndex=0">

Now, directly after our head tag, we want to start our body. You will notice a little bit of javascript in our body tag, this is saying that our form (named formNav) should always start on the 0 index. 0 meaning the first item in the list. Javascript works on a 0 index basis, that meaning that the first item in an array is 0, the second is 1, etc…

<form name="formNav">
	<select name="newLocation" onchange="jumpPage(this)">

Start your form, you have to make sure that the name of the form is the same that we defined in our onload atttribute in our body tag. This is because if you change the name, and then javascript won’t be able to find the form.

Then we create a selection box, we name it newLocation (we use this in our function, the 2 names must be the same name). Then we use something called onchange, in javascript this means that when an element on the form is changed (in our case, when something new is selected). We use our function named jumpPage.

		<option selected="selected"> Select a Topic</option>
		<option value="home.html">Home</option>
		<option value="about.html">About</option>
		<option value="forums.html">Forums</option>
		<option value="contact.html">Contact Us</option>
		<option value="portfolio.html">Portfolio</option>

Now we just do some basic HTML, making some options for our drop down box, you can change then names and URL’s to whatever you want so you can use it on your own website.

	</select>
</form>
</body>
</html>

End the selection box, and our form. Then end our body and html tags and your select-and-go navigation box is fully completed!

Here is the code in it’s entirety –

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="TutorialCode.com" />

<title>Select-and-Go Navigation</title>
<script language="Javascript" type="text/javascript">
<!-- Hide from older browsers

function jumpPage(newLoc) {
	newPage = newLoc.options[newLoc.selectedIndex].value
	
	if (newPage != "") {
		window.location = newPage
	}
}

// End hiding from older browsers -->
</script>
</head>
<body onload="document.formNav.newLocation.selectedIndex=0">
<form name="formNav">
	<select name="newLocation" onchange="jumpPage(this)">
		<option selected="selected"> Select a Topic</option>
		<option value="home.html">Home</option>
		<option value="about.html">About</option>
		<option value="forums.html">Forums</option>
		<option value="contact.html">Contact Us</option>
		<option value="portfolio.html">Portfolio</option>
	</select>
</form>
</body>
</html>

Don’t just copy and paste everything! Actually read through the tutorial, or else you won’t learn anything!

I hope you enjoyed this nice little tutorial, if you have any questions leave a comment or send us an e-mail. We love to hear from you, leave a comment and tell us what you think!

Thanks!
Sean
TutorialCode.com

advertisement