Menu Behavior Activities

Show/Hide Behaviors To Create Interactivity with Menu Items

Creating interactive menus can add visual appeal to your site. Create a new document in Dreamweaver and name it "showhidelayers." You will need to save the 4 images below in your student folder. Type out the following names for links: Aquatic | Domesticated | Birds | Insects. Create a title centered and bold on the top line. Click the link below to see how your page should look:

Show/Hide Layers

Create a layer: Click the Draw Layer button on the Objects Palette and drag out a new layer.
Rename Layer 1. Go over to the Layers Palette and you'll notice "Layer 1" has been created. If you can not see layers palette, click Windows>Layers. Layer 1 is the layer you just created. Double click the "Layer1" to rename the layer "Aquatic".
Insert an image in the Aquatic layer. Go back to the layer you just created and position your cursor inside the layer and click once. On the Objects Palette, click the Insert Image to insert an image into the layer. In this case, you will insert the image: Dolfin.jpg. You should now see the Dolphin positioned inside the layer.
Resize the Layer. Scale the layer to fit perfectly around the dophin image. Move your cursor over the edges of the layer until you see the cursor change into a "hand". Once you see the "hand cursor", click once to select the layer. Once you've selected the layer, you'll notice the black selection handles. Move your cursor over the black selection handle until the cursor changes into a double-sided arrow. Grab the middle one on the right side and drag inward. This will scale the layer to the width of the image. Do the same thing for the bottom resize handle, dragging towards the center of the image. You can also resize the layer to the size of the image numerically. Click once on the image and then go up to the Properties Inspector and in the image properties, note the width/height and input the values in the W and H fields (Width and Height).
. Turn Dolphin's Layer's visibility off. In the Layers Palette, click in the Eye-Icon Column for the Dolphin Layer. To hide the layer, click until you see the eye closed (clicking the eye icon in the column heading).
Repeat the steps above for your remaining images. Start with the creating a layer step. Once you've completed that, go on to the next step for next part of the lesson:)
Add the Behaviors. Now, we want to add the behaviors to each of the links in the menu so that when we mouse over each link, the appropriate image appears.
- Double click inside the "Aquatic" link up top to select it (the whole word will be selected).
- Before we can add the behavior, we need to create a null link.
- You do this by typing the # sign in the link window (located on the Properties Palette).
- Go over to the Behaviors Palette and click the plus (+) sign.
- From the drop down menu, select Show-Hide Layers.
- Here you'll see the four layers you created for your 4 images.
- Click the "aquatic" layer and then click "Show" to show the layer.
- Click OK.
- Next, let's change the "OnClick" to "OnMouseOver".
- We need to add the "OnMouseOut" behavior to the link so that when you remove your mouse from the "aquatic" link, the Dolphin image disappears.
- Click the plus sign (+) again and select Show-Hide Layers again. Again select the Aquatic layer, this time selecting "hide" from the buttons on the bottom. Click OK. Next, change the action "onClick" to onMouseOut.
- Test your behaviors. Let's do a quick Preview In Browser to see if it's working. After you see it looking good, go ahead and repeat steps for the hide/show features for your remaining images.
- Aligning the Layers After Previewing in your Browser, notice that the layers/images are kind of all over the place and not very cleanly organized. In this final section, you will align the layers to be centered both horizontally and vertically to each other. Determine where you want the images to be. Use the center of the nav bar as a guide, and about an inch down.
- Make one of the layers visible by clicking on the layer. The layer will only be temporarily visible. You will by using it to determining where you want to align the layers. Click on the Aquatic layer and drag it into position. Once in position, notice the coordinates of the layer by going up to the Properties Inspector and making a note of the L (left) and T (top) numbers.
- Now, write it down. Click away from the layer to deselect it.
- Select the next layer. Don't worry about moving it Go up to the Properties Inspector and in the T and L fields, input the numbers you wrote down (or remembered) into their respective fields and hit enter. This moves it to the same position as the Apple Layer without having to fuss with moving it manually.
- Repeat with the last two layers.

Show/Hide Behavior Example