© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

 

SLIDING MENU

Make a menu that slides in from the side of a mobile interface.

STEP 1: SETUP

In the mobile training document, open the page named "Sliding Menu". On the canvas are two sets of widgets: the set on the left makes up the prototype's UI, and the set on the right will make up the sliding menu.


Select the "Sliding Menu" group on the canvas and move it to (0,0) so that lines up with the left and top edges of the canvas. Then, <hide it> by checking the "Hidden" checkbox in either the Style Toolbar or the Style tab of the Inspector.

STEP 2: SHOW "SLIDING MENU" WITH THE HAMBURGER ICON

In the Outline pane, select the "hamburger sliding menu button" widget. (This is the hamburger icon at the top-left of the prototype's header.) Then, double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


In the Case Editor, choose the "Show" action under "Show/Hide". Under "Configure actions", check "Sliding Menu".


At the bottom of the right column, select "slide right" in the "Animate" dropdown. In the "t" field, enter "400".


Click "OK" to close the Case Editor.

STEP 4: PREVIEW

Preview the prototype. Click the hamburger icon to show the menu. Then, click the arrow icon to hide it again.


MORE RESOURCES

 

STEP 3: HIDE "SLIDING MENU" WITH THE MENU'S BACK BUTTON

Click the hidden "Sliding Menu" group on the canvas to select it, and then click again to edit inside the group. This will make the group and its contents temporarily visible for editing.


Select the arrow icon at the top-left corner of the group, and double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


In the Case Editor, choose the "Hide" action under "Show/Hide". Under "Configure Actions", check "Sliding Menu".


At the bottom of the right column, select "slide left" in the "Animate" dropdown. (Notice that the "t" field uses the same value, 400, that we entered in the "Show" action before.)


Click "OK" to close the Case Editor.

(Note: If you would like to preview this page in the device frame provided on the "Device Frame" page, open that page, double-click the "Content Frame" inline frame, and select "[[PageName]]" in the dialog that appears.)

STEP 0: DOWNLOAD THE MOBILE TRAINING FILE

If you don't already have it, download AxureMobileTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials in the Axure mobile tutorials module.