Full screen mobile menu

First, big thumb up for Daniele and Duncan. You did a great job with Sparkle 3! As for the full screen mobile menu, can anyone explain how this works?

1 Like

Hi @Mart, thanks!

You create a popup from the top left popup thing in the format bar, selecting “New Popup”

image

This creates a default normal popup, changing settings to this is a start:

This makes the popup be in a fixed position, horizontally centered, use the browser vertical height and align to the top of the screen with 0 margin. In this configuration the popup/menu content will scroll vertically, making it ideal for menus of different heights. You can also use stick to top content inside the popup, to have a fixed header in case the content scrolls.

You can customize it’s name from the layer panel or from the arrange inspector, for example naming it “full screen menu”. Also make the popup background full width to use all the device screen, so something like this:

Now I’ll add some fictional content and make the background translucent, say:

Finally clicking the close button in the format bar (or selecting “No Popup” in the popup icon’ menu) you go back to canvas editing:

image

Here we need to add the trigger mechanism to open the popup, so I’ll add a button and set some hamburger-like icon to it:

I left the “menu” button label for accessibility purposes but made it transparent. The on click action opens the full screen menu. No mouse hover configured because this is for mobile, but you could also make it activate on hover if you used this on desktop.

The way to make this only work on mobile is to hide the hamburger button on the desktop devices (or where you don’t need it anyway).

With a little planning and measuring and trial and error you can get the popup close button to align over the hamburger, to make tap to open and tap to close more straightforward.

This is the result (in the safari responsive design mode):

3 Likes

@duncan Thank you for your world class support!

Excellent.

This tutorial would be worthy of adding to the “How to…” section of the written documentation, as well as a short video tutorial.

1 Like