HOME
SERVICES   V
YOUR ACCOUNT   V
PRODUCTS   V
OUR STAFF   V
 
Logo
Creating mega drop-downs in Axure RP Pro
 
Why and how to implement mega drop-downs
Axure RP Pro allows to implement simple drop-downs like the one shown below:
By spending some time on the editing options, one can modify the appearance of these controls pretty well (apparently, all but the border width), and apply interactions to each single item in the list. So overall it works pretty well.

Nevertheless you might want to implement some nicer, bigger mega drop-downs instead. These are much more powerful and usable than simple drop-downs; Jakob Nielsen explains it here:
A lorem ipsum
B lorem ipsum
C lorem ipsum
Mega Drop-Down Navigation Menus Work Well (from useit.com)
If you need a third level of navigation being reflected in the global nav, then you have one more reason to use mega drop-downs, as with the pre-defined menus in Axure the solution would be to have unpractical fly-out menus, which lower the user experience considerably because they are difficult to control, and because the navigation options are hidden. 

It's a nice workaround that gives all the freedom to include anything whatsoever in the navigation area, and it does a fair acceptable job, obviously until Axure doesn't come up with a proper widget that will make it even easier to create.

NOTE: The pattern for mega drop-down can obviously be used also in other mouseover interactions, such as sharing buttons - see for example the preview on the right hand side at:
Behind the scenes: how it works
(reference to original .rp file available for download)

The main navigation is set on a master which applies to all pages as a fixed background.

The image below shows how the background master looks like once the mega drop-down have been implemented. Each mega drop-downs is contained within a panel set in hidden state (in the screenshot below, the "Services" mega drop-down is here set as visible, with the sole purpose of clarity).
When the mouse cursor enters any of the navigation links, the correspondent panel is made visible (OnMouseEnter interactions set as "Show panel" and "Bring panel to front", with a 200 ms delay). At the same time, all other mega drop-down are hidden, to avoid having more than one opened at one time.

Several image map areas have been located on top of the navigation items and between any two of them. These image maps serve as active areas so when the mouse cursor enters any ot them, all the drop-downs are instantly closed. This allows for the mega drop-downs to be still visible when the mouse cursor leave the correspondent menu items from underneath, which is the condition for drop-downs to work as expected (read side note 3 below to see the reason why these map areas are so large).
 
http://addthis.com/web-button?type=bm&where=website&url=&bm=bn3&analytics=0
Case 1) PRODUCTS / SERVICES mega drop-downs
This is the easiest implementation.
An image map region covers the whole drop-down area and leads to the relevant sub-page on mouse click. There is also an OnMouseOut interaction associated to the image map so that the panel is hidden when the mouse cursor goes outside the area.
This solution is quick and easy to implement, the only limitation is that it contains one link only, and this is active in the whole drop-down, white areas included, regardless the cursor position.
The mega drop-down is pixel aligned with the correspondent menu, both vertically and horizontally.
IMPORTANT: once all the mega drop-down content is in place, remember to bring the image map region to front via the editing tools, as anything laying on top of it would activate the OnMouseOut interaction, even if it's just a 1 pixel wide piece of text. The result is that the drop-down would disappear even if the mouse cursor is still inside.

Case 2) OUR STAFF mega drop-down
Similar to the previous solution, but several image maps have been used to link to different pages. With this approach, the OnMouseOut instruction can't be used the same way as before, because this would hide the mega drop-down while the cursor is still inside. In order for the drop-down to disappear when the cursor goes out, escape panels (image maps) have been used: each time the mouse cursor enters one of them, the panel is hidden.
Each time a new page is loaded via the links on drop-down, a StaffProfileName variable is set to a specific value which is grabbed abck again when the next page loads, in order to get the page title consistent with the name selected.

Case 3) YOUR ACCOUNT mega drop-down
Same as OUR STAFF, but contains an interactive form. The button leads to different pages depending on whether the user is a new customer or an existing one (remember to set the two radio button controls as part of the same group to make it work). It'ss not so common to include interactive elements in a drop-down, but a good reason to go for this solution is that overlays are lighter than page loads and seamless, as soon as the users are in control.


Side note 1) OnPageLoad conditions have been added to each page so the proper navigation menu appears as selected.

Side note 2) All panels are hidden when the cursor leaves any of the mega-drop downs. The reason for this is to avoid any of the drop-downs to remain opened why another one is displayed.

Side note 3) I initially tried to use 1 pixel wide image maps as escape areas around the navigation menus, but the browser didn't render them quickly enough, so whenever the mouse cursor movement was above a certain speed, the drop-downs used to remain opened even after the cursor had left. I thefore ended up having larger areas as an ideal compromise: they cover the border of the menus but leave the central area free. You might to try different variations with different width.

Side note 4) Mega drop-downs appear with a 200 ms delay with respect to the MouseEnter event. This prevents them from being opened by accident whenever the mouse cursor enters the active areas, and gives a sensation of smoother interaction. One more advantage compared to the standard Axure menus.
The notes below show how this pattern has been obtained - notes are all on this page, even though you can navigate through different pages.
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported Licence.
Prototype created by Luca Benazzi (www.lucabenazzi.eu)