Building a Mega Drop-Down in Axure RP

This guide will walk you through creating a mega drop down that is visible on hover similar to the way sub menus work with the default Menu Widget… Only you’ll have more control over how and what is displayed. The assumed interaction is to show the menu on hover, hide it on mouse out, and have a clickable top level item.

For this guide I will be using Axure RP 6. This technique should work in previous versions to some extent since it uses basic interactions. Download a free trial if you don’t already have it.

Step 1: Make a primary navigation bar (as a master) using the Menu Item, table, or arranged static text.

Step 2: Place a Dynamic Panel the width of the page that generously extends across the navigation in every direction. Name it something meaningful like “MegaDrop”. Make sure it is layered on top of the navigation.

Step 3: Add a state to the Dynamic Panel for each primary navigation item and name them appropriately for easy reference.

Step 4: Enter the edit mode for the first state. Place an Image Map Region that fills the Dynamic Panel region. This Image Map Region will act as a sort of negative space since it will close the dropdown when the user moves their mouse away from the navigation area. With the Image Map Region selected, and the widget properties visible, go to the Interactions Tab (Ctrl + 2). Select OnMouseEnter and click Add Case… Select Hide Panel(s) under Dynamic Panels. Then select “MegaDrop” (or whatever you called it in Step 2) and hit OK. You can add an animation to make it flashy, but I’ve found it can be a little buggy if the user is mousing over and out of the navigation items too fast.

Copy and paste this Image Map Region onto every navigation state.

Step 5: Make a box in the first state that will hold the dropdown content. The top of the box should away from the edges of the Image Map and in front of it. Populate the mega dropdown with whatever it needs for the navigation item it’s associated with. The tricky part is getting it to align with the top level navigation. You can try moving it to the top of the state list with the dynamic panel set to visible. Then it’s just a question of going back and forth between the state edit tab and the primary navigation view to get it right.

Repeat this for every state and navigation item.

Step 6: Go back to the primary navigation view and add an Image Map Region on top of each navigation item. It helps if they extend between each item to touch to make a solid area of separate Image Maps. Make sure that all of these Image Maps are in front of the “MegaDrop” dynamic panel with the dynamic panel extending in every direction outside of the Image Maps. We want to make sure that if the user moves their mouse above the primary navigation, they will hit the negative space.

Step 7: Get to the interactions view for one of the Image Maps you just created (similar to how you did it in step 4). Add a case for OnClick. Select Hide Panel(s) and then “MegaDrop” under the Dynamic Panels heading. Also, select Open Link in Current Window under the Links heading and find the top level navigation page the navigation item is associated with. Click Ok

Add a case for OnMouseEnter. Under the Dynamic Panels heading, select Show Panel(s) and then “MegaDrop”. Under Dynamic the Dynamic Panels heading, select Set Panel state(s) to State(s) and select MegaDrop. Then in the dropdown (at the bottom) select the state associated with the top level navigation item. Click Ok

Repeat this for each Image Map Region on the primary navigation bar.

Final Step: Generate a prototype and test it out!

5 Comments

  1. Julia
    February 22, 2013

    Thanks for this great tutorial. It gives a lot more control than the built-in mega menu. I was able to use this for a mega-menu that required custom rollover styling on each main menu item.

  2. Niels
    November 1, 2013

    Hi

    I have created a mega menu. I dont want the menu to disappear on mouse out, but on “when click outside the mega menu, the menu close”.

    How to solve that?

    Niels

  3. Mike
    November 1, 2013

    You can use the same steps outlined here, just replace all of the references to OnMouseEnter to OnClick.

    Though to put my UX hat on, I wouldn’t recommend this type of interaction in the wild. Assuming there are clickable items directly outside of the dropdown area, you are essentially forcing the user to navigate a minefield of clickable links to find a dead spot in order to close the dropdown.

  4. Federica
    September 12, 2014

    Great tutorial, thanks a lot!

Leave a Reply