Layered or Fly Out Menus

Using Microsoft Expression Web to Create Flyout Menus 

1. Create a main menu layer and give it a z-index = 3.  Do this:  Task Pane ⇒ Layers  and then click on the Draw Layer button.

2. Click inside this layer and insert the main menu buttons.  Do this:  Insert ⇒  Interactive Button

3. Resize the main menu layer around the buttons

4. Select the main menu on the Layer task pane and click on Insert Layer button

5. Insert submenu interactive buttons into this new layer just inserted.  Name the buttons and specify links as you go.

6. Resize the submenu layer and rename it to mainMenu

7. Repeat steps 4-6 for other submenus

8. Position the submenus over the mainMenu, near the buttons which they are related to

9. Position the mainMenu on the page where it should go.  (The submenus will automatically be moved as well)

10. Create a behavior for the mainMenu button to display the corresponding submenu layer – onmouseover event.

11. Create a behavior for each button in the submenu to display the submenu layer they are in – onmouseover.

12. Create a behavior for the submenu layer to hide it – onmouseout event.

13. Create behaviors for the buttons on the mainMenu next to the one you are now working on, to hide the submenu – onmouseover.

14. Create a behavior for the mainMenu layer to hid this same submenu – onmouseout.

15. Click on the “eyeball” for the submenu to give it a default status of hidden/invisible.

16. Repeat steps 10-15 for each mainMenu button.

Adding Behaviors to Buttons and Layers

To add a behavior to a button or a layer, first select Task Panes è Behaviors to make sure the task pane for Behaviors is active.

1. Select a button or layer.

2. In behaviors task pane, click on the Insert button.

3. Select Change Properties from the Behaviors menu.

4. Select the Select Element radio button option.

5. Select div from the element type dropdown (this is the “layer” element type)

6. Select the submenu to be displayed by this mainMenu button from the Element ID dropdown.

7. Click the Visibility button

8. Select Visible or Invisible radio button.  (Make sure the “Restore on Mouseout Event” checkbox is unchecked.)

9. Click OK to add the behavior.

10. Change “onclick” to “onmouseover” or “onmouseout” in the event column of the behavior task pane.

Behaviors to Add for Each Submenu