DropDown Menu

Notes from Javascripts.com
The files for this script are (these are links, so you can right click and chose to save targets):

DropDown Menu

The DropDown Menu from Evgeny Novikov is a solution for dynamic web site navigation,
with a small size (4K) of code. This product is freeware.
You can see an example of DropDown Menu on top of the page.

Installation

Open the file menu_data.js in a text editor. (located in the same folder as this file)
Modify or add parameters to customize your menu data. (See Appendix A for details)
Save and Close the file menu_data.js.

Copy and paste the following file pointers directly before your HTML pages closing head tag:

<head>
	...
	<link rel="stylesheet" href="dropdown.css" type="text/css">
	<script language="JavaScript1.2" src="menu_data.js"></script>
</head>

Copy and paste the following script pointer directly* after your HTML pages opening body tag:
```
<body>
	<script language="JavaScript1.2" src="menu_script.js"></script>
	...
</body>
```
^{* If necessary you may place small amount of information (e.g. Company Logo) before these script pointer.

(Be carefully – menu must be placed on top of your pages.)}

(Optional) To customize your menu color (text color, background color, highlight color):
Modify following four lines in the menu_script.js:

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

Modify following lines in the dropdown.css:

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

Check: Configuration Files (dropdown.css, menu_data.js, menu_script.js) must be located
in the same folder as your HTML pages!

Limitations

The DropDown Menu works only with new versions of browsers, such as:

Internet Explorer 5.0 or later
Netscape 6.0 or later

Appendix A (Editing menu_data.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 Online Shop Services Company Info Contact Us Privacy Policy Help
You should add the following parameters in your menu_data.js

td_1 = "Home Page"
url_1 = "index.html"
td_2 = "Online Shop"
td_3 = "Services"
td_4 = "Company Info"
td_5 = "Contact Us"
url_5 = "mailto:info@somecompany.com"
td_6 = "Privacy Policy"
url_6 = "policy.html"
td_7 = "Help"
url_7 = "help.html"

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

td_4_1 = "About our Company"
url_4_1 = "about.html"
td_4_2 = "Vacancies"
url_4_2 = "vacancies.html"
td_4_3 = "International Offices"
td_4_4 = "Forum"
url_4_4 = "news://news.somecompany.com"
td_4_5 = "Guest book"
url_4_5 = "guestbook.html"

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

td_4_3_1 = "USA and Canada"
url_4_3_1 = "usaoffice.html"
td_4_3_2 = "Europe"
url_4_3_2 = "eurooffice.html"
td_4_3_3 = "Africa"
url_4_3_3 = "afrooffice.html"
td_4_3_4 = "Singapore"
url_4_3_4 = "singaporoffice.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 (").