KCDM 320 - Day 03
Installing a JavaScript Dropdown Menu
Synopsis

Make a copy of your existing site CSS Site Template.
javascript dropdown menu example

  1. Place 3 Javascript (.js) files and one css file into your site folder. You can download these files as a collection here. I am using a subdirectory folder called "include" to store these files in. It is up to you how you would like to organize your site files.

  2. Place this collection of images in a folder called images within your site files.

  3. Add three links to these resources just before your </head> tag:
    <link rel="stylesheet" type="text/css" href="include/dd_style.css">
    <script language="javascript" src="include/dd_menu.js"></script>
    <script language="javascript" src="include/dd_init.js"></script>

  4. Add one link at the bottom of your page just before the </body> tag.
    <script language="javascript" src="include/dd_cont.js"></script>

  5. Add an 'On Load' call to your <body tag>. It will look like this:
    <body onload="init();">

  6. Add a ID value for each menu item. Each menu item's value must be unique. Example:
    <a href="#"     id="classLog" class="menu">Class Log</a>
    <a href="#" id="classInformation" class="menu">Class Information</a>

  7. Edit the file dd_init.js. The ID names here MUST MATCH your menu IDs.
    ... document.getElementById("classLog").className = "menu";};
    ... document.getElementById("    classLog").className = "menu";};
    ... document.getElementById("    classInformation").className = "menu";};
    ... document.getElementById("    classInformation").className = "menu";};

  8. Edit dd_cont.js. The ID names here MUST MATCH your menu IDs. This file also contains the menu items and links.

  9. Edit dd_style.css to chage the style, position, and transparancy of your menus.

Students will add a JavaScript dropdown to their own web site template. Students will work from the instructions shown here. Once a student has completed their site menu they can assist other students with issues that might have come up during the installation.

In the second part of the class we will go over issues and specific questions regarding this installation.

Full DD File Collection

Helpful Links:

W3C - Cascading Style Sheets

DevGuru - JavaScript Resource Index
<- back to day view