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

  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. (See Appendix A for details)
  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="JavaScript1.2" src="menu_data.js"></script>
    </head>
    
  5. 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 careful: the menu must be placed on top of your pages.)
  6. (Optional) To customize your menu color (text color, background color, highlight color), modify the following four lines in 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;
    }
    
  7. Check: Configuration Files (dropdown.css, menu_data.js, and 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:

Appendix A (Editing menu_data.js)

The file menu_data.js is a set of pairs: parameter = "value".
To each item of the menu, one or two parameters should correspond.
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 the 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 its own child items. For example, "International Offices" (td_4_3) can contain the 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 (").