Pop Out Menu

How to create hidden pop out menu

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

There are so many ways that you can create a menu for your website, and this is just another option! If you are not wanting your menu to be shown at all times, this is a great option.

Getting Started

You will need to start with two separate site canvases: a Menu Closed site canvas, and a Menu Open site canvas.

Menu Closed Site Canvas

The Menu Closed site canvas that is shown here is a rectangle and a text box. But you could even 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.

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 and make sure the edge locking is set to the correct side so that your menu is not in the middle of your page.

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

Did this answer your question?