Can someone please help with this interaction problem I’m getting
The problem is the lower level menu drop downs are setting off the animations o the highest level - I want them to act independently
I’ve done my research on the videos and not seen this so far on any forum post
SETUP
- I’m using multi-level drop downs on a nav bar burger menu.
- I want the icons on the drop down to change from + or - depending on if the dropdown is open or closed.
- I use interactions for this as well as icons (I hide the default arrow icon)
RESULTS
It works on the level 1 drop downs: the + and - icons show as I want.
PROBLEM
As soon as I open a level 2 or lower drop down in the burger menu, the interactions start to fire on the LEVEL ABOVE.
So a level 2 dropdown fires the level 1 dropdown interaction.
INTERACTION
I use a menu (open / close) interaction, and apply it to the class as a whole and specific parts of the interaction to the children of the same class.
PUBLISH LINK
https://dropdown-in-nav-changing-buttons.webflow.io/
IMAGE
Image shows clicking Level 2 or 3 Drop Down Links triggers interactions on Level 1 Drop Down Links ( opens or closes +/-)