App Press Documentation

Learn how to build mobile apps without writing code.

Adding Slide Out Menus

Once you've added a header to your project, you can add a slideout menu. Start by adding a new Master Page called "Menu Overlay."

Add a new page to your default section called "Menu," as well.

Select the header master page, then double click to enter the editor.

Use the Hotspot tool to draw a touch enabled area over the element you want to use for your menu.

Next, you'll need to link your new hotspot area to the Menu page you created, and choose an animation style for your menu. You'll be able to see a preview of the animation style from the dialog box. Hit "Save" when you're done.

Now it's time to build the menu. You can either upload an asset for your menu, or build one using our Rectangle and Text tools. In this example, we'll create one using the Rectangle and Text tools. Open the Menu page in the editor, then select the Rectangle tool and draw an area for your menu.

Align your new shape using the Layer Alignment panel. From the Page Information panel, set the background color to transparent and choose the Master Page to "Menu Overlay."

Use the Text Layer tool to add navigational areas to your menu. You can style your text by selecting the text you've typed, then changing color, font size, spacing and other elements in the Layer Properties panel. You'll use the Hotspot tool to link these areas to specific pages in your app.

Once you've added text to your menu, you'll link these elements to specific pages in your app using the Hotspot tool.

Next you'll need to build the overlay page. Save your progress, then copy the background of the menu page, and paste it onto the Menu Overlay Master Page.

Resize the layout frame to the same size as the menu asset layer. This will make sure the menu elements fit perfectly into the menu overlay.

Using the Hotspot tool, draw a new hotspot over the menu, and set it to the virtual page "Back."

Drag your new hotspot layer beneath the Layout Frame in the Layers panel.

From the page information panel, select the "Show as Overlay" option, and select an animation style for your menu. Set your background color to "Transparent" and save your progress.

You're all set! You can preview your new menu on your own phone or tablet using App Press Now.

Video Tutorial

 
Last Updated:
May 12, 2016