This page has a double drop-down menu at the head. It can be very useful for sites with many pages and can quite neatly replace several single drop-down menus.
You can select a subject in the left-hand menu and then choose a page-to-go in the right hand menu. Of course, the right-hand menu updates according to the subject you have chosen.
The explanation that follows is based on the code used in the doublemenu which has a large amount of data removed. The data, titles and filenames is not essential to understanding the menu, and would simply cause unnecessary confusion.
First of all, there is a form on the page which contains two selects. One of the selects holds the subjects and these are entered manually into it. The other select is rather empty, and is filled with pages, depending on which subject has been selected. Here is the code in the page:
<!-- ####################### copy the code below to where you want the menu to appear ####################### -->
<form name="formDoubleMenuDMA" >
<p><font size="2">Select a subject and then a page to go!</FONT>:<br>
<!-- This menu holds the subjects-->
<select name="menuSubjectsDMA" onChange="changeFilesDMA()">
<option value="none" >Select a subject
<!-- this menu holds the files to go-->
<select name="menuFilesDMA" onChange="goDMA(this)" style="width:300">
<option value="none"> Pages appear here
<!-- ####################### stop copying the menu code (DMA) here ####################### -->
The first select, which holds the subjects (menuSubjectsDMA) has a function, changeFilesDMA(), which is activated when the user changes the selection in the select.
This function is shown below:
//first it defines for itself the selects,
//so it can find what it needs
//now it can find out which option has been
//chosen by the user, by going through the
newOption("Pages appear here","none")
All this function does is to check which subject the user has selected. For instance, suppose the user has chosen the second option (option 1 because the options start at 0). Here is a snippet of the code:
With the option number 1, the function calls another function, MySubjectDMA0(aMenu2). This will fill the second select with the pages. Before we discuss this, we will look at the third line. All this does is to set the first option of the Page's select to 'HTML Subjects'. Each subject has a function similar to this to load its pages into the second select.
Now let's look at the function we have just called:
//Rewrites the text and values
options=new Option("Select a page","none");
options=new Option("What's in a name - Anchors","../HTMLGuide/anchors.htm");
options=new Option("Background Images - Ken Ward's HTML Tutorial","../HTMLGuide/background_images.htm");
options=new Option("Formatting - HTML Tutorial","../HTMLGuide/Bold.htm");
This function nulls all the options, if there are any, and finally sets the option length to zero. In this way it clears any possible stragglers from the previous list.
So that is about everything about the double menu. All that remains is the function called in the BODY tag:
What it does is to load the appropriate files in the Pages Select depending on which subject is selected when the page is loaded (of course, it will be zero when the page first loads, but could have other values when the user returns to the page, using the back-button on the browser).
So that's it! The code was written by Double Drop Down Menu Builder, which, in turn, was written to avoid the problems and tedium of doing this task by hand. It comes with the triple-menu builder, each of which have project files, so the menus can be rebuilt with the minimum of trouble (silly mistakes, etc).
|You can easily and quickly add a double drop down menu to your site. Click here to find out how.|
|[If you need to learn more about HTML visit the HTML Tutorial]|