Streaming live at 10am (PST)

Need help with Open/Close Interaction and 1st/second click issue


#1

I wish someone can outsmart me on this.

It's about opening a panel by a click on a menu element, closing it with EITHER a click on another element or this same menu element, and being able to reopen it with a click on the first menu element without having to click twice if it has been closed by the second element.

Explanation with images:

The mobile version of my site uses an app-like bottom menu (like Facebook app):

The "Plus... (More...)" link opens a sliding submenu, and can close it on second click:

If you click on one of the submenu item, it navigates to the appropriate section and also closes the submenu, putting it back into its original state.

When you do that, the second click of the "Plus..." button hasn't been used, and you'll need two clicks to open it again.

Any idea how to achieve this open/close behavior without running into that issue?

Thanks


#2

Struggling with that too now. WF looks buggy in the IX area. A normal close interaction to hide a block div doesn't work any longer. I have to add a move to it before I could hide it.


#3

That should work... what's the issue?

What I described isn't a bug, it works as it's supposed to. I'm only looking for another, better method, actually.


#4

Hi @vincent, do you have a read only link to your site, we might be able to make some suggestions how to build this. When you click the submenu, unless you have an interaction on that submenu to target the element you are trying to affect, no interaction is run (i.e. the second click will never happen). You might try and put an interaction on the submenu link to target the plus navmenu, and make that display none on click. You may need to play around with it.


#5

I have hard time to understand this and the logic behind... maybe we're not using the same vocabulary. Here is to be sure:


#6

Hi @vincent, can you share a link, I think I need to look at the menu to see what kind of interaction you have put on it so far. What I mean't is that when you click on a submenu item link, that you then target whatever element needed that second click to do something, and instead, trigger that action using an interaction on the submenu item link. This may or may not be possible, I need to see what exactly is happening on the page smile


#7

Yes I was cleaning a few things.

https://preview.webflow.com/preview/k1p-sg?preview=bc21003656a249814d8ecef9fb007689


#8

If you have an iphone you can try adding the site to your homescreen, I added a few meta to make it look like a web app, it's fun. Trying to find how to have the same behavior for android mobiles too fyi.


#10

Hi, Vincent. Faced with a similar problem. Can you tell how you solved this problem?


#11

Nope. I replaced my custom sliding menu by a dropdown widget, to begin with. that should have worked, but it wasn't closing itself weirdly. maybe I destroyed my nav too much.

Anyway, it should work with a normal navbar, set it to only appear for mobile and style the burger as desired. add your other icons at the same level than the burger, you see what I mean?


#12

Thanks, I helped of your experiments and materials made with webflow. Only I have not worked animation in the eased Dropdown?


#13

The Eased drop down use the Dropdown trigger in the INteractions.... Have you tried that?


#14

I tried, but no animation http://quick.as/eVr1HvzLV


#15

#16