DropDown Menu

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

Installation

  1. Open the file menu_data.js in a text editor. (located in the same folder as this file)
  2. Modify or add parameters to customize your menu data.
  3. Save and Close the file menu_data.js.
  4. 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="JavaScript" src="menu_data.js"></script>
    <script language="JavaScript" src="menu_script.js"></script> </head>
  5. (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;
    }
  6. 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 (").