Prototyping a drop-down menu
With Justinmind, you can create a drop-down menu in your prototypes. In this example, the user will be able to select values from the drop-down in order to navigate to another area of your prototype. To learn how to create this example, follow the steps below:
- In a new web prototype, drag a Text Table widget to the top right of the Canvas. In the Properties palette, rename its ID “Main_menu”.
- Remain in the Properties palette and reduce the number of rows in your Text Table to one. Change the number of columns in the Text Table to match the number of main menu options your Homepage will contain. Our example has four columns, for four main menu options.
- Type in a value in each cell of your Text Table (e.g. Home, Tour, Features and Pricing) and customize the style of the Text Table as preferred.
- Drag another Text Table widget to the Canvas, and place it below the second Text Table cell of the original Text Table. Go to the Properties palette and rename it to “Menu_items_1”. This Text Table will hold the sub-menu items for the “Tour” main menu option.
- Still in the Properties palette, reduce this Text Table’s columns to one, and customize the number of rows to match the number of sub-menu items for this main menu option. Our example has three rows. Add a value in each cell of this Text Table and customize its styles as preferred. Reposition the “Menu_items_1” Text Table so that it’s directly underneath the “Tour” main menu option.
- Repeat steps four and five so that you have Text Tables with sub-menu items for the “Features” and “Pricing” main menu options.
- Add a second screen to your prototype by going to the Screens palette and clicking the ‘+’ icon. Rename it according to the first sub-menu item of the “Tour” main menu option. Add additional screens for each sub-menu item of the “Tour”, “Features” and “Pricing” main menu options.
- Back on the Home screen, select the cell that contains the first sub-menu item under the “Tour” main menu option. Go to the Events palette and add an “On Mouse Over” + “Change Style” event, and change the sub-menu item’s background and text color.
This event will ensure that the selected sub-menu item changes style and appears as the selected item when the user mouses over it during simulation.
- Back in the Events palette, click “Add Event” again to add an additional event. Add an “On Click” + “Link To” event, selecting the screen that you want the user to navigate to when they select the first sub-menu item from the “Tour” main menu option.
- Copy and paste these two events (“On Mouse Over” + “Change Style” and “On Click” + “Link To”) to the rest of the sub-menu items. Remember to change the linked screen each time.
- From the Outline palette, select the “Tour” cell from the “Main_menu” Text Table. Go to the Events palette and add an “On Mouse Enter” + “Show” event, selecting the “Menu_items_1” Text Table as the target to be shown.
- Back in the Events palette, click the gear icon next to the word “Do” and select “Add action”. Add an “On Mouse Enter” + “Hide” event, selecting the “Menu_items_2” and “Menu_items_3” Text Tables as the targets to be hidden.
- Add an “On Mouse Enter” + “Change Style” event, and select the “Tour” cell from the Outline palette. For the style, change its text color.
- Add another “On Mouse Enter” + “Change Style” event. This time, select the “Home”, “Features” and “Pricing” cells from the Outline palette. For the style, select ‘Text color’ but leave its color as default.
- Ensure that all links between interactions are set to “WITH previous” so that all interactions will trigger simultaneously.
- Copy and paste this interaction to the “Features”, “Pricing” and “Home” cells, changing the relevant sub-menu items in the “Show” and “Hide” actions and the main-menu options in the “Change Style” actions.
- Finally, with the “Home” cell selected, go back to the Events palette and remove the “Show” action, since the “Home” cell doesn’t have any sub-menu items to show.
Click “Simulate” to view and interact with your drop-down menu. Hover over the main menu options to see the drop-down menu options and navigate to other screens.
You can download our example here.