By Noam Almosnino
On December 11, 2012

This week we’re excited to announce the release of Muse 3.0 which gives you the ability to create mobile and tablet websites. Designing the navigation for these types of websites is often challenging—as you need to strike the right balance between exposing the site’s information architecture without taking up too much space. A common solution to this problem is a toggle menu that can expand and collapse when touched. I’ll demonstrate how to create this widget in the latest version of Muse, and provide you with a sample file at the end of the post so that you can get started right away.

The Expanding Mobile Menu

Let’s start by looking at real world examples of this super widget.

 

Here is the pattern
on microsoft.com


 

 

Vritti is a real Muse site using
this design approach.


The Recipe

The widgets in the latest version of Muse are automatically touch and swipe aware. You can simply design them like you did in the previous version of the product. With that in mind, the steps required to create this widget are actually pretty straight forward.

  1. Open up the Phone Master Page. To navigate to the Phone Master, simply click the Phone button in Plan mode.
  2. Place an Accordion on the page, and set its options to “Can Close All” and “Close All Initially”.
  3. Remove all of the default items except for the first one.
  4. Place a Vertical Menu inside of the Accordion container and style to taste.
  5. Next, move the Header guide down to the bottom edge of the widget.
  6. Finally place all of your page contents on the Normal (non Master) pages.

The Result

Below is a screenshot of the Muse example in the sample file. Visit the URL http://bit.ly/Uh0dtf on your phone to interact with this super widget:


More is Coming

One of our main goals for this release was to allow you to make mobile and tablet sites in the easiest possible way. A lot of hard work went into making the learning curve small so that you could feel right at home with the new version of the product. We hope that you enjoy the new functionality and that it adds value to your business. Stay tuned for more examples of mobile, tablet and desktop widgets in the coming weeks!

You can download the sample file for this widget here.

COMMENTS

  • By Andrew Cooper - 9:57 PM on December 17, 2012  

    Just brilliant! Thank you so much. Andy

  • By Paco - 4:34 AM on December 18, 2012  

    Is it possible to close (contraction) this accordion automatically after n seconds if there is nothing selected?
    Thanks. Pretty good.

  • By Noam Almosnino - 10:52 AM on December 19, 2012  

    Paco, not at this time, but that’s a great idea for a a feature enhancement. I recommend you suggest the feature on the Muse forum, so that the community could vote for it.
    http://forums.adobe.com/community/muse/ideas