I’m new to webflow and have been playing around with its awesome features. I decided to try and replicate the webflow.com menu since they said the site is built using webflow. Figured I’d learn a lot about the app trying to replicate it, including using interactions.
I came across a small issue that I’m not sure how to accomplish. I’m able to get the navigation links to go from all white, to only the hovered button white while the rest dim to a gray. To do this, I use a mouse hover interaction, apply it to the whole class, then make sure it only affects siblings with the class.
Works great and I don’t have to go change each element individually. However, Now I’m at the stage of adding the dropdown div which appears on hover of one of the navigation links. The div pops up great. And to keep it visible, I also have a mouse hover interaction over the div block so that it doesn’t just go away after I move off the nav link.
The problem I’m facing is as soon as I hover off the nav link, they all go back to their initial state of white. This doesn’t happen on the webflow.com website. The button stays white while the rest stay dimmed.
Is the only way to accomplish this by getting rid of the class/sibling interaction, and instead go one by one on each nav link and make interactions for each element? Then apply those same interactions to the div dropdown so that the buttons stay in the hover state? Was hoping I’m just missing something. Should I be using the dropdown menu option in the nav setting? I’ve avoided it up until now.
Add a “Text Color” for the specific drop down text element inside the main Div interaction. It will work alongside the Div hover so when you hover out it will move with the Div contents. You’ll need to remove any css states for the text first.
Okay cool. Appreciate the help! If I’m following you correctly, I delete the “text color” interaction I did to the nav link class/siblings here:
“I’m able to get the navigation links to go from all white, to only the hovered button white while the rest dim to a gray. To do this, I use a mouse hover interaction, apply it to the whole class, then make sure it only affects siblings with the class.”
And instead apply Text Color hover interaction to the dropdown div and target each nav link there. Was hoping I could use the class/sibling since I don’t have to have a text color animation for each button link but this seems to be working.
That’s correct. Remove everything for states of that button in css styles. Do it in the interactions panel for that trigger.
Yes, set it to Class. But check to see if you need child or siblings. However, the link needs to be inside the main trigger that sets the interaction. If its outside that div, it won’t work. It’ll just need the Class & that element only. But then, you’ll have do one menu. And to add another, you’ll need a new class otherwise it will trigger all of them - you know what I mean.
To see how this can work, check my Style Guide. Go to Navigation, look at the Dynamic Navigation 1. I did this for the Academic prototype menu. If you need the read-only link, let me know.
