Dreamweaver Fly Out Menus

 

Fly out menus are cool. They allow a web designer to display multiple menu items without cluttering the page.

To see an example of a fly out menu, visit:

www.awdsf.com/examples/flyout

Fly out menus are built using layers. Behaviors are applied, showing and hiding layers as appropriate.

Let's understand how its going to work:

Well have a bunch of layers with images, some of which will be hidden when the page loads.

 

The images will have behaviors, commanding layers to show or hide upon rollover or click. (behaviors shown below)

So When the menu first appears, only the main menu is visible, but when rolled over or clicked, submenus appear!

 

Building Layer Fly Out Menus

Youll need images to place inside your layers.

You can get the images used in this exercise here:

1.      First, youll need to place all of the layers youll use on the page. You can build tables inside the layers to hold your images. Size the layers so that they exactly fit the images.

2.      Align the layers so that they are touching each other. This is most easily accomplished by using the Layer placement fields on the Properties Palette.

3.      Create a layer that covers all of your menu layers. Into the new layer, nsert a transparent GIF (shim.) Sized it to W: 100% H: 100%.

This layer will be the closer. When users roll off the menu items, they will encounter the closer, which will command the other layers to hide (become invisible). The transparent GIF is important to trigger the rollover. Layers only hold objects and cannot trigger actions on their own.

 

4.      Name all of your layers. To name a layer, first select it, and then type a name on the Properties Inspector. Make sure you have selected and named the Layernot the image inside of it.

5.      Open the Layers Palette and drag the closer layer so that it is underneath the other layers.
This is an important step, as we only want the closer to be triggered when our user rolls outside of the regular menus.
It doesnt matter what order the other layers are in.

Now we need to set the Behaviors to make the rollovers work. Behaviors must be set on the image in the layer and not on the Layer itself.

The behavior that we will use is called the Show-Hide Layers Behavior. It shows or hides layers of your choosing. A hidden layer is invisible and cannot be interacted with by the user.

We will set the behaviors as follows. Please notice that behaviors are applied to images inside of the layer.

6.      To set the Show/Hide Layers Behavior:

a.      Open the Behaviors Palette

b.      Click the image you want the behavior attached to.

c.      On the Behaviors Palette, choose the Show/Hide Layers Behavior.

 

The Show-Hide Layers window will open:

d.      Use the Show and Hide buttons to show or hide the layers you want to display or conceal.
Reference the below graphic for help on what to show / hide. When finished, click OK.

7.      If youd like to, you can set the behavior to work on mouse over.

 

Were almost done!

We dont want all of the layers visible when the page loads, so now we need to set the starting visibility of each layer.

 

8.      On the Layers Palette, turn off the visibility for each layer except the main one.

Try it out, youre done!

You rule!

Do you know what else rules? Our web design course!

 

Continue to Finishing Touches and Uploading | Back to Courseware