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.
-
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.
-
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
-
Choose Window > Rollovers and Actions to open the Rollovers & Actions palette.
-
In the Files tab of the site window, locate the image you want to use for the first (Normal) state of the rollover button.
-
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
-
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.
-
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
-
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.
-
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.
-
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
