Help with a custom menu implementation

Hello everyone :slight_smile:
For some time now, I’ve been trying to find a “design” alternative to the “Menu” function in Sparkle.

I’ve created an icon in the header that opens a popup, and this popup contains the menu (in mobile version).

However, since the popup is linked to the specific page (in this case, “Main”), I can’t seem to open the popup using the header icon when switching to another page.

I’ve also attempted to duplicate the popup on all the other pages to link the icon to the popup on each page, but when I link the icon on another page, the links on the other pages are automatically removed and display “no popup selected.”

Is there a solution to this issue?

Additionally, the Menu function implemented in Sparkle is quite limited and doesn’t address several aspects I’m trying to develop.

I appreciate your assistance in advance. If you have an alternative method for creating a design menu, that could be very helpful to me.

Thank you :slight_smile:

Hi there.

Popups are “global” and not linked to a specific page. Or do you mean the trigger icon, like a hamburger bar icon? You do it like this: set the trigger icon (menu icon) to be seen on all pages and make it to open the popup (you need only 1 popup to do the trick). Then go to all other devices you have a customized layout and hide this menu icon (uncheck “show on this device”).

Then this icon should only appear on the mobile pages - on all mobile pages.

Please be more specific about this.

Mr. F.

Hello @Emzeder,

the popup can be made visible on all pages, from the arrange tab, just like any other page element. Once you have a popup visible on all pages and button visible on all pages, the link between them will persist.

The standard menu is designed with the main goal of making it quick to add a navigation element to your pages, and while it is configurable, it is inevitably not infinitely configurable. That’s where building your own navigation with buttons and popups comes in.

What specific limitations are you seeing?

Hello @Monsieur_Fozzie and @duncan,
First thank you for your help, your advices helped me fix the issue :slight_smile:

Popups are “global” and not linked to a specific page. Or do you mean the trigger icon, like a hamburger bar icon? You do it like this: set the trigger icon (menu icon) to be seen on all pages and make it to open the popup (you need only 1 popup to do the trick). Then go to all other devices you have a customized layout and hide this menu icon (uncheck “show on this device”).

Regarding the limitations, i’d like to say it is probably due to my lack of skills but i’ll try to enumerate them :

1 - I’m trying to find a way to animate the hamburger icon, (like rotating it when the menu turns on)
2 - Since on mobile the menu is shown under the Hamburger version, it pushes me to adapt a different menu shape, which impacts the Desktop version as well (especially colors and fonts)
3 - I tried to be inspired by the menu you developed for sparkleapp.com however it is impossible (for me) to reach the same effect with the menu feature


4 - When i do some changes to the menu the entire website desorganizes itself (i’ll open a different subject about it)

Again thank your help,

That menu is done using a popup: https://sparkleapp.com/docs/popup.html – there’s specific documentation about doing a mobile full screen menu.

To make the rotation animation just use the rotate animation on the close button on the pop-up, it gives the illusion of it rotating and changing to an X.

As Duncan told you, we designed a popup to have the menu on the phone, it’s just a pop-up with buttons to each page.

And what effect you can’t reach?

@duncan
It’s a dead link to the documentation :neutral_face:
Should be ***/popups.html

Mr. F.

Yeah Popups | Sparkle Documentation

Can you explain that a bit more detailed? Where do I find the rotate animation?