Previous Page | Right click this page to print.

Edit and Add Pop-up Menu Items

You can add or edit items in your pop-up menu by changing the code found in the JavaScript file pop-up_menu.js.

To Modify an Existing Menu

1. Open pop-up_menu.js file. Dreamweaver is recommended but any suitable text editor can be used (Windows: Notepad or Wordpad, Macintosh: SimpleText).
2. Scroll to the comment // Pop-Up Box Arrays and find a list of arrays with menu items like this:

  Dbox=new Array();
  Dbox.id="boxD";
  Dbox.imgname="D";
  Dbox[0]=new boxLink("Unit A","");
  Dbox[1]=new boxLink("Objectives","two/index.htm");
  Dbox[2]=new boxLink("Lecture Summary","two/lecture.htm");
  Dbox[3]=new boxLink("Concept & People","two/readings.htm");
  Dbox[4]=new boxLink("Reading Study Questions","two/activities.htm");
  Dbox[5]=new boxLink("Activity & Discussion","two/assessment.htm");

The above code will produce a pop-up menu resembling the following:


3. Find the Array box that corresponds to the pop-up menu that needs to be changed.
4. Each index in the Array corresponds to a heading in the pop-up window, (e.g. Dbox[2] represents the third menu heading "Lecture Summary"). You can change the bolded text shown above. The first bolded item between quote marks labels the menu item and the second bolded item between quote marks links the label to the page in the site. If you leave the second quote marks empty , the first will automatically display the label bold and outdented, representing a section subhead, as done with "Unit A" above.
5. You can rearrange the order of menu items by swapping one line with another, as long as each Array index is changed so it remains in correct sequential order (the numbers within the brackets []). Make sure the first menu heading starts with 0 and each additional menu heading is the next number in the sequence. Do this until all menu headings are created.
6. Save and close the file.

To Add a New Menu

1. Open pop-up_menu.js file. Dreamweaver is recommended but any suitable text editor can be used (Windows: Notepad or Wordpad, Mac: SimpleText).
2. Scroll to the last Array menu in the source code (it should be somewhere around "L", as in Lbox) that looks similar to the following:

  Lbox=new Array();
  Lbox.id="boxL";
  Lbox.imgname="L";
  Lbox[0]=new boxLink("Unit 10","");
  Lbox[1]=new boxLink("Objectives","ten/index.htm");
  Lbox[2]=new boxLink("Lecture","ten/lecture.htm");
  Lbox[3]=new boxLink("Readings","ten/readings.htm");
  Lbox[4]=new boxLink("Activities","ten/activities.htm");
  Lbox[5]=new boxLink("Assessment","ten/assessment.htm");

3. Highlight the last Array menu source code and copy it.
4. Paste the copied source code below the last menu.
5. Change the letter of the box to the next letter in the alphabet, so all changes to the above should now resemble the following (changes are in bold):

     Mbox=new Array();
     Mbox.id="boxM";
     Mbox.imgname="M";
     Mbox[0]=new boxLink("Unit A","");
     Mbox[1]=new boxLink("Objectives","two/index.htm");
     Mbox[2]=new boxLink("Lecture Summary","two/lecture.htm");
     Mbox[3]=new boxLink("Concept & People","two/readings.htm");
     Mbox[4]=new boxLink("Reading Study Questions","two/activities.htm");
     Mbox[5]=new boxLink("Activity & Discussion","two/assessment.htm");
   

6. Next modify the menu headings to match the titles and links of the correct referenced pages.
• This entire process is described in the To Modify an Existing Menu section above.
7. Save and close the file.
8. Open the JavaScript file write_boxes.js.
9. In the file the code should be similar to the following:

   /* This information MUST be at the BOTTOM of the 'Web Page' for best browser support. */
    if(!ie)
    {
   	 document.write(boxGen("Abox"));
   	 document.write(boxGen("Bbox"));
   	 document.write(boxGen("Cbox"));
   	 document.write(boxGen("Dbox"));
   	 document.write(boxGen("Ebox"));
   	 document.write(boxGen("Fbox"));
   	 document.write(boxGen("Gbox"));
   	 document.write(boxGen("Hbox"));
   	 document.write(boxGen("Ibox"));
   	 document.write(boxGen("Jbox"));
   	 document.write(boxGen("Kbox"));
   	 document.write(boxGen("Lbox"));
    }

1. Add the new Array menu by copying the last line document.write line (shown above in bold), and pasting it right below the copied line.
• Make sure the the end "}" closes the entire statement. Meaning that there is no code written after the closing "}".
2. Change the letter of the box to the letter to the new Array menu. For example in the above, the newly pasted line should have "Mbox" instead of "Lbox".
3. Save and close the file.
4. Add the Array menu to the nav_top.lbi library file as described in the Updating the Top Navigation Library File section.

Previous Page | Right click this page to print.