How (not) to make a dropdown menu in Dreamweaver (anymore)

by René Lønstrup
Ultimate Web

Please note:

The following technique for making dropdown menus are obsolete. This tutorial was written at a time where better alternatives were not available. There is no guarantee that this even works in present-day versions of the Dreamweaver software.

The preferred way to accomplish this task at the time of writing, is to build the menu using nested UL lists, then adding CSS rules to show/hide the submenus. An easy way of doing it, is using the Spry Menu Bar in Dreamweaver CS3, as described in this tutorial. If you are using an older version of Dreamweaver, or are not afraid to get your hands a bit dirty - You can use this approach.

Introduction:

As contents grows on websites, the need for an easy navigation grows equally. A dropdown menu can be the solution. They are easy to use, because people are familiar with them from their native Windows-programs (the menu with "files", "edit" etc. is a dropdown-menu). And, as a bonus, your visitors will be amazed :-)

In the past, this kind of thing would have required lots of work writing HTML-code, debugging etc. Now, with programs like Dreamweaver, and this tutorial, it's as easy as scratching yourself on the back :-)

Requirements:

You'll need to have a copy of Macromedia Dreamweaver 3 or 4 (this tutorial was written using version 4, but everything should work fine in version 3 also), an Internet browser (preferably Internet Explorer 5 or 5.5), and, of course, a computer :-)

You don't need to be an expert user of this program, although a little experience always helps.

Let's get on with it:

During this tutorial, we will be making a simple menuline with one dropdown-menu. In this menu, we will put a couple of links, one of which will open a secondary menu. If you wish, you can improve on it later on, adding more menus or maybe even putting images into your menus.

This is what it will look like when we are done:

menu_example.gif

Now, let's begin:

Step 01:   Start up Dreamweaver.
 
 
Step 02:   Make sure that you have selected "Design view" (fig. 1)

Design view
fig. 1
 
 
Step 03:   Assign a title for the page (fig. 2). I have called mine "A dropdown menu", but you are free to come up with a better name for yourself.
Next, save the file somewhere you know you can find it again.

Title of page
fig. 2
 
 
Step 04:   In the "Objects" inspector (press "Ctrl+F2" on your keyboard or select it in the "Window" menu, if you can't find it), select the "Draw Layer" tool (fig. 3).
Use it to make a box on your page by holding the left mouse button and dragging until it forms a box. It doesn't matter what size it has, we'll change that in a bit.

Layer tool
fig. 3
 
 
Step 05:   Now click on the edge of your newly made box to select it. Open up the "Properties" inspector by pressing "Ctrl+F3" on your keyboard (or selecting it in the "Window" menu). Adjust the values to the ones show on figure 4.

Properties inspector
fig. 4
 
 
Step 06:   Draw three (3) more layers, using the same technique as in step 04. Assign the same properties for them as you did for the first layer, with these exceptions:

Layer ID: menu2, menu3 and menu4
Left position (L): 25%, 50% and 75%
 
 
Step 07:   At this point you should have four (4) gray boxes laying side by side in the top of the window. Now we'll make them easier for the user to navigate through.

Click inside the first box, and you should get a blinking line indicating that you can write in the layer. Write "menu 1".
 
 
Step 08:   Use the "Properties" inspector the align the text to the center of the box (fig. 5). repeat step 07 and 08 for the last three layers also (changing the text to "menu 2" etc.)

Center tool
fig. 5
 
 
Step 09:   Draw yet another three (3) layers using the same technique as you learned in step 04. Assign the properties of these layers as show on figure 6.

Submenu properties
fig. 6
 
 
Step 10:   Fill out the submenu layers with the text "Sub menu 1", "Sub menu 2" and "Sub menu 3". Center all three like you did in step 08.
 
 
Step 11:   Once again, draw two (2) more layers (these are the last ones, i promise!) using the same technique as you learned in step 04. Assign the properties of these layers as show on figure 7 and write "Sub sub menu 1" and "Sub sub menu 2" in them.

Sub sub menu properties
fig. 7
 
 
Step 12:   Now it's time to get the menus working.

Open the "Behaviours" inspector (by pressing "Shift+F3" or selecting it in the "Window" menu).
 
 
Step 13:   Select the gray layer with the text "menu 3" so that there is eight black boxes on its edge.
Now click on the "+" icon (fig. 8) in the "Behaviours" inspector.

Behaviour inspector
fig. 8
 
 
Step 14:   From the menu, select "Show-Hide Layers". Note: If you can't select "Show-Hide Layers" (it is grayed out), find the Sub-menu called "Show Events For" and select "IE 5.0" (fig. 9).

Scroll down the list until you find the "menu3sub1" layer. Select it (by clicking it) and click "show". Do the same for the last two menu3sub's.
Also, find the layer called "menu3subsub1" and hide it (click "hide" instead of "show"). Do the same for "menu3subsub2". Then click "OK".

Show events for IE 5
fig. 9
 
 
Step 15:   In the "Behaviours" inspector, click on the "arrow" (fig. 10) and select "onMouseOver" to make the menus appear when the mouse rolls over menus (instead of it needing to be pressed first).

Behaviour event arrow
fig. 10
 
 
Step 16:   Press the "+" icon again (as shown in step 13) and select "Show-Hide Layers" once again. This time hide all the sub and subsub menu layers (the same once as you selected before, just now they are all going to be hidden). Then click "OK".
 
 
Step 17:   Change the event for this behaviour to "onMouseOut" (the same way as you did in step 15).
 
 
Step 18:   Repeat step 13-17 for the three submenu layers. Except for submenu3, they all should have the same behaviours as above.
Submenu3 distinguishes itself by having all they sub- and subsubmenus shown (step 14) in the onMouseOver-behaviour.
 
 
Step 19:   On to the subsubmenus. Give them the same kind of behaviour as submenu3, that is "show" all sub- and subsubmenus on MouseOver, and hide all sub- and subsubmenus on MouseOut.
 
 
Step 20:   Now you can close the "Behaviours" inspector. Select "Submenu1" and change its visibility in the "Properties" inspector to "invisible" (fig. 11).
When you deselect the layer it should disappear! But don't worry, it is still there, it's just invisible. You can reach it by clicking on one of yellow icons that is half hidden under the "menu1" layer (fig. 12).

Visibility property
fig. 11
  Shortcut to layers
fig. 12
 
 
Step 21:   Repeat step 20, hiding the other sub- and subsubmenus.
 
 
Step 22:   Save the file and go out for a cop of coffee......
 
 

The end:

And that's about it. All that is left to do is to replace the menu-text with real-life links, and perhaps change the colors and fonts a bit. But I'll let you do that work for yourself :-)

And remember, you can make as many menus and submenus as you want (or at least, as you can fit on the screen). You can even connect timelines to the behaviours of the menus, and thus make them move and fly about! Your imagination is just about the only limit (well, almost :-) ).


Now, I'll let you play around with it some more, so...

Good luck!