Adobe Muse CC Engineering Team

“Where is the flyout menu shown in Dani’s tutorial?” you might ask. Well it’s actually just a Composition Widget in disguise… Jump in and we’ll explore how to make this widget fly out from the edge of the screen.

Just like in the previous posts, I’ve provided a sample file at the end of the article to get you started.

The Flyout Menu

Here is a demo of the end result. When the user taps the trigger button, the menu flyes out from the right edge of the phone screen.

The Recipe

This super widget is essentially a Blank Composition Widget with two items. The first item is invisible, while the second item holds our menu. Here is a diagram of the design:

1. If you haven’t already done so, create a Phone version of your site in Plan mode.
2. Now open up the Phone Home page.
3. Drag and drop the Blank Composition Widget onto the top of the page.
   
4. Remove the third item from the widget.
5. Now place the Triggers at the top of the page, above the containers.
   
6. Add the Menu widget to the second composition item and style it to taste. By placing it on the second item, it will allow us to achieve the effect of sliding from the right.
7. Add an arrow icon on the trigger to indicate a sliding menu.
8. Now click the first trigger.
9. Set Fill opacity on that trigger and its container to 1.
   
10. We’re almost there, the next step is to set the widget settings to match this screenshot:
    

The Result

Below is a screenshot of the Muse example in the sample file.

One Important Note

We now have a pretty powerful widget. However there is one caveat to this design that you need to be aware of: In the instructions, we made the first item in the composition have a Fill opacity of 1. By doing this, we don’t actually make the container disappear from the screen, it’s just not visible. What this means is that the container is still there, and if you have anything clickable under the composition widget, it wont register the click.

The reason this pattern works in Dani’s design is because there are no clickable items under the menu. So make sure that you accomodate your design to not have clickable parts directly under the composition widget. If you do want clickable items under the menu, I sugest using the Expanding Mobile Menu that I presented in the previous post.

Stay Tuned for More

I hope you find this Super Widget to be useful. It’s a nice design pattern if used in the correct context. Stay tuned for more posts and more examples of super widgets.

Download the Sample File

You can download the sample file here.

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.