Creating a Jump Menu with JavaScript

This tutorial will show you how to create a cross-browser compatible jump menu using an HTML drop down box and JavaScript functions/events, like the one at the bottom of this site.

Jump menus can be used to jump from web site to web site, page to page, section to section - or a combination of the three. Its pretty flexible. If you throw in some CSS styling you can make a pretty nice looking menu!

Before you Start

This guide assumes you know a little bit about JavaScript and JavaScript Events of HTML object, such as OnClick(), OnChange() etc. You should also know about the basic structure of an HTML web page, such as the main tags of <HTML>, <HEAD> and <BODY>.

Step 1: Creating the Function

The first thing you need to do is to create a new function that will take in a URL as its sole parameter, and make the browser window move to that location - be it a new URL, page name or anchor on a given page.

Because the function needs to be global for access anywhere on the page it is on, you need to place it in the <HEAD>...</HEAD> Section of your document. The code for the function appears below.

This code is quite straight-forward. The function takes in a variable that should be in String format called 'surl'.

The function only has one line of code which should work in most browsers that passes this value to the current document windows location property. When this changes, the browser automatically loads the new page.

Step 2: Setting up the Drop down

This step is also quite easy, and is in two parts. First of all you need to create a drop down box that contains a list of all your link names and urls, such as in the code listed below:

<select name="jumpMenu">
<option value="index.html">Homepage</option>
<option value="about.html">About Me</option>
<option value="contact.html">Contact Me</option>
</select>

As you can see, you specify the URL for each link in each option tags 'value' property, and then use whatever text you want to resemble the link in between the option open and close tag.

The next step is to add an 'OnChange()' javascript event handler to the '<select>' tag. This will trigger the JumpToURL(surl) function with the currently selected url when the user selects a link from the drop down.

To do this, simply change the first line of the code above to read as follows:

Providing you have set everything up correctly, you should now have a drop down menu on your page with a list of options. When you select an option, you should be taken to whatever URL you specified in that items 'value' property.

Give it a try!