Prototyping a slide menu for your mobile app

 

With Justinmind, you can create a slide menu in your mobile app prototypes. The slide menu can also be used both in Android and iOS app prototypes.

In our example, we create a slide menu for a Gmail inbox.

slide menu

To create a slide menu in your mobile prototypes, follow the steps below:

  1. First, create your Inbox. In a new mobile app prototype, drag a Rectangle to the canvas. Go to the Properties palette and give it a bottom border. Resize it to match our example.
    • Then, drag an Image and four Text widgets to the canvas. Position and align them on the canvas to match our example.
    • Double click on the Image and add a contact avatar from your folders. Customize the Text elements so they read the following: Contact name, Email subject, the first line of the email, how long ago it was received.
    • create your inbox
  2. Select all elements on the canvas and group them together (right click “Group” from the menu). Duplicate them to create additional inbox entries, customizing each as preferred.
    • group elements together
  3. Next, create a header for your Inbox, which includes a Menu (hamburger) widget, at the top of the canvas. You may wish to use some of the Android Icons for this step – learn how to activate the Android icons library here.
    • add menu widget to canvas
  4. Then, drag a Dynamic Panel to the canvas. This will serve as the slide menu container.
    • Go to the Properties palette. Resize it so that it matches the height of the canvas and set the width to 305 pixels.
    • Place it on the left of the canvas. During simulation, it will slide inwards.
    • add dynamic panel
  5. Double click the Dynamic Panel to edit its contents. To create the content for your slide menu, drag Image and Rectangle widgets into the Dynamic Panel. Use them to create Inbox menu items (e.g. Inbox, Outbox, Spam, Sent etc). Use the alignment tool to ensure elements are evenly spaced.
    • If designing for Android, you can also use the “Slide menu” screen example from the Android Phone widget library to save time.
    • add an image widget
  6. Next, drag a Rectangle widget to the right-hand side of the canvas. This element will make the Inbox view appear deactivated when the slide menu slides onto the screen during simulation. In the Properties palette, resize it to it match the canvas’ height and width. Set its background color to black and change its transparency to 75%.
    • Mark it as hidden, by checking the “Hide component” option.
    • add a rectangle
  7. Make sure that the Rectangle is positioned below the Dynamic Panel in the Outline palette:
    • check position of rectangle
  8. Select the Menu element from the Outline palette and go to the Events palette.
    • Click “Add Event” and add an “On Tap” + “Show” event, selecting the Rectangle from the Outline palette.
    • Below select “fade” from the “Effect” drop-up and enter “100” in the “Duration (ms)” input field. Click “OK”.
  9. Back in the Events palette, click the gear icon next to the word “Do” and select “Add action”.
    • Add an “On Tap” + “Move” event, selecting the Dynamic Panel.
    • Below, change the X position to 305 pixels. Select “easeInOutQuad” from the “Easing” drop-up and enter “300” in the “Duration (ms)” input field. Click “OK”.
    • Make sure that the links between both interactions are set as “WITH previous”.
    • These interactions will allow the slide menu to appear when the user taps on the Menu element during simulation.

  10. Back on the canvas, select the Rectangle from the Outline palette and go to the Events palette.

    • Add an “On Tap” + “Move” event, selecting the Dynamic Panel from the Outline palette.

    • Below, set the X position to -305 pixels. Select “easeInQuad” from the “Easing” drop-up and enter “300” in the “Duration (ms)” input field. Click “OK”.

  11. Back in the Events palette, click the gear icon next to the word “Do” and select “Add action”.
      • Add an “On Tap” + “Hide” event, selecting the Rectangle.

        Below select “fade” from the “Effect” drop-up and enter “100” in the “Duration (ms)” input field. Click “OK”.

        Make sure that the links between both interactions are set as “WITH previous”.

      • These interactions will hide the slide menu when the user taps away from it during simulation.

  12. Click “Simulate” to view and interact with your mobile app prototype. Click the hamburger menu to access the slide menu. Click the slide menu again to hide it.

You can download our example here.