How can I replicate this navigation?

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.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Which link… none of them are showing any actions??

I’m not sure what you’re asking…

On the Geico site… or if you can show a site with the type of hover action you’re looking for. I’m on the Geico site and can’t find what you mean?

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.

This is what I get when hovering over Insurance. The links are not active.

46 PM

This is what I see when I hover over in several browsers.

29 PM

Then you hover over one of the dropdown items and this is what shows up. The lighter 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:

  1. 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.

  2. Do you want to create this yourself in Webflow, step by step

Hm. I’m open to either, but I think I’d want to stick with creating it in Webflow if it accomplishes the same thing.

@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.

Plenty of ways to accomplish.

@alextinder

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.

Oops… it was hidden… try this new generated link:

https://preview.webflow.com/preview/gj-project-1?preview=f86115eccc47022baeb35fdee613a610

Yeah, if you could do a mockup of the Geico nav, that would be great. I’d really appreciate it.

Haha :grinning:
Okay let give it a go I have some time… 2 shakes of lambs tail.

@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

  1. 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
  2. There’s no “Active” hover functionality without custom code :frowning:

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 :slight_smile:

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!

https://preview.webflow.com/preview/gj-project-1?preview=c2d5f6b9998077dde17bdb54d1ec3c30

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.

:slight_smile: 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.

Have a great day.

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.