By adding a simple line of JavaScript, this pull-down menu can become a tool for navigation. Click on the drop-down menu below and choose one of the options to see how it works.

Now that you know what the drop-down menu does, how should you use it? Drop-downs save space and offer links to pages that you only want people to access from a particular page.

For example, let's say you have a site called Madame Vonda's World of Wonder. The site itself would specialize in the supernatural and would have various links to services that Madame Vonda offers.

If she had a horoscope page, she could use a drop-down menu to access each of the sign's descriptions. This way, she has created a simple way of visiting each page, without taking up space listing each sign. She also has no need to link to these horoscope descriptions from anywhere else in the site.

Add a Drop-down Menu Using HTML

As drop-down menus are part of the form tag, you will need to follow the basic rules for making a form.

The next several lines of code are an example of what your HTML should look like. Following this code is a brief description of what each line does.

<form method="post">

<select name="navbox" size="1" onchange="window.open(this.options[this.selectedIndex].value,'_top')">

<option value>Click here to move around the site</option>

<option value="flowers.htm">A page about flowers</option>

<option value="muck.htm">A page about muck</option>

</select>

</form>

• Forms always are contained in the <FORM> and </FORM> tags.

• <SELECT> tags go before and after all your options and allow you to give your form a name as well as size. Here, the size attribute tells the browser how many lines to show. If the number was increased to "3" all the options would be exposed and your menu would no longer "drop down." The red text is the Javascript that you add to make this menu work as a navigator.

• Place an <OPTION> tag in front of each choice. VALUE should equal the URL for the page you would like that choice to refer to. Following each <OPTION> tag should be the text you want to appear as an option. Each <OPTION> tag has a </OPTION> tag.

Add a Drop-down Menu Using FrontPage Express

You will create your form in FontPage adding a line of Javascript code in the HTML view. You should create your pages that you will be linking to or at least decide on their URLs. This will make life easier when you create the form. You can, however, always go back and make changes.

• Open a new page.
• Choose Insert, Form Field, Drop-Down Menu.
• Right-click on the form box and choose Form Field Properties.
• Give the form a name.
• Then choose Add.
• Under Choice, add the first option your viewers can choose.

  Usually you should have a choice that does not point to an actual page. This choice should just say, "Choose a page by clicking here" or something similar. Then check the Selected box so that this choice will appear when the page is loaded.

• Choose Add again to create your first choice.
• Check the Specify Value box and enter the URL in the box below.
• If this choice is the default, choose Selected. This will make this choice appear first.
• You do not want people to be able to choose multiple selections so make sure the No circle is marked.
• Choose OK.

Now you are ready to add the Javascript.

• Choose View, HTML.
• You will see a tag that looks like this: <select name="name you chose for your form" size="1">. Between the size="1" and the > add the following code: onchange="window.open(this.options[this.selectedIndex].value,'_top')"
• Choose OK and save your document.
• You can now open the page in your browser and try your new drop-down menu.