▼
Streaming live at 10am (PST)

Nav Link On Hover Animation

Design help Animations & Interactions
#1

Hi guys,

I am working on a project for a client and i need your assistance with some of my client’s requests.

current site under development is:
https://preview.webflow.com/preview/jewimahotel?preview=6bff8dea20d54b7710dffb0e22e499e0

Help Required:
My client wants the animation when you hover on the nav links as shown here: http://demo.goodlayers.com/?theme=hotelmaster

Can anyone please assist with how i can do this in webflow?

I will also be grateful if anyone could assist with the best way to go about implementing the booking function.

Thanks and feedback on the entire design is welcome too.

Here is my public share link: LINK
(how to access public share link)

#2

So we’re talking about DROP DOWN menus on HOVER, right?

I did it using a webflow menu and weblfow drop down elements, you can see the experiment on this page :

http://sab.webflow.io/menu-in-dropdown-menu

You can duplicate the site using the links in the menu on that page, and see how it’s made. It requires a bit of trickery as there are some downsides to fight with. It’s not only about hovering then showing the menu, it’s also dealing with what happens when you hover out, and how not to los the cursor focus when you go from the droped down menu to the menu item itself.

Hope you’ll find your way.

#3

Thanks Vincent, but I was not referring to the dropdown menu. I meant the animation when you hover over the nav links…i guess that is clearer right? I have edited my initial request to reflect this.

Thanks your response has drawn me to make myself clearer.

#4

Oh, you mean the little line that runs under the items?

#5

Yes Vincent. Precisely. My client wants that badly and won’t settle for anything else…lol

#6

So do it with interaction. Put your menu into a div, and design a line inside the div too. Place it under the first link.

Now create and interaction on the second link, on hover, that makes the line move under it (x many pixels). Duplicate the interaction and alter it for the third link. Etc. Don’t forget to craft one last interaction for the first link, that gets the line move to original position.

#7

Hi Vincent,

Nice idea. I place the div in a nav bar and tried to place the first nav link in the div but i get this:

" Navbar links can only be inside of a Navbar"

Am i doing it wrongly?

#8

1 Like
#9

Sorry @vincent,

I stepped away briefly. Yes this is perfect and works. I have implemented it and it works perfectly.

Thanks so much…I am grateful

1 Like
#10

Oh great to hear man :slight_smile:

#11

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