“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.
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:
- If you haven’t already done so, create a Phone version of your site in Plan mode.
- Now open up the Phone Home page.
- Drag and drop the Blank Composition Widget onto the top of the page.
- Remove the third item from the widget.
- Now place the Triggers at the top of the page, above the containers.
- 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.
- Add an arrow icon on the trigger to indicate a sliding menu.
- Now click the first trigger.
- Set Fill opacity on that trigger and its container to 1.
- We’re almost there, the next step is to set the widget settings to match this screenshot:
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.