Designing custom mega menus

With Justinmind, you can design custom mega menus in your prototypes.

In our example, we place content within a Dynamic Panel’s panels to create mega menu options.

designing mega menus

To create a mega menu in your prototype, follow the steps below:

  1. In a new web prototype, drag three Rectangle widgets to the Canvas.
    • These will be the mega menu options the user can navigate between. Customize them as preferred name them “Tour”, “Features” and “Pricing”.
    • Position them horizontally on the Canvas (to match our example) and from the Properties palette, align the text vertically and horizontally.
    • By default, the left mega menu option (“Tour”) will be the selected option. Change the color of the background and text of the left Rectangle so that it appears as the selected mega menu option.
    • add rectangles to canvas
  2. Next, drag another Rectangle widget below the menu options and resize it to match our example. This Rectangle will act as the background layer for the sub-menu window that each menu option displays.
    • Drag content (such as Image and Text widgets) on top of the Rectangle to create the content of your first sub-menu.
    • rectangle background layer
  3. Group all elements within a Dynamic Panel (select all elements on the Canvas, right click within the selection and select the option “Group in Dynamic Panel”).
    • group in dynamic panel
  4. Go to the Outline palette, right click on Panel 1 and select the option “Duplicate panel”. Do this twice so you have three panels with identical content.
    • duplicate panel
  5. Go to Panel 2. Customize the style of the “Features” Rectangle so that it appears selected. Make “Tour” appear unselected. Customize the content in sub-menu as preferred.
    • Repeat this step for Panel 3, changing the selected and unselected menu options respectively.
    • customize rectangle style
  6. Next, you’ll need to add events to allow the user to switch between menu options. Go to Panel 1 of the Dynamic panel and select “Tour”. Go to the Events palette. Add an “On Mouse Over” + “Set Active Panel” event. Select Panel 1 from Canvas or the Outline palette. Click “OK”.
    • Repeat this event for the remaining menu options in Panel 1. Back in the Canvas, select “Features” (still in Panel 1). Go to the Events palette. Add an “On Mouse Over” + “Set Active Panel” event. Select Panel 2 from Canvas or the Outline palette. Click “OK”.
    • Repeat for “Pricing”, changing the active panel.
  7. Finally, copy each of these events to the corresponding mega menu options in Panels 2 and 3.
  8. Click “Simulate” and hover over each menu option to navigate to it.

You can download our example here.