SLIDING PANEL UP

First, open AxureiPhoneApp.zip and open the iPhoneApp-SlidingMenuTutorial.rp file.

 

Because the bottom nav is a single image, add a hot spot to the options button between the thumbs up/down. Also, add a hot spot over the Add Bookmark button since it was created using two widgets and we want the entire area to be clickable.

Step 1: Add Hot Spots

To create the sliding animation we're going to use the Set Panel State action. First, convert the entire sliding menu into a dynamic panel by selecting the widgets, right clicking, and choosing [Convert to Dynamic Panel]. Label the panel "SlideUpMenu".

Step 2: Convert

menu to dynamic panel

Now set the dynamic panel to be hidden by default. We need the panel to be hidden because you cannot click/tap through visible dynamic panels even if the state is empty.

Step 3: Set

Panel to Hidden

Let's start adding interactions by adding a case to the OnClick event of the OptionsButton, the hot spot we added in the first step.  Double-click OnClick to add the case.

Setting guides for mobile prototyping

Step 4: Add OnClick

to the Hot Spot

Add the action Show and select the SlidingMenu panel checkbox. Select the "slide up" animation from the animate in droplist.

 

Click OK to close the case editor.

 

Note that setting panel states automatically show the panel so we don't need to add a Show Panel action.

Setting guides for mobile prototyping

Step 5: Show Panel, Slide Up

Open the Menu state by double-clicking State1 in the Widget Manager and add a case to the OnClick event of the "Add Bookmark" hot spot we added earlier.

Setting guides for mobile prototyping

Step 1: Open Menu State, add OnClick to Button

To hide the panel we'll use the Hide action with the "slide down" animation.

Setting guides for mobile prototyping

Step 2: Hide panel, Slide Down

SLIDING PANEL DOWN

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

u52_start u52_end u52_line

Finally move the SlideUpMenu into place, you can hold Shift while dragging it move along one axis.

 

Generate your prototype and test it out.  Upload to AxShare and view it on your device.

 

If hiding the menu isn't working right, make sure the actions are in the right order.

Setting guides for mobile prototyping

Step 3: Move SlideUpMenu into place

This tutorial shows how to create a sliding animation that is commonly used to hide and show a menu. When prototyping iPhone apps, you can use this technique to hide and show an upload menu, settings options, or any display that shows and hides by sliding up and down.

SLIDING MENU TUTORIAL OVERVIEW

Now you've learned a great technique to create menus and content that slide in and out. Use it wisely.

DOWNLOAD

u76_start u76_end u76_line
u78_start u78_end u78_line
u80_start u80_end u80_line
u82_start u82_end u82_line
u84_start u84_end u84_line
u86_start u86_end u86_line

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

THE ROUNDUP

IPHONE APP TUTORIAL & TRAINING ARTICLES

Sliding Menu Tutorial

u105_start u105_end u105_line

MORE IPHONE APP TUTORIALS & TRAINING ARTICLES ::

u123_start u123_end u123_line
u124_start u124_end u124_line

This zip contains the iPhone App Template and files to complete the iPhone app tutorials

This is an archived Axure 7 training resource. You can update to Axure 8 for free at www.axure.com/update.