Designing with JavaScript CD Code

<HTML>
 <HEAD>
 <TITLE>Related 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 (isNS3) {
         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;
             }
         }
     }
     else {
         if (m1.listIndex > 0) {
         m2.clear();
         m2.addItem(itemHeading);
         catsIndex = m1.listIndex - 1;
             for (var i = 0; i < cats[catsIndex].length; i++) m2.addItem(cats[catsIndex][i].name);
         m2.listIndex = 0;
         }
     }
 itemsIndex = 0;
 }

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

 function addHeadings() {
 m1.addItem(catHeading);
     for (var i = 0; i < cats.length; i++) m1.addItem(cats[i].name);
 m1.listIndex = 0;
 m2.addItem(itemHeading);
 m2.listIndex = 0;
 }

 var isNS3 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 3);
 var isIE = (navigator.appName == "Microsoft Internet Explorer");
 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>

 <SCRIPT LANGUAGE = "VBScript">

 Sub m1_Change()
 call relateItems
 End Sub 

 Sub m2_Change()
 call gotoPage
 End Sub

 Sub Window_onLoad() 
 call addHeadings
 End Sub

 </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;
     }
  
     else if (isIE) {
     document.write('<OBJECT ID = "m1" WIDTH = "221" HEIGHT = "24" CLASSID = "CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3">');
     document.write('<PARAM NAME = "VariousPropertyBits" VALUE = "746604571">');
     document.write('<PARAM NAME = "Size" VALUE = "5574;635">');
     document.write('<PARAM NAME = "MatchEntry" VALUE = "1">');
     document.write('<PARAM NAME = "FontCharSet" VALUE = "0">');
     document.write('<PARAM NAME = "FontPitchAndFamily" VALUE = "2">');
     document.write('<PARAM NAME = "DisplayStyle" VALUE = "3">');
     document.write('<PARAM NAME = "ShowDropButtonWhen" VALUE = "2">');
     document.write('</OBJECT>');
     document.write(betweenHeading);
     document.write('<OBJECT ID = "m2" WIDTH = "221" HEIGHT = "24" CLASSID = "CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3">');
     document.write('<PARAM NAME = "VariousPropertyBits" VALUE = "746604571">');
     document.write('<PARAM NAME = "Size" VALUE = "5574;635">');
     document.write('<PARAM NAME = "MatchEntry" VALUE = "1">');
     document.write('<PARAM NAME = "FontCharSet" VALUE = "0">');
     document.write('<PARAM NAME = "FontPitchAndFamily" VALUE = "2">');
     document.write('<PARAM NAME = "DisplayStyle" VALUE = "3">');
     document.write('<PARAM NAME = "ShowDropButtonWhen" VALUE = "2">');
     document.write('</OBJECT>');
     }

 </SCRIPT>
 </BODY>
 </HTML>