Prototyping a drop-down menu

With Justinmind, you can create a drop-down menu in your prototypes. The user will be able to select values from the drop-down in order to navigate to another area of your prototype.

create drop down menu

To create a drop-down menu in your prototype, follow the steps below:

Designing the drop-down menu (the layout)

  1. In a new web prototype, customize your Homepage as desired.
    • Next, drag a Text Table widget to the canvas and place it in the top-right hand corner of the canvas.
    • In the Properties palette, rename its ID “Main_menu”.
    • customize your homepage
  2. Remain in the Properties palette and reduce the number of rows in your Text Table to one.
    • Customize the number of columns your Text Table contains, in accordance with the number of main menu options your Homepage will contain. Our example has four columns, for four main menu options.
    • Add a main menu 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.
    • customize text table
  3. Drag another Text Table widget to the canvas, and place it below the second Text Table cell (of the original Text Table) on the canvas.
    • Go to the Properties palette. Rename its ID “Menu_items_1”. This Text Table will hold the sub-menu items for the “Tour” main menu option.
    • rename text table
  4. Remain in the Properties palette, reduce the number of columns to one and customize the number of rows in accordance with 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 the style of the Text Table as preferred.
    • Reposition the “Menu_items_1” Text Table so that it sits directly underneath the “Tour” main menu option.
    • reduce number of columns
  5. Repeat steps three and four so that you have Text Tables with sub-menu items for the “Features” and “Pricing” main menu options.
    • additional sub menu items
  6. 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. Remember to rename them respectively.
    • add additional screens

Adding interactions to the menu

  1. Back in the canvas, select the cell that contains the first sub-menu item under the “Tour” main menu option. Go to the Events palette.
      • Add an “On Mouse Over” + “Change Style” event. Selecting the same cell from the Outline palette.
      • Below, check the “Background” option and change the blue (use HEX color code #21c0c0 to match our example). Then, check the “Text” option and change the color of the text to white. Click “OK”.
    • This event will ensure that the selected sub-menu item appears as the selected item when the user selects it during simulation.
  2. 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 the select the first sub-menu item from the “Tour” main menu option. Click “OK”.
    • This event will ensure that the selected sub-menu item links to the relevant screen when the user selects it during simulation.
  3. 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.
    • copy paste events
  4. 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 from the Outline palette. Click “OK”.
  5. 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 from the Outline palette. Click “OK”.
  6. Next, add another action. This will be an “On Mouse Enter” + “Change Style” event. Select the “Tour” cell from the Outline palette.
    • Below, tick the “Text” option and change the color to blue (or HEX color code #21c0c0 to match our example). Click “OK”.
  7. Add a final action to this event. This will be another “On Mouse Enter” + “Change Style” event. This time, select the “Home”, “Features” and “Pricing” cells from the Outline palette.
    • Below, tick the “Text” option and click “OK”.
  8. Ensure that all links between interactions are set to “WITH previous”.
    • links with previous
  9. 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.
  10. Finally, with the “Home” cell selected, go back to the Events palette and remove the “Show” action.
  11. 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.