Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a drop-down menu in your web wireframes

Learn how to create and simulate a drop-down menu in your web wireframes and prototypes with the help of this tutorial.

A drop-down menu, drop-down list or pull-down list, is a UI navigation pattern that allows the users to choose values from a list and navigate to the target value in another area of the website. In this tutorial, you’ll learn how to create your very own drop-down menu using Justinmind’s On Mouse Over and On Mouse Enter events. Read on for details.

You can download the below example here.

anim_web-wireframe-drop-down-menu

Creating a drop-down menu in your web wireframe

1. Create a new web prototype and resize the screen to 1280 x 768 px in the Prototype settings.

2. Drag an image widget to the canvas, resize it to match the screen, position it so that it covers the entire screen and choose a background image from your folders. Customize your webpage as desired. We’ve added a logo, header and paragraph to ours.

1-web-wireframe-drop-down-menu

3. Next, create your main menu. Drag a text table widget to the canvas, place it in the top right-hand corner of the screen, and rename it “Table-Menu-Nav”. Change the number of rows in the Properties tab to 1 and change the number of columns according to the number of main menu options you need. We’ve added 5 columns. Customize the table to match our example, renaming each cell with your main menu headers and resize the cells to match our example (tip: name the first menu option ‘Home’).

Note: It’s important to match our example (esp. the colors) to be able to follow the tutorial.

2-web-wireframe-drop-down-menu

4. Now, you’ll create a drop-down menu (there will be an opportunity to add more at a later stage). Drag another text table widget to the canvas. This time, change the number of columns in the Properties tab to 1 and change the number of rows according to the number of main menu options you need, plus 2 more (the top and bottom rows, which should remain empty as only intend to add padding to the menu). Customize and resize the table to match our example. Place the menu below the main menu on the screen, to match our example. This table should be named Table 1. If it is named differently by default, we suggest changing it so you can easily follow the below instructions. Make sure you mark it has hidden in the Properties tab.

3-web-wireframe-drop-down-menu

5. Finally, add a second screen ‘Screen 2’ to your prototype. This is the screen that we will link our menu options to, so create as many screens as you would like to add menu items to.

Adding events to your prototype to make it interactive

  • From the Outline tab, select the second cell (in descending order) in Table 1 and go to the Events tab.
  • Add an “On Mouse Over” + “Change Style” event, selecting the same cell from the Outline tab. Below, tick the background option and change the color to white and then tick the text option, and change the color to yellow. Click OK.
  • Back in the Events tab, add another event: “On Click” + “Link To“. Select Screen 2 from the screen options below. Click OK.
  • Copy and paste these two events to the rest of the cells in Table 1, apart from the first and last. Remember to change the screens you’re linking to as needed.
  • Next, select Table 1 from the Outline tab and duplicate it for as many drop down menus you would like to include in your web page. In our example, we’ve duplicated the table twice in order to have 3 tables in total. Remember to rename the menu options and quantity as needed. Additionally, remember to change the linked screens as needed in each instance.
4-web-wireframe-drop-down-menu

Event to change the appearance of the drop-down menu option your mouse hovers over

You have now created all the events necessary to navigate between drop down menus and the screens that they link to. Now, we’ll add events to the main menu so that you can navigate between main menu options. First, we’ll add events to the ‘Home’ menu option.

  • From the Outline tab, select the first cell in Table-Menu-Nav and go back to the Events tab.
  • Add an “On Mouse Enter” + “Change Style” event, selecting the same cell from the Outline tab. Below, tick the text option and change the color to yellow. Click OK.
  • Right click on this event and select the ‘Add action after selected’ option. Add an “On Mouse Enter” + “Hide” event, selecting Table 1 from the Outline tab. Click OK.
  • Add “On Mouse Enter” + “Hide” events for the remaining drop down menu tables. In our example, we’ve added two additional events, one for Table 2 and another for Table 3.
  • Now add another event by clicking on the ‘Add Event’ option. This will be an “On Mouse Enter” + “Change Style” event, and you’ll need to select the second cell in the Table-Menu-Nav  from the Outline tab. Below, tick the text option and change the color to white and click OK.
  • Add “On Mouse Enter” + “Change Style” events for the remaining cells in the Table-Menu-Nav (excluding the Home cell you are currently working in).
  • Ensure that all links between the events and event series are set to ‘WITH previous’.

Now, we’ll add events to the remaining main menu headers. 

  • From the Outline tab, select the second cell in Table-Menu-Nav and go back to the Events tab.
  • Add an “On Mouse Enter” + “Change Style” event, selecting the same cell from the Outline tab. Below, tick the text option and change the color to yellow. Click OK.
  • On the left of this event, select the ‘Add condition’ option and add the following expression:

Drag the NOT function to the first position in the expression builder, followed by Table 1. Change the option in the drop down under Table 1 to ‘Is visible’. Click OK.

  • Right click on this event and select the ‘Add action after selected’ option. Add an “On Mouse Enter” + “Show” event, selecting Table 1 from the Outline tab. Below, add a fade effect at 500ms. Click OK. This event is to show the drop-down menu that your mouse is hovering over.
  • Add another event in the same way: “On Mouse Enter” + “Move” event, selecting Table 1 from the Outline tab. Below, set the Left position to ‘Current’ and the Top to ‘Fixed; 75 px’. Add a linear easing effect  at 300ms. Click OK.

Note: the move event is optional as it simply simulates the fall effect of the drop-down menu as your mouse hovers over it.

  • Now add “On Mouse Enter” + “Hide” events for the remaining drop down menu tables so that they do not appear during this simulation.

5-web-wireframe-drop-down-menu-1

Finally we will add events to ensure that the other drop-down options appear unselected.

  • Next, add another event by clicking on the ‘Add Event’ option. This will be an “On Mouse Enter” + “Change Style” event, and you’ll need to select the first cell in the Table-Menu-Nav from the Outline tab. Below, tick the text option and change the color to white and click OK.
  • Add “On Mouse Enter” + “Change Style” events for the remaining cells in the Table-Menu-Nav (excluding the cell you are currently working in) in the same way.
  • Ensure that all links between the events and event series are set to ‘WITH previous’.

6-web-wireframe-drop-down-menu-1

Repeat this event series for each of the remaining cells in the Table-Menu-Nav, changing the relevant cell and drop down menu tables in each instance, as well as the relevant table in the expression.

And that’s it! 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 have completed the Events tutorials! Click here to continue with the Dynamic Panels tutorials