Streaming live at 10am (PST)

Menu Button Interactions


#1

Having trouble with interactions on my Menu Button. I've created an interaction so that when clicked, the menu button transforms into an X. There are a few issues:

  1. The Nav Menu slides over top of the Menu Button, and so the Menu Button is not clickable when the Nav Menu is open.

  2. In addition, I'm having trouble finding a workaround to get the Menu Button to revert to its original state between clicking on Nav Links and clicking on the Menu Button again. For example, the Menu Button transforms into an X when clicked, but if you click a Nav Link the Menu Button transforms back into the hamburger icon, and then isn't correct when clicked again because of the overlap in interactions.

Anyone have any tips? Here is the preview link:
https://preview.webflow.com/preview/valerieyounginteriors?preview=3e67a3738b47fb72923db83ef62def95


Interaction V.S Image Link Issue
A toggle trigger or 'reset' first click to fix first/second click trigger problems
#2

Hi, to begin with, give a higher zindex to the button so you can click it at all times.

https://v.usetapes.com/wiHhERQtOA


#3

As for the issue when not being able to predict wether the button will get two clicks or one click plus a click on a menu item to close is something normal in Webflow. It's just a limitation, for the moment: you can't reset an element states and this "second" click interaction is always going to be a problem.

So you have to think this interaction differently, and not using the second click. You need one interaction to pass the icon from a hamburger to a cross, another one the revert that.

  • keep the same structure, but delete all the second click things.
  • build the closing interaction and affect it to every menu item: test if this works when clicking on a menu item
  • create an empty div in the menu button element and position it absolute, dimensions 100%. name it click-catch-dummy or anything else. give it the z-index 110 so it's above the button.
  • affect this new div the closing interaction.
  • now pass this new div to display:none
  • edit the opening interaction, add a click trigger, affect different element : target the click-catch-dummy div, add a step with display:box in 0ms
  • now edit the closing interaction, add a click step, target click-catch-dummy, and pass it to display:none

Should work, the dummy div will catch the click and will be hidden by any click on it or on a menu item.

This is one way to do it, there's others, some may be simpler.

Your menu interaction looks neat BTW smile Very simple and elegant, webflow sepeaking smile


#4

@jordanshotwell,

Nice site man, looking forward to seeing the final version.

SeanK


#5

quick question, how did you do the line animations?


#6

Still having trouble. Now when I click open the menu, I'm unable to return the Menu Button to its original state by clicking on the dummy div. The Menu Button returns to its original state when clicking on a Nav Link, but not when clicking a second time on the Menu Button (with Click Dummy overlay).


#7

@seank, the animation is just done with three separate div block to create each line of the hamburger icon. Each line has to have its own class. Then, you just animate the top line to move down several pixels and rotate 45 degrees, and then have the bottom line move up and rotate 45 degrees in the opposite direction. The middle line is just faded to 0% opacity when clicked. Then for closing the menu, you just return each line to its original position and the middle line to 100% opacity.


#8

Hey @jordanshotwell don't forget to put that close interaction on the menu button as well wink the one which you have on all the other links smile nice work on it! smiley


#9

@Waldo, do you mean on the second click? How else can I add two interactions to it? If I add it to the second click, I have an issue where if you open the menu then click on a link, it doesn't close the menu properly.


#10

Hmmm, this is a work around, but you could actually display a different button which is solely there for closing? (identical to what the open button looks like & placement on when the menu opens) but it's only there when the menu is open and put the interaction on it there. smiley Really nice work! Let me know if that makes sense. smile


#11

Do you mean like what @vincent recommended, with a dummy div overtop of the Menu Button? That's what I've already tried just now.


#12

Ahh, I missed @vincent reply, yes the dummy div should work just fine! smile
You have it placed inside the button, instead place it here, give it a width & height and it works smile

Now it works great for me smile Make sure it's positioned correctly on different viewports. Nice work @jordanshotwell smiley
EDIT: Also, make the "Click Dummy" a Link Box rather than just a div, that way you have the cursor change on hover wink

Here's a GIF (of course the outline wouldn't show on published site):


#13

Hurray for the click dummy! wink


#14

@vincent it works now! The only holdup is that sometimes if you click quickly to reopen the menu, it doesn't open but the interaction continues. Strange.


#15

Having another separate issue related to the menu as well. Not sure if you can help @vincent. When the Nav Menu is opened on tablet and phone viewports, there's a 1px space between the Nav Bar and Nav Menu that's transparent. I've run through all the borders, margins, and positioning tools and can't seem to find anything. Here's a screenshot of the issue. Any ideas?


#16

You can probably fine tune your interactions to prevent that to happen.... mostly by delaying the disappearance of the dummy click catcher element by a few 100s of ms, so it lets the interaction finish.


#17

Did you fix that? I don't witness it actually...


#18

If you try it in the Webflow preview window, it works flawlessly. The issue appears when it's exported and published.


#19

And no, I'm still having the issue with the spacing. It's showing up on every viewport except desktop.


#20

This is what I see :