Hi all,
This is a menu I particularly like. Is there a way to produce it in Sparkle using either the menu and/or popups. It’s the main menu I’m looking at on the page. Thank you!
yea, for sure - set up the base menu using the “button” widget for each option, then add a normal popup with the animation “fade in - move up” set to 0.3 secs (or maybe 0.2), then just position it where you want it to appear.
On the popup setting, tick out the “always on top” box and set the “group id” the same for all popups (so only one of them can be open at a time)
After that, go on each of the base menu item and set it to “open popup” right at “mouse hover” and set each popup accordingly. Also tick the “close on mouse out” for better interaction.
that website is pretty cool and you should be able to replicate almost everything but the background hero image, and i’ve been fighting this a while now on Sparkle to find a way to make hero images cover 100vh and 100vw without adding additional code style (which can break up canvas representation).
1 Like
Excellent. Thank you so much. I’ll give it a go. You can make the gallery full width but it has a border so not sure if that helps!
1 Like
thanks for the idea, but it just isn’t quite possible right now on Sparkle to do that and it is unfortunate.
I hope your menus go well! Understanding the popups logic will open up infinite possibilities of interactions and menus, and it is worth studying it 
I made a quick setup of this, including the triangle pointing up. I think the “Move Up” animation is a bit heavy handed for the menu (the menu slides from the bottom of the window), and we should add some control over that, so I have set it to just fade in.
Overall it’s not identical but pretty close.
Also I should note that on the original site the fourth menu is a bit broken and will move to a different position.
You can get the sample project here:
2 Likes
Cool idea 
Mr. F.
Duncan, this is great thank you for taking the time to do this. Out of interest, we then have the problem of mobile version, but I will work out a way.
For mobile the approach is entirely different, so you can hide that stuff and use a full screen popup, as per the popup documentation: