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
- 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.
- 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="JavaScript" src="menu_data.js"></script> <script language="JavaScript" src="menu_script.js"></script>
</head>
- (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
("). |