David Asch - September 26th 2015
Accordion menus are great for keeping your site navigation tidy and compact, particularly for mobile sites, where space is more limited.
In this quick tutorial I’ll show you how to set up a basic accordion menu on the master page of a phone layout in Adobe Muse. This can just as easily be applied to tablet and desktop versions of the design, of course.
1. We’ll start by dragging our Accordion Widget onto the canvas. This is found under the Panels section of the Widgets Library.
2. Position the widget in the desired location. I’ve placed it at the very top of the page in the example. Click the 100% Width button* on the Control toolbar to set the widget to span the whole width of the page.
* I noticed that leaving 100% width enabled caused the page to contract slightly when the menu was opened, so you might want to remove it once you have set the width. The widget will still behave as though it is 100% width.
3. Next, we need to make sure that the accordion can be closed completely, this is important as otherwise the menu would always be visible. Click the blue disclosure arrow to open the Widget Options Panel. Click the Can Close All option.
4. By default, the accordion widget has three panels. We only need one for our menu. Make sure the accordion itself is selected (this is shown on the far left of the toolbar). Right-click inside the widget to open the contextual menu. Select Clear Widget Contents. This leaves us with one panel and a clean slate to create our menu.
5. Now it’s time to add our navigation menu. Open the Menus section of the Widget Library. Drag and drop the Vertical menu preset onto the accordion, making sure the content area’s boundary is highlighted as shown here.
6. Once placed, the Menu Widget’s options panel will open. I’ve left the default settings for the example.
Note: If you are creating a full width navigation menu, you won’t be able to display sub-level pages, as you cannot change the position of the fly-out menu.
7. Make sure the Menu object is still selected. Click the 100% Width button* to set the menu to fill the width of the mobile display.
*As noted in step 2, this may cause display issues, so uncheck the 100% Width option afterward.
8. Edit the styling of the menu to fit with your design.
9. With the menu setup complete, we can style the accordion header to make our menu activation area. Click the Label item to select it. First we’ll create an icon. Open the Fill Panel. Click Add Image. I’m using the much-debated Hamburger Menu Icon here.
10. We need to adjust the image settings. The default Fitting setting for fill images is Actual Size. We’ll change this to Scale To Fit as it allows more flexibility when adjusting the header size and padding. We also want the icon to be on the far left, so set the Position to left centre.
11. I’m adding a text label to the header. Double-click inside the label area. Type in your text, Menu in this example. I’ve set the Alignment to Right and also added a 10px Right Margin to keep it away from the edge of the frame.
12. That’s the menu completed. Remember to close the accordion panel by clicking its label before previewing or publishing the site.
Any content that is placed below the bottom of the accordion widget’s frame on the page will be pushed down when the menu is opened, which is a great effect. If you want the behaviour to change, enable the option Overlap Items Below. The menu will then overlay the content instead.
We hope you’ve enjoyed this tutorial and find it useful for your own projects and please share it with your friends and colleagues.
Until the next time, take care and happy Musing!