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:
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)
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%.
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.
the Layers Palette and drag the closer layer so that it is underneath
the other layers.
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:
the Show and Hide buttons to show or hide the layers you want to
display or conceal.
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!
Do you know what else rules? Our web design course!