By Noam Almosnino
On February 11, 2013

“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.

Pluralist Flyout Menu

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:

Flyout Menu Diagram

  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.
    WidgetLibrary
  4. Remove the third item from the widget.
  5. Now place the Triggers at the top of the page, above the containers.
    Composition Widget
  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.
    Fill Opacity
  10. We’re almost there, the next step is to set the widget settings to match this screenshot:
    OOUI

The Result

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

Muse Flyout

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.

COMMENTS

  • By Cabinet Hinges - 1:51 PM on February 11, 2013  

    The demo works absolutely fine but i cant seem to beable to open the sample file. Is there thing I am doing wrong.

    Thanks

    • By Noam Almosnino - 3:20 PM on February 12, 2013  

      Are you getting a particular error when opening the file? Can you post this issue on the forums, and then we’ll follow up from there? Thanks!
      Forum link: http://forums.adobe.com/community/muse