Dynamic JS Menu 1.5

By Pat Libby

• Instalation of the Dynamic Menu
• Limitations on Menus
• Customizing your menu (Editing MData.js)

---




Installation of the Dynamic Menu

1. Save the following files to the same directory as your website:
   • MData.js
   • MScript.js
   • Menu.css
2. Open the file mdata.js in a text editor.
3. Customize your menu data. (See Customizing your menu for details)
4. Save and Close the file mdata.js
5. Place pointer files in head and body.
6. (Optional) To customize your menu color (text color, background color, highlight color):
   Modify following four lines in the mscript.js:

   var tdColor="#000000";		// menu item text color
   var tdBgColor="#BBDDFF";	// menu item background color
   var hlColor="#000000";		// highlight text color
   var hlBgColor="#FFFFFF";	// highlight background color

   Modify following lines in Menu.css:

   table.menu td	{
   	color: #FFFFFF;            /* Must be the same as tdColor in mscript.js   */
   	background-color: #993366; /* Must be the same as tdBgColor in mscript.js */
   	border: 0px;
   	padding: 0px 8px 2px;
   	font-family: Arial;
   	font-size: 8pt;
   	white-space: nowrap;
   }

7. Check the configuration of files: Menu.css, MData.js, MScript.js
   These must be located in the same folder as your HTML pages!
You are finished installing the script to this page! Repeat steps five and six for the rest of your HTML pages!

---

Limitations on Menus

The DropDown Menu works only with new versions of browsers, such as:
• Internet Explorer 5.0 or later
• Netscape 6.0 or later

I will be working on expanding the compatability range of this procedure

Customizing your menu (Editing MData.js)

The file menu_data.js is a set of pair: parameter = "value".
To each item of the menu there should correspond one or two parameters.
The first parameter (Required) looks as follows: td_* = "Item Caption"
The second parameter (Optional) looks as follows: url_* = "Item URL"
If the second parameter is present, after click by the mouse the user will be redirected
to page with appropriate URL value .
For example if the top line of your menu looks as follows:
Home Page Services Links Top Picks Website Info Contact Me Help
You should add the following parameters in your menu_data.js

td_1 = "Home Page"
url_1 = "index.html"
td_2 = "Services"
td_3 = "Links"
td_4 = "Top Picks"
td_5 = "Website Info"
td_6 = "Contact Me"
url_6 = "mailto:info@somecompany.com.html"
td_7 = "Help"
url_7 = "help.html"

Each item of the top menu can contain child items.
For example "Website Info" (td_5) can contain following items:

td_4_1 = "About the Site"
url_4_1 = "about.html"
td_4_2 = "Webmasters"
url_4_2 = "webmasters.html"
td_4_3 = "Forums"
url_4_3 = "news://news.somecompany.com"
td_4_4 = "Guest book"
url_4_4 = "guestbook.html"

In turn each child item of the top menu can contain own child items.
For example "Forums" (td_4_3) can contain following items:

td_4_3_1 = "English"
url_4_3_1 = "englishforum.html"
td_4_3_2 = "Spanish"
url_4_3_2 = "spanishforum.html"
td_4_3_3 = "French"
url_4_3_3 = "frenchforum.html"
td_4_3_4 = "Italian"
url_4_3_4 = "italianforum.html"

And so on: Each item of your menu can has infinite sub menu levels!
The order of an arrangement of parameters in menu_data.js has no value.
But in each line there can be only one parameter (and its value).
Remember to enclose all parameters values in double quotes (").