Dan Fergus Design > Student Resources > Syllabus > Class Schedule >Drop Down Menus (continued)

VCB328 Advanced Web Design

Exercise: Drop-DownS (continued)

Using CSS to create drop-down menus is slick and relatively easy. Unfortunately, because they make use of an unofficial pseudo-style (li:hover), some browsers, like the ubiquitous Explorer, do not display them properly. So in order to use drop-downs we either ignore Explorer users (not a bad option) or find a different method. One alternative is to use javascript.

Of course, using javascript can lead to problems as well. Some people disable javascript on their browsers, which would prevent this from working. There is also the sheer complexity of javascript, which makes creating and editing drop-down menus tricky. Fortunately for us, Dreamweaver has a built-in tool that will write the code for us and make it easier to edit.

Although just about any menu will work for this, lets use the rollover-tab menu we created earlier. If you don't have yours, get a copy from me. When we're finished, the results should look something like this:

 

 

Procedure

  1. For best results, start with a navbar constructed from a <ul> and CSS. The menu we created in the rolloverTabs exercise is perfect. If you still have it let's use it. Otherwise get a copy from me to use for this exercise.
  2. Open the page with the tabs in Dreamweaver.
  3. Open the Behaviors palette.
  4. In the Design View window, select (click inside) the first tab.
  5. In the Behavior window press the Add Behavior button (it looks like a 'plus' sign).
  6. In the pop-up menu choose Show Pop Up Menu.
  7. In the dialog box that appears change "item 1" to whatever you want the first link to say. In the link field directly below, write the url to the page to be linked-to (or click on the folder icon to browse for the page). For additional items, press the 'plus' button next to "Menu."
  8. At the top of the dialog box are four tabs. Click Appearance. Here you can specify the colors of the menu-item boxes, as well as their fonts and styles.
  9. Under Advanced you can specify the size of the menu boxes, the amount od padding, and whether they will have borders.
  10. Under Position, you can specify where the drop-down menu will appear (above, below, next-to the main link, etc.)
  11. Once you've made the drop-down menu you can edit it by selecting the tab you wish to edit, then double-clicking on Show Pop-Up Menu in the Behaviors window.
  12. When you finish check out all of the javascript in the head of your document. You may also find a new dcument in your root folder called mm_menu.js. This is the code that actually does the work for the drop-down menu, so don't get rid of it! Keep it with your document, in your root folder.

 

Class schedule

Syllabus

Student resource index