This article walks through the steps to create dynamic or flyout menus in Axure RP that appear when the mouse is moved over a menu item and disappear when the mouse is moved away from the menu. This particular example will mimic a menu similar to what you would see in a typical desktop application.

Here is the resulting RP file and generated prototype for this menu.

MouseOver Menu Sample RP File

MouseOver Menu Sample Prototype

We start by adding a Rectangle widget to a wireframe (in our example we created a "Header" master). Enter the text "File" and format the fill color and border bolor. You may prefer to use an image here or a button shape.

Then we add a dynamic panel to the wireframe. In the Label field in the Annotations & Interactions pane, label the dynamic panel "File Menu".

Double-click the dynamic panel to open the Dynamic Panel State Manager dialog. Double-click on State1 to edit the first state.

In State1, we design the menu.

Start by adding an image map region that will be in the back surrounding the menu.

Then add the File rectangle widget like we did before and format it to the desired mouseover look. You may want to copy and paste the rectangle widget from before to ensure that this one will be the same size.

On top of that image map region, you can add any widgets including images or button shapes to design the menu, and you can add interactions to any of those widgets as well (i.e. open a page when a button shape is clicked). Leave space around the edges of the menu for the image map region so that the region completely surrounds the menu.

The end result might look something like this.

Select the image map region. Select OnMouseEnter in the Interactions pane and click "Add Case...".

Check "Hide Panel(s)". Click on "Panel" under Step 3 and select the File Menu. Close the dialogs.

Return to the original wireframe and select the File rectangle. Select OnMouseEnter in the Interactions pane and click "Add Case...".

Check "Show Panel(s)". Click on "Panel" under Step 3 and select the File Menu. Close the dialogs.

Move the File Menu panel over the File rectangle so that the File rectangles overlap. Resize the panel as needed.

Right click on the dynamic panel and click Edit Dynamic Panel -> Set Hidden.

Generate the prototype and you should see a working menu.

Here are links to the sample RP file and prototype again. This file includes a neighboring Edit menu that was created by copying and pasting the original menu and editing as needed. Note that the File Menu panel must be on top of Edit menu rectangle to hide properly. This is easily done with a "Bring to Front" on the panel.

An additional flyout was also created for one of the submenu items on the Edit menu in the same way. The "Link to Page 2" menu button in that additional flyout has an interaction to link to Page 2 which does work in the prototype. Also notice that widgets beneath the menus work as designed.

MouseOver Menu Sample RP File

MouseOver Menu Sample Prototype