© 2002-2017 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.

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE