Download JavaScript Code Examples, Tutorials, Reference

Provide thousands of free JavaScript code examples, DHTML, HTML JavaScript Tutorials, Reference and Help. JavaScriptBank.com is the best JavaScript resources

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

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:[email protected]"
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 (").