Axure template: Sliding (slide in, slide out) mobile menu

Download Sample File

 

The sliding mobile menu - An overview

If you use facebook or Google apps on your mobile, you'll be familiar with the "slide in", "slide out" mobile menus which are popular across a wide range of mobile apps.

Hidden by default, these menus display themselves by sliding out from one side (usually the left), pushing the screen's content with it.  After the user chooses to navigate to a new page, the menu slides back off the screen and the content reverts to its original place. 

Creating a sliding menu in Axure 7.0

You can create a sliding menu for your Axure prototype by downloading the template above and resizing the panels to the screen dimensions specific to the device you are designing for. So that you understand the logic behind each of the panel and interactions, we've also added some guidelines below.

iPhone frame

When prototyping for a mobile in Axure, you may sometimes find yourself in scenarios where you need to present the prototype on a desktop, as opposed to a mobile device itself (eg, when presenting to large groups).

To enhance this experience, you'll see that the first page in the template's sitemap is labelled 'iPhone Frame for Desktop View". This contains an image of a mobile device with an inline frame set on top, sourcing the content from your design. This allows you present the prototype in the context of a device. However just delete this page if you don't need it.

The second page, labelled "Mobile Sliding Menu" is where you will create your prototype design.

Using dynamic panels vs pages

If you take a look at the template, you'll see that instead of creating pages for the design in the "Sitemap" pane of Axure (which we would do for a website prototype), we added these as states of one dynamic panel (the "content" panel).

The design file as a whole is actually structured as a combination of dynamic panels, each with their own unique states and interactions.

Screen shot 2014-08-05 at 12.31.34 AM.png

Using dynamic panels as a way to organise the views can take a while to get used to, but using them here has the advantage of providing much better prototype performance. Although we did manage to create a version of this function using a traditional "page" structure, we had an issue where the prototype "glitched" each time that a new page opened.

"Container" panel

This dynamic panel provides the "real estate" for your app and needs to be the size of the screen specific to the device you are designing for.

You'll notice that the panel literally serves as a "container" for holding the "header" and "content" components of the design.  This makes the prototype more efficient by simplifying the interactions required. 

Widget Manager for the Container Dyanamic Panel.png

"Header" panel

The "slide in" effect will be triggered by the user selecting a button from the header of the screen. To represent this, we created a "Menu Button" widget with two possible cases:

  • A case that puts the button into a "selected" state when touched, and moves the header panel across to make space for the sliding menu panel.
  • A "default" case that displays the button as "unselected" and positions the "header" panel back into its original location.
Menu Button Interactions.png

To ensure that the "menu", "content" and "header" panels always move together, we added a responsive OnMove event to the "header" panel.

To add a "selected" state to the Menu Button widget, we set an "interaction state" (select > right click > selection).

Menu Button Interaction Styles.png

 

"Content" panel

The "content" dynamic panel holds the designs for each page (ie, view) of the app in separate dynamic panel states. The "menu" panel controls which view (ie, state of the "content" panel) is displayed.

"Menu" panel

This panel holds the vertical menu that will slide out from the side of the screen and enable the user to navigate between views of the app.

Because the menu is not visible by default, we positioned this panel outside the Axure canvas (we achieved this by selecting the panel and then changing its "x" placement to a negative value, -220 in this case).

We then added interactions to each menu button to:

  • Specify which view of the "content" panel the user is to be navigated to, and
  • "Slide" the menu back out of view.

Preview

Once you've put all this together, select "Preview" from the "Publish" main menu of Axure and try out your sliding menu in action!


Like this article? Prefer to read about other topics? Let us know...


Cognitive Ink is the only approved Axure training provider for the Australia and New Zealand regions. We provide group and one-on-one training of all skill levels to best fit your needs.