Navigation using a
Drop-Down Menu.

Sometimes, to select a page to jump to, a form with a Drop-Down menu is used. Most of the times this works because the form calls a server-side script when it is submitted. However, this is someting that most Internet Service Providers don't allow you to do. It also happens that the page with the Drop-Down menu is not meant to be published on a server, but just on a CD-ROM or a floppydisk. In these cases there is no server available to execute the script to process your form.
This can however, easily be solved with a little piece of JavaScript. The advantages of this are that you don't depend on a web server, you don't have extra communication just for navigation, and last but not least will these pages allways work properly, even when run directly from disk.

We will create this example from sratch. Ofcourse we need a couple of pages to jump to, depending on the choice in the dropdown box. These are normal web pages, all having a link back to the menu page. You can pick them up here. Just click on the link with the right mousebutton and select "Save Target As"

Furthermore we need, ofcourse, the menupage containing the drop-down menu. In our example we called it pdmenu.htm. To make our plan come together we need two things in this menu page; the form containing the dropdown menu, and a little piece of JavaScript to process the form.
The code for both things is here below, together with a brief explaination. If you want to know more about creating forms, you can visit the Form Tutor.

<script language = "JavaScript">
function formHandler()
{
var URL = document.pulldown.selectname.options[document.pulldown.selectname.selectedIndex].value
window.location.href = URL 
}
</script>

Select a page to jump to: 
<FORM name = "pulldown">
  <p>
  <SELECT NAME="selectname" SIZE=1 onChange ="formHandler()">
    <OPTION VALUE=" ">Select a page </OPTION>
    <OPTION VALUE="red.htm">Red </OPTION>
    <OPTION VALUE="yellow.htm">Yellow </OPTION>
    <OPTION VALUE="green.htm">Green </OPTION>
    <OPTION VALUE="blue.htm">Blue </OPTION>
  </SELECT>
</p>
</FORM>

to the variable URL. The next thing it does is set the location.href property of  the window to the value of the variable URL.
You should realize however, that if the menu page is in a frame, window.location.href refers to the content of the frame. If you want to display the called page "full-screen", you must use top.location.href.

Something else to keep in mind is that is is a good habit to give a name to every entity on your web page (forms, input fields, radio buttons, etc.) and use this name to refer to it from any script. This will save you a lot of debugging when you change the page layout, and the sequence of these entities changes.

A "Go" button to go with the DropDown menu.

A lot of people consider the script described above rather unfriendly. This is because in their perception they have little control over what happens. Whenever they just browse the options in the menu, the onChange event could allready take place and they are transferred to a different page. This will all become much more friendly when we add a "Go" button to the form, so they have to click the button to be actually transferred to the selected page.

All we have to do to achieve this is make a few minor changes to pdmenu.htm. The new code is here below with a brief expaination of the changes.

<script language = "JavaScript">
function formHandler()
{
var URL = document.pulldown.selectname.options[document.pulldown.selectname.selectedIndex].value
window.location.href = URL 
}
</script>

Select a page to jump to: 
<FORM name = "pulldown">
  <p>
  <SELECT NAME="selectname" SIZE=1 onChange="formHandler()">
    <OPTION VALUE=" ">Select a page </OPTION>
    <OPTION VALUE="red.htm">Red </OPTION>
    <OPTION VALUE="yellow.htm">Yellow </OPTION>
    <OPTION VALUE="green.htm">Green </OPTION>
    <OPTION VALUE="blue.htm">Blue </OPTION>
  </SELECT>
  <INPUT TYPE="BUTTON" VALUE="  GO  " onClick="formHandler()">
</p>
</FORM>

First of all, the "onChange" action is removed from the select box (So the grey part is removed). Next the button is added (the red part). Whatever is defined as the VALUE property of the button is displayed as text on the button. We also add a few spaces around the text, because some browsers would otherwise display a very small button that is just large enough to display the word GO. When you click the button, the event onClick takes place, and the function formHandler() is called. This causes exactly the same thing to happen as in the first example.

More than one DropDown menu on an page.

The code for this is below, together with a brief explanation.

<script language = "JavaScript">
function formHandler( boxname )
{
var URL = boxname.options[boxname.selectedIndex].value
window.location.href = URL 
}
</script>

<FORM name = "pulldown1">
  <p>Select a page to jump to:<br>
  <SELECT NAME="select1" SIZE=1 onChange="formHandler( document.pulldown1.select1 )">
    <OPTION VALUE=" ">Select a Page </OPTION>
    <OPTION VALUE="red.htm">Red </OPTION>
    <OPTION VALUE="yellow.htm">Yellow </OPTION>
    <OPTION VALUE="green.htm">Green </OPTION>
    <OPTION VALUE="blue.htm">Blue </OPTION>
  </SELECT>
  </p>

  <p>Select a page to jump to:<br>
  <SELECT NAME="select2" SIZE=1>
    <OPTION VALUE=" ">Select a page </OPTION>
    <OPTION VALUE="data1.htm">Data 1 </OPTION>
    <OPTION VALUE="data2.htm">Data 2 </OPTION>
    <OPTION VALUE="data3.htm">Data 3 </OPTION>
    <OPTION VALUE="data4.htm">Data 4 </OPTION>
    <OPTION VALUE="data5.htm">Data 5 </OPTION>
  </SELECT>
  <INPUT TYPE="button" VALUE="    Go    "
  onClick="formHandler( document.pulldown1.select2 )">
</p>
</FORM>

