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.

With a few small steps you can take the existing set of Muse widgets and turn them into powerful new elements–which can show and hide content on demand. In this first post I’ll show you how to create a Sliding Dropdown Mega Menu, and present examples of the widget in the real world. I’ll also provide a sample file at the end of the post to get you started.

The Sliding Dropdown Mega Menu

You can see an example of the Sliding Dropdown Menu on Odopod’s website. This widget can be very useful when you want to mix navigation with featured content, or if you simply want more control in the way a menu behaves.

Another example is on Google’s main page:

The Recipe

The steps required to create this widget in Muse are very simple:

1. Place an Accordion on the page.
2. Set it’s 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.
5. Add any other content that you’d like into the container.
6. Style to taste.

Here is a diagram explaining the structure of this super widget:

The Result

Below is a real Muse example. Click here to see it live.

Stay Tuned

When we first created the Muse widget architecture, the vision was to provide a foundation for our users to mix and combine pieces to create the desired elements that they needed. The goal of this series will be to present you with examples in creating these super widgets. Stay tuned for more recipes and examples in the coming weeks.

You can download the sample file for this widget here.