Creating mega drop-downs in Axure RP Pro

Mega drop downs in Axure
A mega dropdown UI created in Axure RP

Please note: this article was created in September 2011. The information is still valid, but you may want to check the new Online Axure Training course for more detailed and up to date information.

The basics of how mega drop down can be implemented in Axure RP are illustrated on the official site:

Flyout menu tutorial

If you choose the method described in the tutorial above, I’d recommend using a single dynamic panel instead of multiple ones. In my reply to Niels (comments below), i describe the most thorough way to achieve mega drop down menus, as described by Jakob Nielsen in this topic:

Mega menus work well for site navigation

This takes into account a delay effect to prevent accidental hovering over the  menus. Consider if it’s worth the effort, though. The text that follows is my old solution, it can still be useful to look at, even if the 500 ms delay is not conditional.

 

 

The solution that follows is not as simple as the one displayed on the link above, I nevertheless  reconsidered it as a good alternative, because it allows to improve the interaction on complex patterns such as a combination of a mega menu and a flyout menu underneath. In this case, in fact, the main issue is how to create a delay on mouse out. This can’t be achieved in Axure as on a proper front-end, as the menus should disappear only if the mouse cursor leaves the active area for more than, let’s say, 500 ms, and the limited scripting options of Axure don’t allow for this. But you can get to a similar result by positioning the escape areas (image maps) that you’ll find in the example below so that the effect is similar to the intended.

Mega drop-downs in Axure: HTML version

Mega drop-downs in Axure: original Axure RP Pro 5.6 file (330 KB)