Drop down menus are great options to link out to sub-category elements on your site such as multiple galleries. The concept uses canvas views to create the a 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. The first step is to create 2 canvas views on your navigation canvas. You can create multiple drop-down menus by creating additional canvas views to add more interactivity with your site.

Canvas  View 1 will be the default state your navigation displays and each additional canvas view will be used to create a drop down menu.

2)  After we have our canvas views created, You will want to copy/paste the navigation links in each canvas view (to maintain other links while a drop down menu is displaying). Then in your second canvas view you can add a rectangle element to function as the background for any links you want to add. 

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

3) After you have created and designed the look of 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 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 and 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)

4) Next we will 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 the drop down menu. In this example I am using the "Our Work" link. Set the Click Action on the text to target the canvas view your drop down menu is located on.

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

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

5) 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 "Our Work" link there and follow the same steps as above but have it target back to Canvas View 1.

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

Did this answer your question?