Make a Drop-Down Menu
How to 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

*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.

Build a Drop-Down Menu:

  1. Create 2 canvas views on your navigation canvas. Keep all the navigation links outside both of the canvas views you've just added. 

  2. For the first view leave it blank (add nothing). You can create multiple drop-down menus by creating additional canvas views to add more interactivity with your site.

Keep the default state of your navigation outside the canvas views.

Now that we have our canvas views created, copy/paste the navigation links into View 2  (to maintain visibility of other links while a drop-down menu is displaying). Then add a rectangle element to 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).

(for larger image: Right Click>Open Image in New Tab)

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. 

(for larger image: Right Click>Open Image in New Tab)

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.

(for larger image: Right Click>Open Image in New Tab)

With this setting, it will reveal canvas View 2 and thus 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.

Last, you can make a duplicate of View 2 and add as many drop-down menus as you like. Just be sure to link them via the navigation below the views.

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

More Help Articles


Community Resources:

More video resources from our incredible community of designers and Showit users.
Jasmine Janae

Did this answer your question?