Build a useful compact phone menu

10 minutes to complete this task.
Learn the art of making menus that are both functional and user friendly for mobile devices in this tutorial. 10 minutes to complete this task.

How to build a useful compact phone menu.

We have nearly reached the end of our journey building various navigation types from a single original menu. We have built a desktop, tablet, phone and mega menu.

With each iteration, we have reused elements to build the next. This approach allows us to build smarter and faster with fewer errors. Now let's build a phone menu with a single burger icon menu placed top left or right of the mobile layout.

You will need:

  • A blank Muse site (just use the presets for the desktop)
  • The assets for this tutorials (see below)
  • Take a look at the completed widget:

DOWNLOAD January 2015 - Download Pack

Build the mega menu.

1We will start working as always in a blank site. We won't start with a phone layout but rather in the desktop space first as this gives us more canvas space to work.

2Let's place our original Icona desktop menu on the page.

3In the options, panel switch the direction of the widget to 'Vertical.'

4Change the icon element width to 100px and the menu width to 100px.

Addons options

5Now place the mega menu version of the menu we built on the page and delete the menu widget we just want the mega menu part of it.

6Change the trigger icon element width and the trigger width to 100px and place the trigger at the left side of the target. Change the the target area dimensions to 110px x 460px.

7Swap the trigger area icon out for the white three-line menu icon in the tutorial icons folder ( make sure you selected the normal state first).

8It should look like this.

Addons options

9Now move the vertical menu widget into the target area of the composition widget making sure the menu sits just touch (in line with) the top, left sides of the target area.

Addons options

10Now resize the target area to fit the menu widget. If you drag the target area from the bottom right resize handle towards the top left and release, the target will snap to the optimum size.

Addons options

11Select the second tab down (services) remove the submenu items.

12Finally change both the 'Show Target' and 'Hide Target' options of the composition widget to 'On Click.' Ensuring that the menu is more functional on a mobile device as the on hover function is designed for mouse hover rather than touch.

Addons options

13Let's place our original Icona desktop menu on the page.

14Let's place our original Icona desktop menu on the page.

Addons options

15This set of tutorials could not cover everything you can do with menus and navigation in Muse with just a few simple icons and the built-in tools and widgets. However, we hope it has opened your eyes to just how easy it is to build the kind of user interface elements you see on all the cool sites you love.

Keep playing and experimenting.

Article Author: Chris Kellett

Chris is one of the worlds leading experts in Adobe Muse and skilled in all aspects of HTML, CSS and Javascript a graphic designer, animator and film producer.

A freelance web developer for 19 years with 150+ muse templates and over 100 muse widgets (and counting) for other Muse template providers under his belt.

Skills Highlight:

Adobe Muse

Coding & Development

Graphic Design & UI

Looking for Adobe Muse Widgets? Looking to for Adobe Muse Training?
Copyright © 2015 - All rights reserved