 |
You can easily and quickly add a double drop down menu to your site. Click here to find out how. |
Because of the large number of files to handle, the triple menu was written, in part, by Double Drop Down Menu Builder. That is, the code was changed somewhat to create the triple menu. For the sake of this tutorial some of the original default names have been changed for the sake of readability. So the form below is called 'formTripleMenu', but it is called 'formDoubleMenu' in the original code.
The form below has 3 selects which are called:
menuTopics
menuSubjects, and
menuFiles
This appears logical enough! The menu for the topics is already filled in in the page and the other menus are filled in with subjects or files depending on the selection made by the user in the first menu (Topics);
This is achieved by a function called changeSubjects. When the user selects a topic, then depending on which one is selected, the menu containing the subjects is filled in with a list of subjects appropriate to that topic.
First we lay out the options in a case statement. And we specify what will happen when this particular option is selected. When the user selects a topic, the code populates the subject's menu with some subjects. Which subjects it uses depends on which topic has been chosen.
The code achieves this by firstly detecting which topic has been chosen (the code below) and then calling the appropriate function to populate the subjects box (following page).
function changeSubjects(){/* ####################### first we define the menus for easy reference ####################### */ aMenu=document.formTripleMenu.menuSubjects aMenu2=document.formTripleMenu.menuFiles aMenu3=document.formTripleMenu.menuTopics with (aMenu3){/* That is, with the menu that holds the Topics */ switch (selectedIndex) {case 0:/* this the default option, 0 that holds the starting text (Pages appear here) */ /* null off the menu that holds the subjects so previous items are removed */ nullOptions(aMenu) /* null off the menu that holds the files so previous items are removed */ nullOptions(aMenu2) aMenu.options[0]= new Option("Pages appear here","none")aMenu.options[0].selected= true;history.go(0) break case 1://computer stuff nullOptions(aMenu) nullOptions(aMenu2) aMenu2.options[0]= new Option("Pages appear here","none")aMenu2.options[0].selected= true;/* We similarly deal with the next option, but this time we want it to load subjects in the second menu. We have as many functions to do this as we have topics. So the function MyTopics1 will handle the subjects for the first topic, and myTopics2 will handle the subjects for the second option, and so on*/ MyTopics1(aMenu) break case 2://self development nullOptions(aMenu) nullOptions(aMenu2) aMenu2.options[0]= new Option("Pages appear here","none")aMenu2.options[0].selected= true;MyTopics2(aMenu) break case 3://computer software nullOptions(aMenu) nullOptions(aMenu2) aMenu2.options[0]= new Option("Pages appear here","none")aMenu2.options[0].selected= true;MyTopics3(aMenu) break ;} } } |
We specify what to do for a particular option when it is selected with the functions MyTopics1, MyTopics2, etc for each option which we require to make a change.
We explain these function next: Triple Menu 3: Populating the sujbects' menu
| |
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] I am always pleased to hear from you.
|