Streaming live at 10am (PST)

Menu Button Issues - JulianH

Hi Webflow Forum,

I’ve created a menu for my Clients products:


I’m pulling my hair out trying to understand the following:

  1. Why I need to click twice on the “Products” button (p__trigger) to open the menu after closing it with the menu’s close button (p__close). This only happens after closing the menu using the menu’s close button (p__close), and not the initial trigger that also opens and closes the menu (p__trigger).

There are 2 triggers set to close the menu, the “X” and the “Products” buttons (p__close and p__trigger). However when you close the menu via the “X” you have to double click on the “Products” button to re-open it.
But if you click on the “Products” button to open and then close the products menu, it works with only a single click (The way it should work)?

  1. Why when I move my mouse over certain buttons, it doesn’t perform the correct mouseover. Each icon for Prestige, Regal, Sovereign and Majestic should have a mouseover. However when moving the mouse across the icons, sometimes they don’t work as should and don’s display the mouseover.

eg:

  1. Is it possible to get one menu’s open function to close another menu? Ive added close functions to both the main menu and product menu, however only the main menu’s function closes the product menu.

I hope you can assist me.

Please let me know if you have any questions.

Thanks in advance!

Kindest regards,
JulianH.

julianhibbert1976@gmail.com
+27 (0) 84 510 1799

Read only Link: Webflow - ltv15fullmenu

Published Link: TO DUPLICATE

Hi @Julian_Hibbert,

I’ve had a look at your site.
To answer your questions:

  1. When using an interaction to open and close the menu with a 'Primary (1st) click, and a ‘Secondary’ (2nd) click - in this case, 1st click opens, 2nd click closes. The interaction is actually working correctly (as created), although it’s not the intended behaviour you want. Let me explain. When you click once the menu opens - good. Now the interaction is ‘waiting/expecting’ a second click (at some point), however, when you click on the ‘X’ to close the menu (which works correctly), the interaction loaded on the ‘menu’ is still ‘waiting’ for a second click. That’s why you have to then click the menu 2 times to open it again. (1 click is received as the ‘2nd click’ to close the menu (which is actually already closed because of clicking the ‘X’), then the 2nd click is now registering as the ‘1st click’ as part of the original interaction. (I’m not sure if I’m confusing you more?!!)
    This is a very common problem that many webflowers experience. There are a number of ways to work around it, some involve using custom code (JQuery), or creating 2 menu icon elements and creating an interaction with only one click and then show/hide the other menu icon on open/close.

Both work, the JQuery option is quite clean, the 2 menu options can get a bit messy if you are trying to use multiple animations on an element.

  1. The Products mouse over issue is occurring because you have added padding to each of the ‘Products’ link elements. This creates a small space between each ‘hover’ element that is not activated on 'hover. Remove the margin (image 1a) and it will work as intended.
  2. Closing menu’s - Your interactions are working (each menu can close the other), I notice that the Lottie animation element is ‘left behind’ when the products menu icon is clicked. I haven’t been able to delve into all the workings of the interaction yet. But I suspect it could be related to a z-axis setting (not sure, will need to look closer.

I hope this helps. I know a lot of words to try and explain. If it doesn’t make sense, let me know and I could make a short video for you.

Cheers
Keiran

1 Like

Hi Keiran,

Bless your soul brother!! Thank you eternally for your insights into this. I’m going to think about what you have written and try to implement the changes so I can learn from the process.

I really appreciate your feedback and will touch base if I have any questions.

SUPER THANKS AGAIN!!!

Kind Regards,
Julian.

Hi Kieran,

It seems the gremlins are still in the system…

Regarding Point 1: I completely removed the additional “X” to close the products menu and that seems to work. However if you open the Main menu (which closes the product menu) you still need to click twice on the products menu to re-open it.

I’ve tried your suggestion on Point 2 but they didn’t seem to help. Sometimes when you mouse over the open Products menu the mouse-overs seem to still not load for some reason. Could this be a system bug?

As for point 3, I have no idea what this issue is.

I’ve duplicated the project:

URL: TO DUPLICATE

Read Only Link: Webflow - ltv16

Can I DM you the previous version in editable format?

Hope you can help?

Many thanks.
Julian.

Hi Julian,

I’ll post a couple of video’s that will hopefully help.
Keiran

Explanation of why the 'Product’s menu interaction seems not to work

1 Like

Hi Keiran,

You are a champ! Thanks for the video. I understand the issue now much better. I look forward to your other videos.

Once again a HUGE thanks for the trouble and your assistance with this!

Best regards,
Julian.

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