Teach menus to drop down and roll over

Using Adobe® GoLive®, we’ll design a navigation bar for the home page of a website. First we’ll create a rollover button that changes in appearance when your mouse moves over it. Next we’ll create a drop-down menu effect, assigning actions to the rollover button so that a drop-down menu appears when your mouse moves over the button.

Get started

Rollovers require two or three similar images, which appear in the same spot on the page. The first image is the normal appearance of the rollover—the way it appears when the mouse pointer is somewhere else on the page in a browser. The second image (named Over in the Rollovers tab of the Rollovers & Actions palette) is a different version of the image (for example, a highlighted appearance), which appears when the user’s mouse pointer is on top of the rollover. The third image (named Down in the Rollovers tab of the Rollovers & Actions palette) appears when the user clicks on the rollover.

In this tutorial, we assume you’ve already designed the basic framework of your web page, and that all of your images reside in the site folder.

Create rollover buttons

In GoLive you can add rollovers by adding an image placeholder from the Basic set of the Objects palette and setting rollover properties in the Rollovers & Actions palette.

The Detect Rollover Image feature (on by default) automatically assigns Over and Down rollover images in one step when you specify the filename of the normal image. For example, if you name your normal image “rollover,” GoLive automatically looks for and references “rollover _over” and “rollover_down.” In this tutorial, we assume you’ve followed this naming convention for your rollover images.

1. First, we’ll add a layer to the page to hold the rollover button: Click the Basic set button at the top of the Objects palette, and drag the Layer icon to an empty area of the document window. Make sure that the layer is selected, and enter a name for the layer in the Layer Inspector. Enter pixel values for width and height.

2. Drag the Image icon from the Basic set of the Objects palette to the empty layer in the document window.

   

   Dragging Image icon to layer

3. Choose Window > Rollovers and Actions to open the Rollovers & Actions palette.

4. In the Files tab of the site window, locate the image you want to use for the first (Normal) state of the rollover button.

5. Making sure the Normal icon is selected in the Rollovers & Actions palette, drag the image from the Files tab of the site window to the selected image holder.

   If you followed the naming conventions mentioned earlier in this section, notice that the Detect Rollover Images feature automatically references the Over and Down images in the Rollovers & Actions palette.

   

   Referencing the Normal image automatically references the Over image if the files are named correctly

6. In the Rollovers tab of the Rollovers & Actions palette, click the Over icon to select it. Verify that the correct path and file name appear in the text box. Repeat this step to verify the Down icon.

Add an image to a layer

Now we’ll complete the navigational button by adding an image that contains text.

1. From the Basic set of the Objects palette, drag an image icon into the layer that you added earlier and drop it to the right of the existing image (the orange star in the illustration below).

   

   Adding a second image to the layer

2. Be sure the image placeholder is selected, and in the Basic tab of the Inspector, drag from the Pick Whip button to the image you want to use as the text portion of the navigational button (“About Us” in the illustration above).

Create a drop-down menu

The drop-down menu we’ll create in this tutorial involves three steps. First, we’ll create the content of the drop-down menu, then we’ll add actions to show and hide the menu, and finally we’ll specify that the drop-down menu is hidden when the page loads.

Add the drop-down menu content

Now you’ll add the secondary level of navigation that will become the drop-down menu. You’ll add one more layer beneath the navigational button, and you’ll place three images in it that could be linked to other parts of your website, or to another website. Later, you’ll add an action to the navigational button to show and hide this secondary level of navigation.

1. Click in the blank space to the right of the last layer marker. Double-click the Layer icon in the Basic set of the Objects palette to add a layer in the document window.

2. In the Layers Inspector, enter a name (for example, Navigation) in the Name field. Enter pixel positions in the Left and Top fields so that the layer is positioned just beneath the image that contains text. Enter Width and Height values that allow for the three images we’ll place in the layer, and then press Enter or Return. Adjust the position and size of the layer if necessary.

   

   Adding a second layer beneath the image used as the text portion of the navigational button

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.