Funky Custom Menu With Webflow

Key Takeaways

recently somebody send me this link of a pretty cool personal website where you hover over the link and you get this kind of image or video that's kind of overlaying the the rest of the website in a kind of a cool overlay and ask me can you do this in wet flowers like dude this is so easy I'm actually gonna show you how I rebuild this whole thing in just a few minutes let's rock everybody so let's just rebuild this I think it's gonna be pretty simple I've got a new web flow project here basically I'm gonna do this from scratch let's do kind of a black black background first of all credits Diego foon can pretty pretty awesome works and website man I'm just gonna try to recreate this really quickly so let's just put in this text here not even wrap it with anything just because it's just a demo so I'm just gonna put it in here as h1 I'm gonna style that with a white background and just starting to type a lot of stuff here run sega is a V based designer building for the web and creating YouTube videos oh and also teaching other designers how to make a living with design all right let's choose kind of a funky font for this and make this really really bigger already looks pretty cool not but what font can we do that we'll have maybe we want to do this yeah he has a cool font but we're not gonna load oh that's actually not very far from it let's say this is what we want to do all right so by the way Diego's website is not super responsive the text it actually doesn't break it just scales down and so are these links so I'm just going to do inline links just for the sake of simplicity but you know what maybe we'll do these maybe we'll do this over light links just like they have here so actually what I will do is put in a link let's put them at the end let's call them over links so that we can create this layered effects we're gonna make them white as well and these layered links what is this font in kundan's something-something let's make them a little bit bigger so it's called this about me all right so these links I want to have them let's position them absolutely so they'll be you know somewhere always fixed and then so we'll have to give them a modifier because we're going to reuse them again and again so let's call this link number one and that set position absolute and then maybe this corner and then we can start putting it somewhere like here about me let's let me turn this from percentage to actually pixel so this is really fixed and on different websites on different screen sizes as well let's do 150 pixels so let's say this is a link here and so now basically what we want to do we can duplicate them but basically what we want to do is on hover effect you show some image and this the links are higher than the image but the image is higher than the text in cutting the layers stack so in order to do that we need to give them kind of layer stack so first of all let's bring in an image let's upload some kind of an image image upload let's bring in a random image and upload it okay so this image we also want to position it in an absolute kind of way so let's call this image one image one let's make it smaller and let's turn its position to absolute as well now we're using absolute so that you know we'll have access to the set index and we can place them over each other yeah so here it is it's actually by default it's above the text below and this is on top of it so now all we have to do is actually just you know hide this element hide image number one and on this link give it an interaction so let's give element trigger mouse-over and then we're going to start an animation and basically what this animation does let's do about hover and all we want to do is we want to select this image and do on hover we're just gonna change it hide and show so we're going to change it from display:none into display:block that's it basically we're done let me preview this BAM it works but what we didn't do is we didn't remove it so we didn't do the whole her out interaction so let's we have on hover and we also need to add the hover out so let's do start animation and do its needs to be a different one so about out and in about out what's going to happen this image we're gonna go to hide and show and we're gonna bring it back to display:none again so basically what we have want now over you see it hover out it's disappearing and basically that's it you know it's very very simple so basically we have that interaction working right now and you can see it's pretty easy to add the rest of the links and you can even add videos or whatever you want to add and yeah this was done in just a few minutes so as you can see it's very very powerful and you have to understand how to work with the interactions and the positioning absolute positioning but overall rather easy interaction to set up I hope this kind of motivated you to try to break the old normal navigation and try to do something a little bit more funky and a little bit we're cool in your own web design project I'll see you in the next video [Music]