Pop Out Menu

A few options for creating a hidden pop out menu

Adria Story avatar
Written by Adria Story
Updated over a week ago

One way to create a menu for your Showit site is to create a pop out menu. This is a great option for your menu if you would like to keep it hidden until you click to open it.

Canvas Settings


You will need to start with two separate site canvases: a Menu Closed site canvas, and a Menu Open site canvas. Below are a few helpful tips and settings for these canvases to get a pop out menu working for your site.

Menu Closed Site Canvas

The Menu Closed site canvas that is shown here is a rectangle and a text box, with a transparent background. You could customize this canvas to your liking, add a hamburger menu from our list of icons to indicate that people can click on it to see your menu items.

This canvas's sticky setting will need to be set to Top on Scroll.

Then you will want to make sure that the click action is set to show the Menu Open site canvas:

Menu Open Site Canvas

This particular Menu Open site canvas that is shown will slide down from the top of the page. This canvas will need to be set to Hidden to Start and also sticky to top.

Optional Design: Side Pop Out Menu


Another way that you can create this Menu Open site canvas would be to add in a rectangle, move it to either side of the page to create a side pop out menu.

The initial height would be set to 1px, set the canvas background to transparent, and make sure the edge locking is set to the correct side so that your menu is not in the middle of your page.

Animations


In order to change how the Menu Open site canvas appears, you can make those changes as you see fit under the Animation tab in the right side Properties Panel.

Here is an example for how the Menu Open canvas slides down from the top when clicked on, then slides back up when put away.

Did this answer your question?