This tutorial shows how to create custom navigation menus. You'll also learn to hide the menu using image map regions and the OnMouseEnter event.

Dynamic Panel Tutorial

Flyout Menu

Dropdown Menu

The dynamic panel is now your friend. We hope you're ready to enjoy the rest of your rich, interactive life together.

First, open FlyoutMenu.rp and open the "Flyout Menu" page. You should see two flyout menus for Women and Men.

Drag an image map region over the Women flyout menu and resize it so there is at least 10px hanging over each edge. We will use this as a "moat" around the menu to hide the submenu when the mouse moves over it.

Then, right-click on the image map and select Order > Send to Back.

Select the image map region and the entire flyout menu by clicking and dragging a selection area over the widgets. Right click and select Convert > Convert to Dynamic Panel to move the widgets into a dynamic panel.

Label the new dynamic panel "Women" in the Widget Properties pane.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

(AxureFlyoutMenu.zip)

This zip file contains the RP file needed to complete this tutorial

Drag the dynamic panel into place over the menu items so that Women in the flyout menu overlaps with Women in the menu.

Right-click on the dynamic panel and select Edit Dynamic Panel > Set Hidden.  Your panel will turn yellow. Also right-click on the panel and Order > Send to Back.

Next, select the Women menu item.  Double-click OnMouseEnter in the Interactions tab of the Widget Properties pane.  This will open the Case Editor.  Add the following two actions.

1) Show Panel (Women)

2) Bring Panel (Women) to Front

Double-click state1 of the Women dynamic panel and select the image map region.  Add a case to the OnMouseEnter event with the action "Hide Panel (Women)." 

Generate a prototype and test it out.  Mousing over the Women menu item should show the flyout menu, and mousing over the surrounding image map region should hide it.

If you'd like, repeat these steps for the Men and Home flyout menus and you can see all of the flyouts working together.

And that's it. You can create flyout menus with text, images, or any other widget that your menu needs.

Step 1: Add an Image Map Region

Step 2: Convert to Dynamic Panel

Step 3: Move into position and set to hidden

Step 4: Add interaction to show flyout menu

Step 5: Add interaction to hide flyout menu

Step 6: Repeat steps for each menu item

Next: Masters Article

Back to Dynamic Panels (Basic)