▼
Streaming live at 10am (PST)

Interactions issue when a second click exists

#1

Hi all, first post, yay!
I have an issue with interactions in the case of a burger being clicked (interaction1), selecting a link(interaction2), then clicking the burger again (back to interaction1 but possibly looking at 'click 2' instead of restarting the interaction) resulting in the nav not opening unless the user does an additional click --hope that made sense, if not then below is the lay of the land!)

share link: https://preview.webflow.com/preview/s02?preview=a084a0c3ae2ba7cfb25389b921dfc830

elements:

-burger
-nav (full page with links -- initial display: none)
-main page

interaction: nav toggle

first click burger:
-set nav = display: block

second click burger:
-set nav = display: none

interaction: select link from nav

(the first click burger has already taken place)
-set nav = display: none

Here is my issue: after a link has been selected, the user clicks the burger again...but the nav doesn't open, click a second time and it does.

This is what I believe has happened:
after the user selects the link, the user clicks the burger triggering the second click event (set nav = display: none), but this does nothing since this is the current state of the display thanks to the link interaction.

So my question is how can I open the nav, select a link, then open the nav again without the issue of an actionless extra click?

thanks!
Mike

A toggle trigger or 'reset' first click to fix first/second click trigger problems
#2

Hi, I feel you, I ran into that numerous time.

And I don't have a fix for you, I never found how to make that interaction work. It prevents me to do facebook-like menubar on mobiles.

The easiest workaround is to use a dropdown element for unfolding. That way you don't need to rely on interactions and it most likely closes when you click a link (sometimes it stops doing it...)

Can you try this and come back to report?

#3

Does this help...

#4

@vincent thanks, I'll see what happens with dropdown and reply.

Perhaps a wishlist item is a straight up Toggle (like jQuery offers) in addition to the multi-step interactions.

@Revolution if I understand you correctly then you can do this by adding a second button, therefore two buttons each having 1 click...but ultimately we want to keep things clean, right?

cheers,
Mike

#5

yes. correct.... and also, a cleaner design is better.
this scenario may not work in every case... but it worked perfect in mine.

button 1 opens a sidebar (originally positioned offscreen and slides in from right)
which covers button 1.

button 2 is on the sidebar...
(and is positioned directly over button 1 (if you "could see" button 1)
(this way... the user doesn't have to move the mouse to close the sidebar)
clicking button 2 closes the sidebar... revealing button 1.

#6

@vincent unfortunately, this didn't work, because the dropdown list doesn't automatically close after a link is selected an interaction is required, the end result is the same -- frustrating.
When I get a chance I'll apply some jQuery, fingers crossed.

#7

Please let me know when you're done. I believe the dropdown should be fixed to close automatically once a link is clicked, I can"t find a reason for it to stay open.

#8

@vincent just confirmed dropdown does not autoclose.
in order to get clear confirmation of the dropdown issue, I created a dropdown in a sandbox instead of the custom site I was working on.
https://preview.webflow.com/preview/mikekakebeeke?preview=c921fc65c4f0b1df536ed5f97ec155b4

In this case the dropdown has a fixed position.
When the dropdown is not fixed, it does close but not immediately, only when you scroll back to the dropdown (and if you're already at the same location, then it also does Not autoclose). oh fun!

Mike

#9

Actually, I think there is a solution, and it's in the same vein than the hack I've been creating for drop down menu on :hover.

For dropdown on hover, I faced a similar issue: I had to register the hoverout to close the menu, but I couldn't now by advance if the cursor would slide on the menu itself or stay on the menu item: I coudln't know if the hoverout would register on the item or menu list. So I ignored the hoverout on the menu item, and instead artificially expanded the span of the manu list over the menu item, with a top padding.

We could do the same for onclick dropdown, expand the menu list over the menu item, so when either a click on the item or list is made, it's actually registered as a click on the list and closes it. We would then delete the second click action on the item.

I don't know why I haven't thought about that before, I feel silly now... You can ceck on http://sab.webflow.io on the menu and dropdown section how the dropdown on hover is made, it's the exact same principle.

#10

@vincent thanks for the link -- its nearly 2am here, i'll have to digest this with a fresh brain in the morning.
OK...my curiosity got the better of me and I looked at the interactions.

Since we're selecting a menu item link to close the menu list, wouldn't that mean the menu list is still open? (your example has menu items but those links aren't setup, so not sure if it would make the menu list actually disappear after the link was selected)

thanks,
Mike

#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.