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 to create mega menu options.
To create a mega menu in your prototype, follow the steps below:
- 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, and name them “Tour”, “Features” and “Pricing”. Change the color of the background and text of the “Tour” Rectangle so that it appears as selected by default.
- Next, drag another Rectangle widget below the menu options. This Rectangle will act as the background layer for the sub-menu window. Drag widgets (such as Image and Text widgets) on top of the Rectangle to create the content of your first sub-menu.
- 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”).
- Go to the Outline palette, right click on Panel 1 and select the option “Duplicate panel”. Repeat this twice so you have three panels with identical content.
- Go to Panel 2. Customize the styles of the “Features” Rectangle so that it appears selected and the “Tour” Rectangle appears unselected. Customize the content in the sub-menu as preferred, and repeat this step for Panel 3, changing the selected and unselected menu option styles respectively.
- Next, we’ll add events to allow the user to switch between menu options. Go to Panel 1 of the Dynamic panel and select the “Tour” Rectangle. Go to the Events palette and add an “On Mouse Over” + “Set Active Panel” event, selecting Panel 1 as the panel to be set as active.
- Back in the Canvas and still in Panel 1, select the “Features” Rectangle and add an “On Mouse Over” + “Set Active Panel” event, selecting Panel 2 as the panel to be set as active.
- Repeat for the “Pricing” Rectangle, setting Panel 3 as active.
- Finally, copy each of these events to the corresponding mega menu options in Panels 2 and 3.
Click “Simulate” and hover over each menu option to show its sub-menu.
You can download our example here.