Click outside menu causes flickering & non-response to mouse click

Design help Animations & Interactions
1

I built a custom navbar that opens from the bottom of the screen.

When you click the navbar the menu scrolls up. On the second click of the navbar the menu scrolls away.

That’s working fine.

I’ve also put a mouse trigger on the menu div, to close the menu when you click anywhere outside the menu.

Two problems occur when you click outside the menu.

  1. On the click down of the menu div it seems to highlight and change the div color for some reason.

  2. More importantly, after the menu closes and I try to click on the menu bar to open the menu, nothing happens. I have to click a second time for the menu to open.

If I just click on the menu bar it opens and closes the menu with no problems, and no flicker.

Here’s the public share link:
https://preview.webflow.com/preview/skyrize?utm_source=skyrize&preview=d097b68712afda5b74f2848479e41850

and the staging site is here:

IMPORTANT: the menu only appears at the tablet break point and below.

Here’s a video showing the problem:
http://turntablemedia.com/webflow/webflow-support.mp4

Cheers
Philip

2

Answering my own issues:

  1. Flickering can be fixed by adding this into my custom code referring to the navmenu div

.navmenu {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

  1. The 2nd click problem is a known problem that I finally saw people talking about by searching “webflow 2nd click” and came across this…

The upshot is that 2nd click approach isn’t good for this type of interaction, where another object toggles the interaction. So you really need to split it up into 2 objects with separate interactions.

1 Like