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 set up your navigation like normal. 

  1. Create 2 canvas views on your navigation canvas. Keep all the navigation 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.

2)  After we have our canvas views created, copy/paste the navigation links into View 2  (to maintain other links while a drop down menu is displaying). Then add a rectangle element to function as the background for any links you want to add.

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

(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 "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 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 1 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.

6) 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! 

Here's another, slightly different but perfectly good way to set up a drop-down menu.

Did this answer your question?