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 steps required to create this widget in Muse are very simple:
- Place an Accordion on the page.
- Set it’s options to “Can Close All” and “Close All Initially”.
- Remove all of the default items except for the first one.
- Place a Vertical Menu inside of the Accordion container.
- Add any other content that you’d like into the container.
- Style to taste.
Here is a diagram explaining the structure of this super widget:
Below is a real Muse example. Click here to see it live.
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.