How to Code for a Drop-Down Menu in JavaScript
Although you can create drop-down menus using only HTML, when you add some JavaScript coding to the HTML, you can add additional functionalities to the drop-down menu, including linking each of the menu items to different URLs. You should have some HTML expertise before you try to insert a drop-down menu on your page, but you do not need to have a lot of experience working with JavaScript.
Other People Are Reading
Instructions
-
-
1
Log in to your Web server and open the Web page on which you wan to include the drop-down menu.
-
2
Click in between the <head> and </head> tags on the page.
-
-
3
Insert this JavaScript code:
<script language="javascript" type="text/javascript" >
<!-- hide
function jumpto(x){
if (document.form1.jumpmenu.value != "null") {
document.location.href = x
}
}
// end hide -->
</script>
-
4
Click your cursor at the location in the <body> section of the page where you want to insert the drop-down menu.
-
5
Insert this code:
<form name="form1">
<select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option>Jump to...</option>
<option value=http://www.webpage.com/page1>Page 1</option>
<option value=http://www.webpage.com/page2>Page 2</option>
<option value=http://www.webpage.com/page3>Page 3</option>
<option value=http://www.webpage.com/page4>Page 4</option>
<option value=http://www.webpage.com/page5>Page 5</option>
</select>
</form>
-
6
Replace each menu item (ie. Page 1, Page 2, etc.) with the actual text you want to appear in the drop-down menu. Change the accompanying URL in each line with the URL you want to open when a user clicks on a menu item.
-
7
Publish the page.
-
1
