Drop Down Menus
What is a drop down menu?
Drop down menus are great tools for organizing information lots of information. On webpages, they are most often used to organize a vast amount of information as efficiently as possible. They provide the possibility of organizing information under one heading instead of having to list each link individually.
Where can I find an example?
An example of a drop down menu can be seen by going to http://www.saintmarys.edu/~bark0916. As you scroll over the headings, a list appears underneath the heading. This list provides you with several links that you can then click-on to go to the different pages. Similarly, the following graphic provides an example of how a menu should look even though the listed links do not work.
How do I create a drop-down menu in Dreamweaver?
1. Organization and Preperation
The first thing that you want to do to create a drop-down menu is to have all of the pages created that you are going to link to on your drop down menu. For example, on the example provided above, the heading About Me provides a menu of links that fall under the category of About Me. This might include an autopbiographical page, a resume page and a picture page. All of these pages should already be created and saved in your WWW folder. The same goes with all of the other pages that you want to include under various headings.
2. Begin with an Image
The easiest way to create a drop down menu is to begin with an image. For demonstration purposes, I am going to use this blue image that I created in Adobe Photshop. If you would like to practice making drop-down menus, you can use this image. For PC users, right-click on the image and choose the save option. For MAC users, click and hold on the image and after a few seconds move your mouse without letting up on the button. This will allow you to drag your iamge to your desktop or any folder that you want to put the image in. Do not forget to safe the image in a place that is web accessible such as your WWW folder.
Now, I have a lot of links that I want to include under each subtitile so I have decided to make a drop-down menu. This tutorial uses Macromedia's Dreamweaver which is acccessible from all the campus computers.
3. Create a hotspot
The first thing that I need to do is create a hotspot over the part of the image that I want to be a link for my drop-down menu. Creating a hotspot is very easy. First, locate the blue shapes in the lower right-hand corner of the properties menu (follow the red arrow). The properties menu can normally found in the lower half of the Dreamweaver screen. If you do not see it, open the Window option at the top of the screen next to File, Edit, Insert, etc ... Click on the second option which is properties.
After you have selected the square hotspot maker, go up and make the square on your image by clicking the mouse where you want the hotspot to go and holding it down to create a square. This will give you a blue square that covers the text or part of the image.
4. Open the Behavior Window
The next step is to go to the Window options located across the top of the screen next to File and Edit across the top of the screen. Choose the 6th option which is Behavior. Once you click on Behavior, you will see a new screen that looks like the below image.
5. Click on the Plus sign
Next you want to click on the small plus sign in the corner of this design window. You should now have a screen that looks like this.
