Prototyping a slide menu for your mobile app
With Justinmind, you can create a slide menu in your mobile app prototypes. In our example, we create a slide menu for an Email app inbox.
To create a slide menu in your mobile prototypes, follow the steps below:
- 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 to add an avatar image, and customize the Text elements’ values.
- 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.
- 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.
- Then, drag a Dynamic Panel to the Canvas. This will serve as the slide menu container. In 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 into view.
- 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). If designing for Android, you can also use the “Slide menu” screen example from the Android Phone widget library to save time.
- Next, drag a Rectangle widget to the right side of the Canvas. This element will serve as a modal window so the Inbox view appears deactivated when the slide menu is in view 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 in the Properties palette.
- Make sure that the Rectangle is positioned below the Dynamic Panel in the Outline palette:
- 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 as the target to be shown. Give it a “fade” effect with a 100ms duration.
- 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 as the target to be moved. Change the X position to 305 pixels and select the “easeInOutQuad” easing effect, with a 500ms duration. Make sure that the links between both interactions are set as “WITH previous” so that they’ll occur simultaneously.
These interactions will show the slide menu when the user taps on the Menu element during simulation.
- 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 and select the “easeInQuad” easing effect, with a 500ms duration.
- 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 modal Rectangle as the target to be hidden. Give it a “fade” effect of 100ms. 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.
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.