I really like how when you hover over, for example, Insurance and then Vehicle Insurance, the text and icon invert colors and a blue background slides in.
You can see what I’ve done so far at the link below. I just can’t figure out how that movement would be possible.
On the Geico site, hover over Insurance and then hover over any of the dropdown items. The text and icon turn white and a blue background slides in from the left.
Ah gotcha! For some reason the live site is not opening the menu on hover in any of my browsers, so thanks for the video.
There’s tons of ways to accomplish. The question is:
Do you want to insert a script that does all of this for you, and you simply add custom code in? There are many free scripts, menu addons, menus to buy, free tutorial code scripts, etc.
Do you want to create this yourself in Webflow, step by step
@alextinder … dang, I don’t know… hm there are soooo many people who have done this… ha… I’m kind of with ya on building it in the designer.
Okay if you do… it’s not terribly hard… but not something that can be easily typed in here. Not an action that’s a few clicks either. Really the best way is to view it on a screencast, something like that.
It’s a 1 item trigger & 1 show div action
Inside that, there’s all the individual menu items, each have a normal & hover state
Then each item has an action, showing another show div
Dangit… I hope that makes sense … It’s very doable. However, you could use vertical tabl element and have the tab content show sliding out right.
Yep you might try that… but here look at my testing link: “My Panel” Button
There are a number of actions you can see how Webflow starts with the slide out menu. It’s Side Menu - Right. It uses IX1.
If you look at this and it seems confusing, let me know and I can mock one up for you like the Geico site. Then you can see that structure in the Webflow Designer.
@alextinder … hi… I looked at many ways to accomplish this type of ‘hover over’ menu. The problem is… in Webflow there’s no way to add a “Hover Active” state… so
When you create a hover interaction on an element - then affect other elements the hover works - but when you hover out, the interaction is on the primary element, and will not keep the “affected element” active
There’s no “Active” hover functionality without custom code
I created another workaround but it’s extremely long. If you want to do this type of menu function, I would suggest using a custom script and embed it. That’s the best solution for this type of menu. Sorry I gave it good effort
Anyway you can check the example created on my test page and see if it’ll work for you. If so, I can show the steps involved. It’s in Section 12!
I actually do really like that. I might consider changing my current navigation so Services and Information are on top of one another as opposed to next to each other.
I thought real hard how to do it, you can slow this down for better action. But like I said there’s no ‘active’ on a hover effect. So dang, I gave it go for ya. If you want to do it… I have no problem showing you step by step. Just shoot me a message.
Yeah, all fairly straightforward. The menu items are simple links to interactions that slide open the boxes, the animations and hover effects are the same. There are loads of slide speeds and characteristics you can muck about with to control the movement.