Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to design custom mega menus in your interactive wireframes

Design custom mega menus in your interactive wireframes with the help of this tutorial, which will show you how to use any type of layout to build your own menu components.

In the example below, a Dynamic panel has been used to place the contents of the sub menu.

You can download the example below here.

Mega menus in interactive wireframes

Creating a mega menu

1. Create a new prototype and drag two Text widgets (which will be the two main menu items) and a Dynamic panel onto the canvas.

2. Select the Dynamic panel, add a border to it and mark it as hidden.

3. Add a second panel to the dynamic panel.

4. Click ‘edit content’, and in both panels, add different content so that the two can be distinguished easily upon simulation. 

Adding events to make your mega menu interactive

1. Select the first menu item (‘Menu Item 1’) and go to the Events tab. Add an ‘On mouse over’ + ‘Set Active Panel‘ event, select the Panel 2 from within the Dynamic panel, and click OK.

mega-menus-in-interactive-wireframes-events

2. Add another action by selecting the gear icon next to the word ‘Do’ above the event you have just created, and selecting the option ‘Add action’. Add an ‘On mouse over’ + ‘Show‘ event, select the Dynamic panel, and click OK.

mega-menus-in-interactive-wireframes-on-mouse-over

3. Select the Dynamic panel, go to the Events tab, and add an ‘On mouse leave‘ + ‘Hide‘ event, select the Dynamic panel, and click OK.

4. Do the same for panels 1 and 2, each time selecting the Dynamic panel as above.

You can now click Simulate and enjoy your megamenus!

Next tutorial: Simulate tabs in your interactive wireframes>