Teach menus to drop down and roll over

3. Now, we’ll add three images to this layer. Drag the Image icon from the Basic set of the Objects palette to the layer you just added. With the Image placeholder selected, drag from the top Pick Whip button in the Image Inspector to the first of the three images you want to appear in the drop-down menu. Repeat this step to add two more images to the layer.

   

   Adding images for the drop-down menu to the layer.

Show and hide the drop-down menu

Now your navigation bar is almost complete. We’ll add actions to the image you’re using as the text portion of the navigational button (“About Us” in the illustrations) and to another image on the page to show and hide the drop-down menu so that its associated images appear when you move your mouse over the navigational button and disappear when you move your mouse over another button on the page.

First, you’ll add actions to the image you’re using as the text portion of the navigational button. Notice that you add the actions to the image, not to the layer that contains the image.

1. Select the image you’re using as the text portion of the navigational button in the first layer. Be sure to select the image and not the layer. If you’ve correctly selected the image, the Inspector will be the Image Inspector.

   

   Selecting the image you’re using as the text portion of the navigational button

2. In the Image Inspector, click the Link tab, and enter # as a placeholder.

3. In the Rollovers and Actions palette, select the Actions tab.

   

   Entering a placeholder link and selecting a Mouse Enter action

4. In the Actions tab, under Events, select Mouse Enter to specify an action to occur when the mouse moves on top of the button. Then click the Create New Item button to add an action to the Actions list box.

   

   Choosing Show/Hide action and Show mode

5. From the Action pop-up menu, choose Multimedia > ShowHide. From the Layer pop-up menu, choose the layer that contains the drop-down menu (we named the layer Navigation earlier in the tutorial). From the Mode pop-up menu, choose Show. This action shows the drop-down menu when the mouse enters the image that contains the text portion of the navigational button.

6. To hide the drop-down menu, select another image on the page (for example, the Trilobites text image shown in the illustrations). In the Actions tab of the Rollovers & Actions palette, under Events, select Mouse Enter. Then click the Create New Item button to add an action to the Actions list box.

7. From the Action pop-up menu, choose Multimedia > ShowHide. From the Layer pop-up menu, choose the layer that contains the drop-down menu (we named the layer Navigation earlier in the tutorial). From the Mode pop-up menu, choose Hide. This action hides the drop-down menu when the mouse moves over the image you selected in step 6.

Hide the drop-down menu when the page loads

In this final step, you’ll hide the secondary level of navigation - the drop-down menu- when the page loads and until a Mouse Enter event occurs. You’ll want to complete this step after you’ve linked the images in the drop-down menu to other parts of your website, or to another website.

1. Select the layer that holds the drop-down menu (Navigation).

2. In the Layer Inspector, deselect the Visible option. This makes the layer invisible until the mouse moves over it.

Excerpted from “Adobe GoLive CS Classroom in a Book” by Adobe Systems Incorporated. Copyright ©2004 by Adobe Press in association with Peachpit Press. To buy this book, visit www.peachpit.com.

Page 2 of 2

Previous Page