Build a useful compact phone menu
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:
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.
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.
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.
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.
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.
13Let's place our original Icona desktop menu on the page.
14Let's place our original Icona desktop menu on the page.
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.