Streaming live at 10am (PST)

Animated nav link on hover


#1

Hi WF'rs, could anyone tell me if the navigation effect in the link below is possible to build in WF?

http://www.theblacksparrow.co.nz/


#2

Definitely possible, would just take some effort to build but...Basically they have an image which has both the word "menu" and the icon, and that goes along side with it in the same image. so something along these lines:

(they actually have every item in the menu as listed out if you check this out. http://www.theblacksparrow.co.nz/workspace/img/nav.sprite.png

On hover, the image moves up a certain amount of pixels to display the icon instead of the menu and then returns to the original position when you hover out.

Effectively, if you use the nav widget, and then swap out the links in the nav for link boxes (that's basically a div with an href wrapped around it) and then make your menu images/graphics (use SVG's if possible).
Add the images into the link box, style it so that the image displayed is the one you want displayed, and set the Overflow to hidden. That should produce a similar effect. Would take some time to build it just right.

Interested to see other solutions, there are multiple ways that this could be done in webflow. I'd recommend an alter way. smile

Such as making the link boxes like I had said before, and adding in the images, setting their display style to absolute, and adding different interactions based upon hover over/active/mouse down. And link them to the corresponding sections of the site. smile Let me know if you really want to build something like this and I could maybe whip up something cloneable for you smiley


#3

Thanks Waldo.
I got there:

https://preview.webflow.com/preview/mr-test-site?preview=d7868b26a7271524e6200f36682135ff

This is a good lesson in the overflow function.


#4

smiley Yay! Look at you go! smiley
Instead of doing an image that just moves up and down. You could do two divs inside of that link box, and have hover over change which one displays block vs display none with the interaction. smile


#5

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