(Site Identification)

'Eye' Focus: Web Support Tutorials

DropDown Menu: Optional Settings


(to Top) Installation and Additional Options

The first thing you should do is download the zipped DropDown Menu package. Then you can follow the directions below for setting this up for your own use.

  1. Open the file menu_data.js in a text editor. (located in the same folder as the web page)

  2. Modify or add parameters to customize your menu data. (See Appendix A for details or review the rest of this tutorial.)

  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="menu_style.css" type="text/css">
     <script language="JavaScript1.2" src="menu_data.js"></script>
     <script language="JavaScript1.2" src="menu_script.js"></script>
    </head>
    

    menu_style.css, menu_data.js, and menu_script.js should be located in the same folder as your HTML pages. Otherwise you should adjust the file paths appropriately for where they are located.

  5. Copy and paste the following script directly into your HTML pages where the menu should appear:

    <script language="JavaScript1.2" type="text/javascript"><!--
    // 'buildMenu' constructs the DHTML menu using the following parameters:
    // Horizontal navigation, using Images, highlighting the 7th link 'help'
    buildMenu("h","m","4");
    //--></script><noscript><table id="mainmenu" border="0"
     cellspacing="0" cellpadding="0" summary="Main Menu"><tr>
    ...    yadda yadda yadda,  put your plain HTML TABLE link data here    ...
    ... this table will be shown if the broswer doesn't support the script ...
    </tr></table></noscript>
    

    Remember to edit the <noscript>...</noscript> section for browsers that do not support the script.

    For exact positioning the main menu you can update the following selector in the menu_style.css:

    #mainmenu {
     position: relative;
    }
    

    Replace the line:

     position: static;
    

    with exact coordinates of the main menu, e.g.:

     position: absolute;
     top: 82px;
     left: 125px;
    

    This will locate the top left corner of the menu, within the browser page area, at a position: 82 pixels from the top and 125 pixels from the left.

  6. Setting the four options for the menu.

    buildMenu(direction,type,indicator,selected);
    
    1. The 'direction' variable is used to choose how to render the main menu. Use "v" to render the menu vertically, and use "h" to render it horizontally.

    2. The 'type' of menu is how the menu will be presented. You have six choices and these are:

      • "t" for text,
      • "i" for images,
      • "m" for MouseOver images
      • "tb" for text with icon bullets,
      • "ib" for images with icon bullets, and
      • "mb" for MouseOver images with icon bullets.

    3. The 'indicator' to use for indicating where other menus are available within the DropDown Menu. The default indicator is a right curly bracket (}). Any HTML can be used to define this indicator, including the coding for a small image. To turn off or disable this feature, use a value of zero (0).

    4. The fourth variable is used for highlighting the the 'selected' link. This will work for both images and for text. The use for this would be to indicate what section of the site the visitor is currently viewing. (Provided you supply the third image for an image menu, and/or edit the style sheet for the text menu.)

      The value for the 'selected' item should be the link number from the main menu that you want to highlight.

      Example:

      buildMenu("h","m","","7");
      

      The values used above will render the menu as: a Horizontal navigation, using Images with MouseOvers, the default sub-menu indicator, and highlighting the 7th link, 'help', from the main menu.

  7. (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 the labeled lines in the menu_style.css with the same vales, example:

      color: #FFFFFF;            /* Must be the same as tdColor */
      background-color: #993366; /* Must be the same as tdBgColor */
    
  8. (Optional and NOT RECOMMENDED) For those people who asks me:

    "How can I set a target link to my right (left/top/bottom and so on) frame?"

    Find the following function in the menu_script.js:

    function runMenu(strURL) {
      location.href = strURL;
    }
    

    Replace the following line in this function:

      location.href = strURL;
    

    with:

      window.parent.FRAME_NAME_HERE.location.href = strURL;
    

    OR MORE OPTIONAL:

    Use the following "pointers":
    url_#...="PAGE_URL_HERE$FRAME_NAME_HERE";
    using the $ as a seperator.

    Examples:

    url_1_5="about.htm$_top";
    url_1_6="help.htm$_blank";
    

    And modify the runMenu() function:

    function runMenu(strURL){
      var pos = strURL.indexOf("$");
      if (pos>0) {
        var str1 = strURL.substring(0,pos);
        var str2 = strURL.substring(pos+1);
        eval("window.parent." + str2 + ".location.href=\"" + str1 + "\"");
      }
      else location.href = strURL;
    }
    

    I DO NOT RECOMMEND USING FRAMES WITH DropDown Menu!

(to Top) Limitations

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

(to Top) Appendix A (Editing menu_data.js)

The menu data file (menu_data.js) contains all the menu details. Most of these are defined with variables: parameter = "value"

(Keep in mind that the pound symbol (#) indicates that you need to supply the appropriate menu numbers, examples of these numbers are provided later.)

To each item of the menu there should correspond one, two, or five parameters.

  1. The first parameter (Required) looks as follows: td_# = "Item Caption"

  2. The second parameter (Optional) looks as follows: url_# = "Item URL"
    Relative URL example: url_# = "/services/third.html" (address on same server)
    Absolute URL example: url_# = "http://www.example.com/services/third.html" (address on another server)

    If the second parameter is present, after click by the mouse the user will be redirected to page with appropriate URL value.

  3. These three variables are only defined when images are to be used for the main menu.

    The image file name: pic_# = "Image Name" (minus the extension)
    Example: "services.gif" would be coded pic_# = "services"

    The image width, in pixels: wth_# = "Width"

    The image height, in pixels: hgt_# = "Height"

  4. The last variable is used only used for defining bullets. You will find an anchor class and a GIF image by each of these names, and you can add or subtract these as needed.

    • bul_# = "folder" for an item that will open another menu,
    • bul_# = "web" for links to a web page,
    • bul_# = "word" for links to a document file (as in Word Document),
    • bul_# = "excel" for links to an Excel spreadsheet file,
    • bul_# = "pdf" for public document format (PDF) files, and
    • bul_# = "text" for plain text files.

(to Top) Specific Examples on Usage

For example if your main menu looks as follows:

 Home Page | Online Shop | Services | Company Info | Contact Us | Privacy Policy | Help 

You might use 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@example.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, effectively, have infinite sub menu levels!

The order and arrangement of parameters in menu_data.js has no effect on the process. However, if you follow the method we use in the example, then it will be easier to visualize what you are building. This can reduce the chance that you will make mistakes.

Remember to enclose all parameter values in double quotes ("), and end all name/value pairs with a semi-colon (;). Failure to do this can cause your menu not to display and can produce browser errors.

If you are using images for your main menu, the comments in the menu_data.js file provides notes to help you define these.


[Updated: Sunday, November 18, 2007]