I created a dropdown menu with PG interactions. On desktop, everything works great. But the dropdown menu appears just one second when clicking on mobile or tablet.
Hi @Riccarcharias,
I think you have two choices. You can convert both desktop and mobile display of the dropdown to click. If you still prefer to have the desktop be hover, but click on mobile to get around your problem, you can have two interactions. One targeting the menu on larger screen sizes and one targeting smaller screen sizes. Under the advanced options you can elect to have an animation added only on mobile or desktop which should take care of this.
Cheers,
Bob
Hi @RobM ,
Thanks for your answer! Does “mobile” also include tablets or other touch-devices with bigger screen? And how do I set to close the dropdown menu on touch devices (when clicking somewhere else on the page?)
Hi @Riccarcharias,
The “mobile” button will have the animation only display on screens smaller than 768px, while the "desktop will have the animation only display on screens larger than 768px. If you want more granular animations then you will have to add a class to your dropdown at selected screen sizes (I guess using JS) and then add that class as a trigger.
As for closing the menu - I’m not sure I can wrap my head around a good way to end the animation with just interactions, but I bet there is a way. I would use straight JS and CSS for this normally. I’ll think about it a little and search to see if I can find a resource.
Cheers,
Bob
@RobM Thanks for your help. I think there has to be a way - a dropdown menu is so common…Does anyone else have a solution? Or do you just use Bootstrap for this issue?
Basically I would normally use Bootstrap, plain JS, or even plain CSS for this. Interactions can be a bit of overkill for simpler things.
Matjaz gave me a link - totally missed this before: What’s new in Interactions 2.0? | Pinegrow Web Editor
Basically this lets you set the mobile versus non-mobile breakpoints for the Interactions. Always learning!!!
Cheers,
Bob
I think one way could be to create 4 interactions:
-Show dropdown menu on desktop (Trigger: Mouseenter (Mouse only))
-Hide dropdown menu on desktop (Trigger: Mouseleave (Mouse only))
-Show dropdown menu on touch devices (Trigger: Touch (Touch only))
-Hide dropdown menu on touch devices (Trigger: ???)
I would need a trigger that closes the dropdown menu on touch devices when clicking somewhere on the page (but not in the dropdown menu…) Any ideas?
Maybe on menu open you could add a transparent element (full vw and vh) above everything (?z-index=5) on the page, but below the menu (?z-index=10). This object could then be used as the trigger. Probably also want the menu itself as a close trigger with touch
I found no better solution. I solved the problem by creating four animations:
-Show dropdown menu on desktop (Trigger: Mouseenter (Mouse only)):
show dropdown menu
-Hide dropdown menu on desktop (Trigger: Mouseleave (Mouse only)):
hide dropdown menu
-Show dropdown menu on touch devices (Trigger: Touchenter (Touch only)):
show dropdown menu + div (.closeDD) with 100% width & height and z-index below dropdown menu
-Hide dropdown menu on touch devices (Trigger: click on div.closeDD):
hide dropdown menu + div.closeDD
If someone finds a better solution I’d be happy to read it here. Maybe it would make sense to create a trigger “click somewhere on the page outside the element”. I think that would be helpful for tooltips and other stuff, too.
