Full screen circle menu in Webflow - Stream clip

[Music] so everything i'm doing is just basic divs we're not using any webflow components because webflow components is for that basic kind of stuff this one is more customized and uh yeah so you have to do it from scratch there's no other way unless you take this project which i'll let anyone clone and you can just copy paste it oh yeah okay that too all right so here we go we're going to put in a div block so this div block is going to be my trigger this is the thing that explodes all right so let's make this wait a minute what's happening in my head um okay so we're gonna call this um menu okay this is actually menu button okay menu button cool cool all right so we need to make a circle easy let's just make the width 75 75 width and height 75 so it's even um and then we're going to set that oops let's set that border to 50 so 50 creates a perfect circle all right and then we let's give it a black color there we go and there we go we have a perfect circle but we want this to overlay on top of each of the whole page and so if you scroll down it sticks to the top right it's fixed to the top right so you need to do position fixed and we're going to do it to the top right awesome now we don't want it to hit the very top edges of the page so easy enough we can come on scroll up there we go we can go to our spacing and just do a margin of 25 and 25 on the top and right and there we go right so we have a circle congrats um and now in the circle we can put an icon of the hamburger button but yeah we'll we'll do that later i'll have to find a a thing but for now let's just keep going because i want this to explode all right so we have that we have our we have our styles and then we have our structure ready i'm just thinking my head do we need anything else no we don't so let's get into interactions aka javascript all right so interactions top right click on element trigger so what do we want to do with this i want to do a thing when someone clicks on it so mouse click all right so on first click what do we do start animation create animation and uh main let's call this menu open cool so we have this menu open and let's go ahead and do the now at first thought you're probably thinking if you're already used to webflow and all this stuff uh you probably think oh yeah simple take scale and well the initial state of scale will say it's one and then once you click the button the scale should be something ridiculous like well we can with the slider you can only go up to two all right but actually in actuality you can go to anything so i'm gonna say 20 30 40 50. okay we'll try we'll try 60. now you would think that's the answer and that is wrong because and i learned this too myself if you if you watch closely actually let me do the duration five seconds look it it looks it it doesn't look clean as it grows it it gets rasterized and you're like i need a cleaner how do you do that and that was one of the things i learned i was like how do i fix that isn't scale the answer so scale is not the answer so i'm going to delete those two and actually it's size size is your answer so with size you can play around with the width and height and so what you want to do is set initial state and set the width and height to something like um i'm going to say eight let's say h eight vh we'll start with eight vh and we're gonna we're gonna lock it so both width and height grow at the same time at eight vh okay actually let me go down to six will be good seven yeah fine and now if i for the end state i'm gonna set another size and the width and height of this i'm gonna lock it again i'm gonna use vh and i wanna set it to like let's say let's try 10 nope i'm gonna go up just go up to something ridiculous something like that yeah we'll do 170 why not but we also need to cover all the white space so we need to do size and move so we need to move this too okay so i'm going to do a move on the initial state so this move right here i'm gonna set it to let's say vh and set this to zero and let's set this vh to zero okay because i don't want it to move anywhere that's his initial state and now i can do another move set these both to vh and let's see here let's let's get in the center-ish okay okay so it seems like i need to make it bigger on the size but yeah so i'm doing this stuff okay i'm going to go back to my size and i'm going to drag it after the move so i can so the move happens first and then the size so i can see where i'm going okay let's go 200 and then the move [Music] see maybe size needs to go a little bit more okay let me do the move so it's just ah there's still a little a little pixel right there so i need that's what i'm trying to fix uh how about the okay there i'm using the y all right and preview explosion and let's make this slow so you can see how clean it is so i'm going to set it to five seconds on the duration right here and let's go ahead and set that alas or ease out court try that press play and see how clean that is compared to the scale so yeah taking that extra time will make it cleaner you can go scale and it's fast and yeah okay cool scale you're done but it's gonna look yeah janky but this one nice and clean so it's moving the position of the of the circle at the same time it's growing it cool all right so let's set that to one second there we go nice cool um hold on in chat they're talking about no codalytics no code analytics wait no code analytics where is it it was a hold on i'll find the link or i'll find a link later about no code of linux but yeah all right um graham that's beautiful yes thank you i'm glad you're enjoying that tip so that's the first part all right so we click it once cool all right um let's see here we click it once cool but then we need something to overlay this because if i click it again watch what happens if i click it if now we need to fix it huh but if i click it okay cool it's not okay actually yeah that's exactly what i want hmm maybe these sizes and moves need to be vw instead of vh because i'm running into this responsive problem they're just it's not taking up the whole whole screen so let's do vw instead and see where life takes us right there doing vw instead changing it to vw changing the move to vw alright so let's fix the size or is it fix the move let's see okay cool all right let's try that okay let me preview no let's try again responsive it's a crazy thing who created his responsive design it's too hard all right so i'm gonna start a hundred let's move it 7 to 70. yes i did it cool all right so take over the whole screen cool graham maybe done fix it the odd space on the left maybe don't fix it the odd space on the left is kind of cool and could be a happy accident yeah if you you can play around with the um you can play around with all these numbers once you clone this uh project and you know make some happy accents like yeah play around learn re reverse engineer this whole thing all right so we're done with that so now let's make a close we need to make a close uh a close function a trigger okay so actually i'm not gonna call it menu button let's just call it menu because this is this wraps the whole menu right yeah wait i'm wondering do i make it two different elements or just one okay yeah just one there sorry multiple all right so you have this menu button and now let's go ahead and add another div and this div this is going to contain your actual ave menu all right and so let's go ahead and make this position fixed as well wait menu wrapper so i'm calling it menu wrapper so everything all the contents of the menu wrapper including the close button will be inside of here so you have the um menu wrapper yes graham every stream i make these projects that i do cloneable for free use it use it for your portfolio use it for your clients use it in joy all right so this is fixed and we're going to make this full and we're going to do a z index of one because i want this on top of that other menu button all right now uh this uh let's make this black background is black and there we go we're here we're doing things uh now i want to make sure that whatever is inside of this is in the center center of the screen all right so to do that i would make this flex center center cool all right so this is where my menu stuff is going to be so let's put a grid i always like using grid i use flexbox for simple things but whenever it comes to something like um something like this i want to use grid because it's it seems easier than flex alright so i'm going to deal with you later first we need our close button all right so let's put a new div and actually we'll do a link block link block in this link block will we'll call it close menu clone menu no we'll do close menu and in the close menu let's make it a circle again so we're going to make it with 75.75 give it a background color of white round it out 50 percent we have a circle cool so this is going to be our clothes and we do the same thing as we did in the first menu button we're gonna set it to position fixed put it to the top right and give it a margin of 25 25 and there we go right i don't know i'm thinking but let's just keep going again see where life takes us so when i click on this what i want is menu wrapper to um go away yeah i want menu average to go away basically display none and then at the same time this menu button will go back down to a circle to where it is right now all right so let's turn you back on and let's do interactions so interactions on the top right element trigger mouse click select an action start animation we're going to call it menu clues cool so what do we want to do with the menu close let's do something simple for right now let's take the menu wrapper and just do a display hide boom gone all right save let's see if it works so i'm gonna go here cool it worked if i click on this that one grows big right so now i need to remember what size do i need to set the menu button to so i need to go here menu button right here find its interaction and the size is down here five and five vw and i need to set the move back to oh zero zero vw is the move okay here oh no it was vh okay cool all right so i just needed to remember that so let's go back to the close menu and we need to reset what the menu button is so we're gonna click on menu button and and remember we're in the menu close interaction we're not in the menu open so we're going to click on this and we're going to say for menu button we want the move to go back to zero zero but it's not pixels it's vw and vh and let's set the easing to outcourt and we'll set the duration to one second and then we're going to add another another action which is the size and the size was v w five and five and we're gonna set the easing for this as well to out court and if it works wow because again during these streams it never works for the first time i probably missed a step so yeah uh preview oh wait this menu wrapper it needs to be display hidden first okay and yep i forgot one thing so i have to go to the menu button i have to go back to the menu open so i can turn on the menu wrapper so click on that and after these things are done i'll do a hide and show flex so that way i can get my close button all right so here we go okay what it's like no okay i'm back what why i don't know i don't know anything uh okay the move was vh v8 or vw vh and then the move here was vw vh okay yeah okay this close menu this close menu it brings it back to vw why elon says close menu doc should be six six it will match the open button um hold on one thing at a time why okay okay is it because the size and move are happening at this doesn't hold on how did i do it here oh yeah because i have oh um [Music] okay i don't know hold on so the hiding okay so what if i put this on a different step what oh oh well maybe i don't know let's see no dang where oh look this duration is one second for the move and the size is 0.5 seconds so what if i set them to the both to both the same duration is that the answer yeah ha see i knew it uh 360 magnetic solutions uh do you prefer webflow over wordpress if so why i have a whole video on that uh colleen if you can link that um but if you want me to say it on stream i'll do it at the end of this tutorial but uh uh spoiler alert to that question do this in wordpress yeah do this in wordpress do what i'm doing right now do it without coding don't open the theme don't open the css file don't open any code editor and do this show me that divi elementor anything else can do this cool so we got this we good to go all right uh what's next what's next oh let's put the content in so yeah we're almost there we're halfway there yes please say it on screen i prefer word webflow over wordpress why watch the video all right we're here let's do our stuff um let's so here's a pro tip if you're using uh flexbox and then you're like oh i want to grow if possible i want to stretch this all the way but i don't want it to go all the way i want like a max width but if you try to do this right here and then go down to here and it's like oh no you're not allowed to and you're like no i can and i will so what you do is before you expand it put your max width right here and then do something like i don't know let's say 70 vw for the max width and then when you expand it boom now you have control even if webflow doesn't allow you to play with max with you've already done it so there you go so my max width will be that and let's make the height like 90 vh 80 70. that's fine all right so for this i have um three one two three columns cool let's do it one two three columns and we'll make this column smaller we'll make this column bigger or actually yeah make that bigger cool we'll do something like that actually i want this to be max with 90. bam yeah more wide screen uh it's not possible i use div elements and themify to make sites for clients i was considering webflow however i didn't want to pay the monthly for hosting you get what you pay for if you're paying for like hostgator for five bucks a month oh you got me on my rant now just watch the video oh i'm um webflow isn't the best tool for everything but it can do a lot of things wordpress isn't the best tool for everything but it can do a lot of things do what your client need use the tool that your client needs you to use or use the tool that makes you have more super powers and that you make an awesome user experience for your client from the beginning of your conversation with your client to the very end to the point you give them the site and they're able to maintain it easily but okay i'll stop because i'll just go on for the whole rest of the stream on this but watch the video okay uh so here we go uh we only need two rows so let's delete one of those rows uh i don't need everything to stretch to the top i want them to align top so let's do everything is going to line to the top and it could be on the left what would happen when you will set with after stretching you can't add you can't add the width after doing the flex expand all right so on this first column let's go ahead and add a piece of text text block actually everything in this menu wrapper needs to be white cool and let's do the tagline actually i want to make sure that the font is the pixel geek font or montserrat sound like a vampire for some reason um that was halloween huh yeah and let's make that semi-bold semi semi all right make the web beautiful together all right um i'm gonna call this tagline and let's just do some design real quick i'm going to uh let's go ahead and make this like 18 and make sure that it doesn't break so if you don't want the line to break you can just do breaking no wrap and there we go but i wanna let's see here can i do position absolute yeah i can and then i'm going to turn this turn yes not going to sing that and let's go ahead and rotate by 90 degrees and see here where's the origin one of these things maybe maybe that one and let's go ahead and bring it down cool something like that all right i mean yeah all right next let's put another one uh so we're gonna put a div and this div oh okay since this one's floating i guess this second div is still going to the first column all right let's make it the second column though column two and this one uh yeah so this div block right here this is just gonna hold all of my nav links so let's go ahead and put a text link and we'll call this nav link and we'll set display block yay no codalytics you found it thank you colleen mads welcome welcome to the stream all right so if you ever come to the problem where you're like i put a text link but the color is default blue but the color in my typography says white why um well but you need to overwrite it and so the way to override it is just click on the color and then just do it again like now that becomes white take out the underline let's make this bigger like 40. yeah 80 pixels cool and then set this to 1.3 dash and 1.2 one one okay so we're gonna call this home and um let's do this let's set the div block and call this nav link's nav link wrapper and i want this to stretch all the way to the all the way to the top and bottom of this grid and i want to set the flex vertical so that way when i put links watch this i'm going to put a bunch of let's put like five links but i want them to space out evenly i want to put like gaps in between each each link so what i can do is take this flex box and then i can space them boom cool yeah rather than having to add margin bottom or and top or padding or whatever then you just let the computer do it home about work um hey and join pixel geek i don't know um oh yeah contact cool uh yeah and then these can all be links and then each link we can do a hover effect where it's a different color like um cool and always remember contrast ratio make sure that it's triple a or at least double a and you can see right there like if i go lower it's like okay you're good for accessibility uh you're pushing it oh no and that's a fail so keep it bright on black on dark backgrounds and vice versa cool got it and let's do a transition so because it's not like just on and off like yeah let's let's do a transition so it's a animation so we go here to transitions find the font color and we're good sweet nice all right there you go michael yeah exactly no hassle with plug-ins but don't take my word for it all right so we're there i mean we're there so if we go like this and we display none and check this out cool cool yeah but but we're not there yet but we're getting there is is this clicking for you all do you understand what i'm doing uh yeah let's keep going let's turn this back on and let's do one more column um what did i do oh yeah send me an email connect on linkedin um let's do this add another column and reset this to manual so we can push this to the third column and we're going to push this to the bottom so see it's right there and push it to the right that's right there cool and now let's go ahead and put two links text link and we're going to call this uh let's go nav link but we're going to call it give it a combo class of sme is there a way to check the whole site at once regards to color visibility not at this moment webflow did announce that they're working on a site accessibility audit checker thing so maybe we'll see timothy i'm liking it yes thank you all right let's make this small but not too small cool all right um what did i put here oh yeah send me an email isn't that what contact is all about i just oh well uh slide into my dms and yeah all right um and we'll give this a margin top of like 20. so i can copy and paste and we have space in between 32 and this one is connect on linked linkedin okay i want these there we go i want to make sure that it's aligned right when it comes to the text cool um yeah that's cool oh we're going to get there later we're going to get there is this fun is there initial way to initiate the closed animation when you click on a link does that require custom code um yeah it does require custom code um this is based on a client project that i did a long time ago and i don't want to click the link in my in my actual project because that might reveal because i don't know if he launched the site yet he hasn't emailed me telling me that but it's been a long time so i don't wanna i promised him i wouldn't show it so but this stuff i want to show you all um wait these should be thicker like thick and these shouldn't be let's like make this smaller sorry i'm just having fun and then like all caps yeah something like that all right cool so more emphasis is going on this all right [Music] contrast checker oh thank you colleen i noticed you set type in pixels many resources i've read say never use pixels what's your opinion on this topic uh yeah you can use pix uh yeah you're right uh do vh or vw actually it's better for responsiveness because if you do a font size of like that watch what happens to the text see that's cute yeah all right cool so we've done that all right so now i want to do the thing where when it opens that whole staggered load effect happens so let's do that okay so we're gonna grab this menu button right here the one that opens it and we're gonna add on top of that timeline that animation timeline to make each of these happen um yeah to make each of these happen so to do staggered load you need to make each of these elements uh unique so this one it has a unique uh class name tagline this one this one this one this one this one they're all they all have the same class name nav link so we need to make them unique so just add a combo class nav link one two and this is where the kind of tediousness of animation happens but if you want it to look slick you'll pull put in the time okay so each of these has a unique class name cool now um go to menu button interactions we need to play around with the mount menu open animation so menu open let's do menu wrapper hide and show um let's go ahead and duplicate that because i want the initial state of the hiding show to actually be hide for the menu wrapper but then when we press play it shows everything at the end cool so we're here now let's take this tagline obviously you'll go when we click on it because we have the hiding show not showing so we click on it and we do um let's do opacity zero down here the initial state is opacity zero all right and let's move this a couple pixels from its origin to the right so we'll do negative we'll do negative 30. all right and then when the menu wrapper is open we want these two to go back to its original state so what we can do is select both of these right click duplicate and drag it after the menu wrapper and then for the move we're gonna go back to zero its original um position and then for the opacity we're gonna set this to 100 okay and let's go ahead and also add an easing to this like a ease out court cool and it's not rotated so i need to do that too hold on tagline rotate negative 90. tagline rotate well does it keep the rotate if i just leave it oh okay oh i need to move it too not what's the number so what happens is if you ever have any if you have any uh styles in here in this styles panel if you have any of these transforms happening it's going to get erased in interactions so you just have to do it again inside of interactions so the move is 0 and 310. let's go there yeah there is no way this is going to be like a quick tip type of youtube clip so um 310 on the y and the y we will just can we just leave it like that cool all right so we're there with the first thing again tedious but it makes it look cool all right so we're there we good okay all right now let's get each of these nav links and do the things so we're going to move the nav link up on the y by 30 pixels so negative 30. and then i'm going to add a opacity of zero for its initial state so these are initial state right click duplicate and we'll put it with the tagline uh tagline step but we're going to add an extra delay of like pick a number point 0.25 half all right so this happens and then this happens while this is happening okay so preview oh did i not set the opacity oh i forgot the opacity 100 the move back to zero let's try it again that is slow why oh it's because i have different easings ease out court there we go cool rinse and repeat times four so select these right click duplicate drag it into the actions but instead of having to [Music] so what i can do is change the class to nav link to that didn't change this did it it did no undo undo undo this is yeah this is one of the hard parts the tricky parts of the webflow so let's try it again duplicate and let me see right click change target just for these two not all of them what full webflow just these two okay so that class link changed to two did these change no they didn't okay all right so now i'm going to right click actually i'm going to drag this in here we're good and so for this nav link right click duplicate right click change target choose number two drag this in here i know i'm getting a little bit faster now but this is this is it this is this is the tediousness of making an animation like this will webflow have a staggered load thing quick effect i hope so but until then this is the way you do it uh let's see here let's just add 0.25 oh okay so now it's 0.5 and we have the easing set let's preview yeah it's kind of slow so now i gotta fix the timing on this so delay we'll just say point one and this one just make it easy point two there we go okay cool all right so again rinse and repeat i'm going to take this one select both duplicate right click change target click on the next one so we're on number three drag that in there select both right click duplicate right click change target number three drag it in there give it a delay of 0.3 so now we have one two and three preview it we're getting there it's looking slick the finish line is almost there not too bad um here we go so right click duplicate right click change target number four drag that in there and i'll just go on autopilot now and ask how you all doing yeah having a good saturday i hope i'm adding to your saturday i hope you use this cool project on your future on your future yeah on your future projects or portfolio or whatever um yeah so mm-hmm i heard that google can um now figure out what song you're humming that's pretty cool i wonder how they tested that how many people were humming when they're testing that can you be a qa tester for humming i want we're doing something cool mm-hmm mm-hmm [Music] if you have a lot of links you may get confused because notice how these first names don't change so yeah almost done wait i forgot to add a delay here there we go cool scott love it thank you gotta go back to work in one hour all right no it's okay go to work get your mind ready for work watch the replay all right it'll always be there for you and then come back next week we will be here for you don't know if you remember that i asked about this like a month ago well i'm finally doing it for you awesome okay wait what oh no i have to reset everything wait [Music] okay okay yeah man i thought it was done oh i thought i was like okay cool this is done let's just chat no there's so much more oh look my dad's texting me he's watching hi dad what do you say um oh yeah and thank you colleen for your donation if you want to support the stream and donate there you go um okay [Music] okay so we're here we need to reset where all the text links are and i'm trying to think is there an easy way to do this because i don't want to have to go through each one and random so we'll see maybe ah all right so menu close we're going to use the menu close trigger and this is what we need to start adding on to when it comes to when it comes to closing we reset everything so tagline um i'm not gonna do staggered load let's just all of them reset like you had your fun and now when i press close go back to where you were so okay so this menu button doesn't hide yet but i bet this does a heightened show okay so i was doing the hiding show thing so hiding show will happen later yeah so let's put this okay so this right here this tagline we're going to move it back to where it was so negative 30 on the x-axis and we're gonna i'm wondering if i animate it first or i just yeah so what you can what i'm gonna do is set the duration to zero so there's no animation it just resets back immediately after someone clicks um yeah so i'm going to reset everything without any animation so this tag line right here uh we're going gonna set it to that and then we're gonna reset this to opacity zero set the duration to zero so it immediately goes back to that but i want that to hap to happen before the whole menu wrapper closes before it um does the high does the the hide yeah okay so tagline right there gone cool these nav links i'm going to do the same thing let's go and set the move to uh negative 30 on the y and reset the duration to zero and we're gonna set the opacity to zero with a duration of zero all right so it just happens and here's the thing i want this to happen to all the nav links so instead of just doing this nav link with a combo class of one i'm going to set it to all nav links cool so wait how come how come that one's gone but these okay whatever right there okay cool they're all gone all right sweet so let's see what happens with that let's just test it out okay go away cool okay cool yes that's what we want no not you wait what what quiet here's the definition of quiet making little or no noise thank you google what was that all right so i want some sort of animation now of all of these like fading out rather than just off with the light switch um yeah so this grid right here is what i want to do a opacity zero so let's go ahead and add opacity i want this to animate to zero before everything resets i'm gonna set this to um quart and so it does this cool okay all right or is it the menu wrapper that um man hold on i'm getting confused by myself like that oh yeah okay cool and let's make the uh close menu also do opacity zero but at the same time let's see here so all of these will happen at the same time so the grid is going to opacity zero all of these are resetting back with a duration of zero and then the menu once the opacity is done um fading away the menu wrapper cl um hides but also i think at the same time this grid opacity is going zero no no sorry at the same time that these are collapsing this close menu also needs to go opacity zero ease out court we'll throw it there yeah what why oh it's because we did the height um i wonder okay maybe you should go there i don't know yeah okay so we have our clothes done cool now we need to fix our open one more time so we after uh we need to fix the clothes or sorry the open one more time so it's uh so this close menu shows up again all right and since my dad is watching and probably my mom this is how far i've gotten thank you for teaching me close open yeah clothes open close open that's what we used to sing to kids to teach them how to open and close their hands anyways moving on uh save let's go here to menu button we're gonna go to menu open i know this is kind of confusing it's hard to explain this is a very advanced tutorial but uh whoever who uh james yeah so james now you understand why i had to make this its own dedicated stream i couldn't just answer in five minutes this is already 45 minutes into the stream i mean into the tutorial so yeah just for this um let's go uh so now i'm in the menu open the close menu let's go ahead and [Music] add it here to opacity 100 with ease out court and i think because of that we're done oh i felt it i was like uh what happened to my stream did it die uh it's uh wait is my stream still going hold on hello um wait oh okay okay that was weird youtube said a number of viewers zero and i'm like what happened i'm all checking my streams okay we're good i think yeah all right thank you steven um yeah still here all right um why isn't it resetting i did the things all i did was just add opacity to this and now your oh the grid has to be duh okay so menu wrapper hide and show and at the same time this grid right here has to go back to opacity uh 100 at zero duration a little bug there but um i'm calling it my brain's tired you know after every stream i have to just lie down and because it's just it's mentally tight it's exhausting but it works you're welcome you're welcome internet i will let you have this project you can clone it you can mess with the timing you can fix that one bug if you see it's happening but there you go i there you go that's how you do it it's not easy uh james i have no idea thank you you're welcome you're welcome this is for you and the rest of the community

Channel: pixelgeek

Views: 1,258

Keywords: webflow, web design tutorial, webflow tutorial, graphic design, web development, pixelgeek, pixel geek

Id: yqlY5nQmXGk

Length: 62min 6sec (3726 seconds)

Published: Mon Oct 19 2020