Menu that appears "floats in" from the side?

1

Hi! I was wondering how flexible and customizable the menu in sparkle is. I’m playing around with a mobile version of a website that I already created for PC, so it is more mobile friendly. Top thing with this is of course the menu and how you access it and how it appears. I found this website on the www and really like the way she created her mobile menu (visible only on mobile devices!) is this kind of swooshing in from the side menu possible to build in sparkle?

thank you in advance for helping :slight_smile:

2

Hello Dooria79.

Yes that can be done with Sparkle.
It is a combination of a popup and animation.

Yo first create a popup with the correct size and navigation items. The hamburger icon is the trigger to let it appear. Later you can animate it, to slide in from the left.

Mr. F.

1 Like
3

OMG- you are the best!!! Thanks for that reminder! You are right, I forgot about animating the pop up.

Follow up question bc I just noticed this. Why can’t I adjust the size of the pop up? It seems to be always full screen when I add it, and the corners are not moveable :frowning: Any ideas?

4

Don’t know.

Sparkle ‍has ‍three ‍types ‍of ‍popups:

  • ‍‍normal ‍popups;
  • ‍‍modal ‍popups;
  • ‍‍fixed ‍popups.

Try “normal”. Maybe you have to move the X Icon within the popup.

Mr. F.

1 Like
5

Hi Doorla,

Try this:

In this example perform the actions on the 320px device layout.

  1. Add a Normal Popup to your canvas.
  2. In Appearance, set the Popup width to about 290px and height to 500px.
  3. In Style go to Animation Select Fade / Move left.
  4. Make sure you add a Button to your canvas to act as the trigger to open the Popup.
  5. Set the Button to Open Popup and choose the Popup.
  6. Add your Sparkle menu item into the Popup.

Test it in your browser (I assume you are woking on the 320px device layout so narrow the width of your Mac’s browser as much as possible to see. more accurate preview. Or Preview on your Phone.

That’s it!

1 Like