Slide Out Navigation on Hover

Design help General
1

Hello All,

I need help with a pop-out nav bar when hovering over the logo. I’m putting a fixed logo block and I want the nav bar to pop out to the right of it on hover. Can this be done with interactions?

Thanks,
Alex

2

Yes. I imagine your logo sits on the top left and the menu slides to the right.

Place your logo in div, give the div the dimensions of the logo and
z-index of 2, give it also the display:inline-box property.

Place the logo div in a container widget so it takes all the 940px space. Give
the container the overflow:hidden property.

Create your navbar in the
container and make it the same height of the logo div and make it
sits close to it, taking the extra space of the container. You may
need to give it the display:inline-box too. Now design your navbar.

Then create a first interaction on the navbar, to hide it on the load
of the page. Set the trigger to OnLoad and add a modification with
moving the navbar to the left until it disappears behind the logo.
Set that modification to 0ms.

Create a second interaction on the logo
with the trigger OnHover, set to another element, then type your
navbar class name and check the “limit to siblings” option. Add a
modification, siply click on move and set the time (350ms ease-out).
Don’t put a value. A zero value means “go to original position”.

Test this, this makes your menu pops out of the logo. Now you’ll have some more thinking to put in to make it retract when and how you want, but you can figure that out I guess. Else come back.

sorry the forum broke my formatting, it’s all messed up

3

Hi @aOne, I’m not 100% sure if this is what you were looking for (didn’t see an example link or image) but I made a small demo for you on how to make a slide out navigation on hover: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Click on the page titled “Slide Navigation on Hover”

Hope this helps! :slight_smile:

1 Like
4

@thewonglv Yes that’s what I was looking for. Only thing is when I go to hover/click on a nav-link, the nav bar goes away rather than staying open.

Thanks,
Alex

5

Hi @aOne, woops! [facepalm] …rookie mistake

I restructured the demo - take a peek :slight_smile:
Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Slide Navigation on Hover

2 Likes
6

Thanks @thewonglv GREAT demo.

One question, how do I edit the nav links? They are out of view and I cant seem to edit the wording. Probably a dumb questions but I can’t seem to find the answer :sweat_smile:

Thanks!
Alex

7

HI @aOne, not a dumb question at all. Try temporarily changing the styles bring the element into view, then moving it back when you’re finished :slight_smile:

9

@thewonglv How can I apply this to a drop menu? The on click is exactly what I want! I want a panel thats full viewport height just like that. I need the panel to slide in with the links positioned below the button that would stay in its current position.

https://preview.webflow.com/preview/tendai-chiriga?preview=5e1615c49e7df56185d6f978bc824689