In the example above we use one form containing two dropdown boxes, one without and one with button. You can use as many forms and dropdown boxes as you like, as long as you make sure you pass to the function formHandler() what dropdown box is calling it. Whatever you enter between the brackets, is picked-up by the function formHandler() as the variable 'boxname', so you can read whatever you entered between the brackets in the function call everywhere you see 'boxname' in the function. If you read it that way, you will notice that this looks axactly like what we did in the previous examples.

Division in categories and sub-categories.

Another nice example of using multiple drop-down boxes is to make a division in categories and sub-categories. In this example we have a frameset with at least two frames containing a form with a drop-down box, one with and one without button. The whole idea is that the visitor can select a category in the box without button. The onChange event of this box is used to load the proper form in the other frame, so the list of subjects in the second box matches the category in the first box. Next we can select a subject in this second box and click the button to load the apropriate page in the browser

Let's build this example from scratch and start with the frameset. The code is listed below:

<html>
<head>
<title>Frameset for Demo</title>

<script language="JavaScript">
<!-- start hiding code if browser does not support javascript
  if (top.frames.length != 0)
  top.location = self.document.location;
//-->
</script>

</head>

<frameset framespacing="0" rows="75,*">
  <frame src="banner.htm" name="banner" marginwidth="5" marginheight="5" frameborder="0" framespacing="0"
  scrolling="no">
  <frameset framespacing="0" cols="200,*">
    <frame src="toc.htm" name="toc" marginwidth="5" marginheight="5" frameborder="0" framespacing="0"
    scrolling="no">
    <frameset framespacing="0" rows="75,*">
      <frame src="cat.htm" name="catagorie" marginwidth="5" marginheight="5" frameborder="0" framespacing="0"
      scrolling="no">
      <frame src="cat01.htm" name="catkeuze" marginwidth="5" marginheight="5" frameborder="0" framespacing="0"
      scrolling="no">
    </frameset>
  </frameset>
  <noframes>
  <body>
  <h1 align="center">No Frame support.</h1>
  <hr>
  Your browser does not support Frames.
  </body>
  </noframes>
</frameset>
</html>
    

The first thing we notice is the little (red) piece of JavaScript between the HEAD. tags. Is is to ensure that our frame is not "framed" in another frameset. If you want to know more about this subject, you should read
"Don't get framed in a frame."
Next the browser screen is divided in frames and we make sure that the frame borders are invisible. More about this subject can be found in the Frames Tutor.
In the top frame we display the banner and in the left frame there is room for a table of contents. These pages don't change during the demo. The right side of the remaining screen is vertically divided into two frames. The upper frame contains the page with the drop-down box for selecting the categories, and on selecting a category it will load the apropriate page in the lower frame. These pages also contain a drop-down box (but now activated with a button) for making the final choice.

Of course we need a large number of files to chose from. These are all simple web pages just containing a link back to the frameset. Here below you can pick them up and save them on your disk. Just right-click them and select "Save Target As".

Furthermore we need of course banner.htm for the upper frame, and toc.htm for the left frame.

Now that we gathered all these files, let's create the pages with the drop-down boxes. Let's start with cat.htm. On this page there is a drop-down box where we can choose the different categories. The set-up of this page looks very similar to the first example of drop-down box navigation that we covered. The only difference is that the selected page is not loaded in the  browser window, but in the bottom frame. The changes that are needed for this are marked red here below. Here we don't define the browser window, but the frame we want to load the page in.

<html>
<head>
<title>PullDown - Catagorie.</title>
</head>
<body bgcolor="#FFFFFF">

<script language="JavaScript">
function formHandler()
{
var URL = document.pulldown.selectname.options[document.pulldown.selectname.selectedIndex].value
top.catkeuze.location.href = URL 
}
</script>

<blockquote>
  <blockquote>
    <form name="pulldown">
    <p>First select one category: </p>
    <p>
      <select name="selectname" size="1" onchange="formHandler()">
      <option value="cat01.htm">Colors&nbsp;&nbsp; </option>
        <option value="cat02.htm">Fugure Data </option>
        <option value="cat03.htm">Letter Data </option>
      </select> </p>
    </form>
  </blockquote>
</blockquote>
</body>
</html>

The files cat01.htm - cat04.htm on their turn, look very similar to the secondexample of drop-down navigation that we covered before, where the onClick event of a button is used to initiate the action. Again, this needs a minor change. We don't direct the file to our own window, but specifically to the browser window. The changes, again, are in red here below.

<html>
<head>
<title>PullDown Menu 1.</title>
</head>
<body bgcolor="#FFFFFF">

<script language="JavaScript">
function formHandler()
{
var URL = document.pulldown.selectname.options[document.pulldown.selectname.selectedIndex].value
top.location.href = URL 
}
</script>

<blockquote>
  <blockquote>
    <form name="pulldown">
    <p>and then one option: </p>
    <p>
    <select name="selectname" size="1">
      <option value="red.htm">Red&nbsp;&nbsp; </option>
        <option value="yellow.htm">Yellow </option>
        <option value="green.htm">Green </option>
        <option value="blue.htm">Blue </option>
        </select>&nbsp;&nbsp;&nbsp;
        <INPUT TYPE="BUTTON" VALUE=" GO " onClick="formHandler()"> </p>
    </form>
  </blockquote>
</blockquote>

</body>
</html>

Here above is cat1.htm. The files cat2.htm - cat4.htm are the same, except that they contain different options of the drop-down box, that should of cource point to the files in their own category