Designing with JavaScript CD Code

<HTML>
 <HEAD>
 <TITLE>Relational Menus</TITLE>
 <SCRIPT LANGUAGE = "JavaScript">

 function makeItem(name, url) {
 this.name = name;
 this.url = url;
 }

 function newItem(name, url) {
 itemsIndex++;
 cats[catsIndex][itemsIndex] = new makeItem(name, url);
 cats[catsIndex].length++;
 }

 function makeCat(name) {
 this.name = name;
 this.length = 0;
 }

 function newCat(name) {
 catsIndex++
 itemsIndex = -1;
 cats[catsIndex] = new makeCat(name);
 }

 function relateItems(cat) {
     if (cat > 0) {
     catsIndex = cat - 1;
         with (document.m.m2) {
             for (var i = options.length; i > 1; i--) options[i] = null;
             for (var i = 0; i < cats[catsIndex].length; i++) options[i + 1] = new Option(cats[catsIndex][i].name);
         options[0].selected = true;
         }
     }
 itemsIndex = 0;
 }

 function gotoPage(item) {
 var url = null;
     if (item > 0) url = cats[catsIndex][item - 1].url;
     if (url != null) window.location.href = url;
 }

 var isNS3 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 3);
 var cats = new Array();
 var catsIndex = -1;
 var itemsIndex = -1;

 var catHeading = 'Choose A Category';       // heading for category menu
 var itemHeading = 'Choose A Page';          // heading for pages menu
 var betweenHeading = ' then ';              // "in between" text

 newCat('Luxury Cars');                      // new category 
 newItem('Euro', 'euro.html');               // pages in category
 newItem('Alvan', 'alvan.html');
 newItem('Gates', 'gates.html');

 newCat('Off Road');                         // new category
 newItem('Mountaineer', 'mountaineer.html'); // pages in category
 newItem('Buck', 'buck.html');

 newCat('Sports Cars');                      // new category
 newItem('Zippo', 'zippo.html');             // pages in category
 newItem('Flier', 'flier.html');
 newItem('Maven', 'maven.html');
 newItem('Zoom', 'zoom.html');
 </SCRIPT>
 </HEAD>
 <BODY BGCOLOR = "#FFFFFF">

 <!-- Place the following script where you want the menus to be displayed -->

 <SCRIPT LANGUAGE = "JavaScript">

     if (isNS3) {
     document.write('<FORM NAME = "m">');
     document.write('<SELECT NAME = "m1" onChange = "relateItems(this.selectedIndex)">');
     document.write('<OPTION>' + catHeading + '</OPTION>');
         for (var i = 0; i < cats.length; i++) document.write('<OPTION>' + cats[i].name + '</OPTION>');
     document.write('</SELECT>' + betweenHeading);
     document.write('<SELECT NAME = "m2" onChange = "gotoPage(this.selectedIndex)">');
     document.write('<OPTION>' + itemHeading + '</OPTION>');
         for (var i = 0; i < 10; i++) document.write('<OPTION></OPTION>');
     document.write('</SELECT></FORM>');
         for (var i = document.m.m2.options.length; i > 0; i--) document.m.m2.options[i] = null;
     }

 </SCRIPT>

 </BODY>
 </HTML>