Site hosted by Angelfire.com: Build your free website today!
Samantha Coaker's HTML Tutorials

Back | Contact

How to create drop down menus

Okay, there are 2 kinds of these menus. Firstly I'll start by saying as these are forms using JavaScript, they may not display in all browsers (such as Mozilla's Firefox)...so if you can't see the button menu, it's probably because the JavaScript is hiding it from your incompatable browser. But for those of you using I.E, here's the first example:

...and the second where once you make your selection, you go straight there e.g

So how was this done? The code for the menu with an action button is as follows:

<script language="JavaScript">
<!-- Hide from old browsers
//Hide from Java Script

function goToPage2()
{
PageIndex2=document.example1.select1.selectedIndex
if (document.example1.select1.options[PageIndex2].value != "none")
{
location = document.example1.select1.options[PageIndex2].value
}
}

//-->

</script>

<FORM name=example1>
<SELECT NAME="select1" SIZE="1">
<OPTION VALUE="none" SELECTED>This is your default text...
<OPTION VALUE="URL or File name">Selection 1
<OPTION VALUE="URL or File name">Selection 2
<OPTION VALUE="URL or File name">Selection 3
<OPTION VALUE="URL or File name">Selection 4
<OPTION VALUE="URL or File name">Selection 5
<OPTION VALUE="URL or File name">Selection 6

<INPUT TYPE="BUTTON" NAME="B2" VALUE="What you want your button to say" ONCLICK="goToPage2()">
</FORM>



And the code for the menu with on selection action is:

<FORM name="Form2">

<select name="Select2"

onchange="location.href=(form.Select2.options[form.Select2.selectedIndex].value)">

<OPTION VALUE="none" SELECTED>This is your default text...
<OPTION VALUE="URL or File name">Selection 1
<OPTION VALUE="URL or File name">Selection 2
<OPTION VALUE="URL or File name">Selection 3
<OPTION VALUE="URL or File name">Selection 4
<OPTION VALUE="URL or File name">Selection 5
<OPTION VALUE="URL or File name">Selection 6
</select>

</form>


Probably the most important thing to take note of is in the Form and Select tags at the start of the script. The Name attributes. In all honesty these can be whatever you like, but if you have more than one menu on a page, they must have different names.

Things in bold are items that can be changed. The Option Value's URL or File name is just like in a hyperlink, e.g Sam.html would be entered into the quotation marks.

The first Option Value is 'none' and says 'Selected'. This means to choose it, it will go nowhere, it's the default of the menu.

Where it says 'Selection 1', 'Selection 2' etc, these are the options displayed to the viewer when they look at the menu. Make them a reasonable description of the page they are linked to.

In the first form inside the Script tag where it says form1 and select1, these must match the Form Name and Select Name.

It is similar in the second form, in the Select tag, the Select Name must be the same throughout the tag, see where I have highlighted the places in the onchange attribute bold.

Tutorials © Samantha Coaker