JavaScript Dropdown Menu

This page contains copy/paste code for creating a JavaScript dropdown menu (or "Jump Menu"). This menu uses HTML form elements and JavaScript to provide a quick, responsive jump menu.

CodeResult

Dropdown menus like this are sometimes referred to as a "Jump menu" because it "jumps" to the selected URL as soon as you make the selection. (Other drop down menus require you to click on a "go" button after you've made your selection - which is the safe way to go if you're worried about users who don't have JavaScript enabled).

Explanation of Code

The above code can be separated into two parts: the JavaScript code, and the HTML code. Here they are separated:

The JavaScript

This JavaScript code consists of a function we've called jumpto. This function uses document.location.href to load the URL provided by the jump menu (which is stored in the x parameter). This accepts a parameter called x, which is the value we pass in when we call the function in our HTML. In the following code I've changed the form name to form2 to avoid any conflict with the above example (which uses form1). You can call your form anything you like.

Copy to Clipboard
<script language="javascript" type="text/javascript" >
function jumpto(x){

if (document.form2.jumpmenu.value != "null") {
	document.location.href = x
	}
}
</script>

The HTML

The HTML part is what displays the actual dropdown menu, which in this case is an HTML <select> element. You can change the values here to your own URLs. Of course, you're more than welcome to leave them as they are!

Copy to Clipboard
<form name="form2">
<select name="jumpmenu" onChange="jumpto(document.form2.jumpmenu.options[document.form2.jumpmenu.options.selectedIndex].value)">
<option>Jump to...</option>
<option value=http://www.quackit.com>Quackit Homepage</option>
<option value=http://www.quackit.com/javascript/>JavaScript</option>
<option value=http://www.quackit.com/html/>HTML</option>
<option value=http://www.quackit.com/css/>CSS</option>
<option value=http://www.quackit.com/sql/tutorial/>SQL</option>
<option value=http://www.quackit.com/database/tutorial/>Database Tutorial</option>
<option value=http://www.quackit.com/web_hosting/>Web Hosting Tutorial</option>
</select>
</form>

And there you have it - your own JavaScript dropdown menu!

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo