By Noam Almosnino
On November 26, 2012

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.

COMMENTS

  • By Martin Clarke - 1:46 PM on November 30, 2012  

    Love this – however I cannot seem to get the length of the menu to remain consistent – the top level of the item (the accordion item) always remains one pixel longer than the menu below it. I have tried all different combinations of lower level containers being the right size, but still can’t get it to work… any suggestions?

  • By Martin Clarke - 1:50 PM on November 30, 2012  

    I notice that on the sample file it does the same, however you don’t see the edge – also, to confirm, I couldn’t see stroke element (in case this was ‘hiding’ the missing pixel edge).

  • By Martin Clarke - 2:09 PM on November 30, 2012  

    Ignore all that – fixed it :)