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

Community resources Product feedback
1

Having wasted a few hours trying to create a custom nav using the click trigger show/hide a menu that also needed to match the opened/closed state of the nav menu toggle icon, I realise there are a fair few people who have had the same issue and would like to request a non-hacked solution please!

Examples (@vincent is usually involved and helpful in many of these) :
http://forum.webflow.com/t/menu-button-interactions/18688
http://forum.webflow.com/t/interactions-issue-when-a-second-click-exists/16305
http://forum.webflow.com/t/problem-with-show-hide-transitions/19269
http://forum.webflow.com/t/having-awkward-hamburger-menu-trouble/27656/6
etc

So, perhaps a “toggle” type functionality or an option to ‘reset’ after the first click?

(after a lot of messing around for a long time, I ended up using a navbar element for the ‘initial’ nav that appears on load and for the nav that appears on scroll, I stuck with the custom-made solution (I prefer the feel of rather than the slide down of the navbar element – I just couldbget them both to work nicely together) – it still displays the first/second click problem though. Scroll down until the nav slide in then open/close/click links until it goes out of sync and you will see what I mean: link removed as not longer relevant)

1 Like
2

I have wished for this one a bunch of times myself. A logic toggle.

But, you can build a very simple manual system to handle this as a work around using only the first click (leaving the second empty) and swap another button element or icon with a click state in place.

An interaction to open the menu and swap or reveal a close button.
An interaction to close the menu and swap or reveal your original open button.

With these two simpler interactions you can call from multiple instances you create a manual logic switch. All buttons (or clickable elements) are in sync always regardless of the number of instances.

This type of system works great if you want to support common UI like clicking off on the background to close a modal or clicking a menu item also collapses the menu.

Hope it helps. Great item to add to the wishlist @matt50.

3

Many thanks @vlogic I’ll give that a try – I didn’t consider using two elements - somewhat hacky but good thinking!

Let’s hope the webflow guys can find a simple way to give us this functionality someday.

1 Like
4

Thanks @matt50 :smile: - it feels super hacky (because it is), but it works so well that even when I could program a logic switch in other environments I still fell back to this for the freedom, simplicity and reliability it offers. It is a Rube Goldberg approach for sure, but it will allow you to do things like delays, time outs, custom timing, animated UI transitions, etc. Give it a shot - with the interactions you can make it do anything you can imagine.

1 Like