Axure tip: Creating a mega menu (meta menu)

    Download sample file

 

The Mega Menu - An Overview

Online dropdown ‘mega menus’ (otherwise known as ‘meta menus’ or ‘mega dropdowns’) are becoming increasingly common for web sites particularly those which are content heavy and have a large number of pages. When used in place of a normal drop down, mega menus offer the advantage of allowing large lists of menu links to be organised into categories. 

Creating a Mega Menu in Axure 7.0

Axure 7.0 currently provides customisable widgets for standard dropdown menus, however this has not yet been extended to mega menus.

You can easily create your own mega menu widget by downloading the template above, or assembling the following widgets and following the steps below:

  • A row of buttons (added to the same selection group). This will serve as the main menu navigation.
  • A dynamic panel with multiple ‘states’ (each state of the dynamic panel is used to display each of the dropdown regions),
  • A hot spot for each dynamic panel state (used to display/hide the mega menu), and
  • An additional hot spot behind the main menu tabs (also used to display/hide the mega menu).

A Step-By-Step 'How To'

  • Create and label a row of buttons to represent the main menu tabs for the site. I tend to use rectangular “button shape” widgets for this. Remember to label your buttons in the “Shape” field (in the “Widget Interactions” pane) at this stage.
1_buttons.png
  • Group buttons into a common selection group.  Do this by selecting all buttons > right click > Selection group > [enter name into the Selection Group dialogue box].
  • Drag a new dynamic panel widget to the canvas. This will be used to hide and display the mega menu content for each tab. Give this a name - we have named our’s “Mega menu”. Hide this panel on the canvas by right clicking on the panel > “Set hidden”.
  • Create a new state in your dynamic panel for each different mega menu required (eg, if you have four main menu tabs,  your dynamic panel will need to have four states). You can create states for by double clicking the dynamic panel and then entering the names of each new state into the “Dynamic Panel State Manager” dialogue box. 
  • Add the mega menu content to each state of the dynamic panel.  For example, on the ‘Meta menu 1’ state, we've added the mega menu specific to the ‘Menu 1’ main menu tab.
  • The placement of the mega menu within each dynamic panel will require a slightly different placement to ensure that the mega data menu is positioned underneath the relevant tab (eg, the ‘personal’ mega menu placement in this example will sit directly below the ‘personal’ tab).  You can check this by previewing your prototype. 

Tip:

  • Use a table format for the mega menus for easy alignment.  Add the relevant interactions (i.e. to open the relevant sub menu page) to each page label.
  • Drag a new “Hot spot” widget over each meta menu inside each dynamic panel state.  This should be slightly larger than the menu content.  Move the hot spot behind the mega menu by right clicking the widget  ‘Order’ > ‘Send to back’.
  • We want our tabs to be displayed with a white fill and black text when they are hovered over or selected. To do this we need to set interaction styles. Do this by selecting all the tabs, right click > Interaction styles > [set styles in the “MouseOver” and “Selected” tabs]. Note: In our example, we already have the MouseOver and Selected styles set up as global styles.
  • When the user hovers over each tab, we want the tab to display in the “selected” style and the relevant mega menu to appear.  To do this, assign the following rules to each main menu tab: 
    • Bring Global Meta Menu dynamic panel to Front
    • Set Global Meta Menu to Personal (here add the dynamic panel state relevant to the tab)
    • Show Global Meta Menu fade 500ms
    • Set is selected of Menu 1 equal to “true” 
9_meta_menu_interactions.png
  • Open each dynamic panel state (via the dynamic panel manager), select the image map region (which is sitting behind the menu content, inside the dynamic panel) and set the interaction rules for the image state region by creating a new case under ‘OnMouseEnter’. 
  • When the user moves their mouse out of the mega menu, we want the mega menu to disappear and the main menu tab to go back to its default state.  To do this, assign the following rules on the image state region in each dynamic panel state: 
    • Hide Meta Menu dynamic panel
    • Send Meta Menu dynamic panel to Back
    • Set Menu 1 to default style
    • Set Menu 2 to default style
    • Set Menu 3 to default style
    • Set Menu 4 to default style
  • Return to the main canvas and drag a new hot spot over top of the main menu tabs.  Position this behind the tabs by right clicking and selecting ‘Order’ > Send backwards. 
  • Similar to the hot spot for the dynamic panel, we want the tab to go back to its default state and the mega menu to disappear if the user selects another tab.  To do this, we need to assign the following rules to the hot spot:
    • Hide Global Meta Menu
    • Send Global Meta Menu to Back
    • Set Menu 1 to  default interaction style
    • Set Menu 2 to  default interaction style
    • Set Menu 3 to  default interaction style
    • Set Menu 4 to  default interaction style
9_meta_menu_interactions.png
  • Preview the prototype and voila! - You should have a mega menu that shows the right menu content when a user hovers a tab, allows a user to browse the menu and select links and then hides if the user exits out of the menu at any angle.  Customise the menus and submenus to your needs.

Follow up 22 October 2014

Based on a great piece of feedback from a commenter on this article, you can also implement this by using OnMouseHover -> Show (with "Treat as flyout" active). It seems you can then remove the hotspots that force the menu closed.

Have a look at the demo...with Option 1 (OnMouseEnter + Show) showing the menu as described in this article and Option 2 using OnMouseHover and Flyouts. I did notice that Option 2 (OnMouseHover + Flyouts) seems slower, possibly because OnMouseHover is a slower event. 


axure_icon.png

Cognitive Ink is the only approved Axure training provider for the Australia and New Zealand regions. We have a number of options for all skill levels and would love to hear from you if you are looking to upskill with this great tool. Use the enquiry form to get in touch, or send us a message at info@cognitiveink.com