Make a Drop-Down Menu

Create drop-down navigation using canvas views

Ben Junk avatar
Written by Ben Junk
Updated over a week ago

Drop-down menus are great options to link out to sub-category elements on your site such as multiple galleries. To do this in Showit you'll need to use canvas views to create the drop-down feature that is revealed when transitioned by a click action.

Note: Hover drop-downs are not available with Showit. We have made this decision based on how they can negatively impact the user experience with the increasing use of touch-screens and how hover functionality doesn't equate well on them. More information on how hover menus impact experience can be found here.

Step 1: Canvas Views

Create a canvas view on your navigation canvas. Select all of the navigation links outside this canvas view by holding Shift + Selecting all of the links, and then click and drag them into the canvas view.

Duplicate this canvas view, and rename it Canvas View 2

Step 2: Design the Drop Down

Now that we have our canvas views created, add a rectangle element to Canvas View 2 that will function as the background for your drop-down links.

Next, add text and create the new links (example: About Me and My Clients will need to be linked).

Step 3: Positioning

After you have created & designed your drop-down menu you may want to confirm your navigation canvas is set to a higher stacking order than the rest of the canvases on your page.

This way it will overlay each of the canvases below when the menu is revealed rather than being displayed behind the canvas and getting cut off. Most default canvases are set at a stacking order of 0, so the drop-down canvas only needs to be set one or two numbers higher in order to function. 

You may notice that in preview when you access your drop down it won't align quite right. You can fix that by making sure that all of these elements have horizontal edge locking set the same way.

Step 4: Click Actions & Scroll Actions

Next, we want to set up the click actions and function of the drop-down menu. In Canvas View 1 select the text you are wanting linked to reveal the drop-down menu. In this example, I am using the "About" link. Set the Click Action on the text to target the canvas view your drop-down menu is located on, in this case, Link>Canvas>This Canvas>View 2.

With this setting, it will reveal canvas View 2 and the drop-down menu.

Now that we have the function set to show the drop-down menu we will want to add the ability to re-hide the menu so it doesn't remain open as a visitor navigates your site. Select Canvas View 2 to edit the "About" link there and follow the same steps as above but have it target back to Canvas View 1. Link>Canvas>This Canvas>View 1.

At this point, you may want to set a scroll action on a thin canvas here, so that your drop down menu will hide itself when you scroll down the page. To do this, you can create a blank canvas and position it just below your header canvas.

After that, you'll want to shrink this canvas down to be nearly invisible. Then you're all ready to set a scroll action! Trigger>Canvas>Change Canvas View>(menu canvas name)>View 1

Step 5: Create More Drop Downs

Lastly, you can make a duplicate of View 2 and add as many drop-down menus as you like. Just be sure to follow the steps above again to recreate the correct links and settings on all drop down menus!

Mobile Drop Down Menus

You can create a drop down menu on your mobile design by following the same steps as above, with a few minor differences.

1). Set up Canvas Views

2). Design Your Drop Down

3). Set Your Click Actions

You will need to set this differently on mobile than you would on the desktop version.

First, make sure you set your click action in Canvas View 1 on the text element that you want the drop down to come from this way: Canvas>This Canvas>View 2

Note: Make sure that this action is not set to "Hide Site Canvas"

Second, set the click action on the same element in the second Canvas View this way: Canvas>This Canvas>View 1

Note: Make sure that this action is not set to "Hide Site Canvas"

And finally, set your click actions on your drop down menu items. Be sure to add

Hide Site Canvas>This Site Canvas to the action here, so that when you click on a drop down menu item it will hide this menu.

4). Create More Drop Downs

You can duplicate Canvas View 1 and repeat these steps to add as many drop-down menus as you like! Just be sure to follow the steps above again to recreate the correct links and settings on all drop down menus!

All done! You can go ahead and Preview or Publish your new drop-down menu to see it in action! 

Did this answer your question?