Daily Interaction #19 | Fullscreen Menu with Panel Reveal | WebDev For You | Made in Webflow

webflow outputs code that's nice and clean now let's build daily interaction number 19. [Music] hey what's up everyone john with web dev for you and welcome to the daily interaction series where every weekday we build a new interaction or animation in webflow today we're going to be building a full screen menu with a panel reveal on click so here if i click on the menu trigger right over here we see the the menu flies in and we have the menu items and we have this image show up so it's a really fun menu and it can make for uh yeah a really nice menu for your website all right looks good so this was actually inspired by this website here designcanada.com um they have a bit more going on with their menu here but it's the same idea where the panels come in to reveal the menu and they have a few more menu items and an animation here yeah it's a really nice website so this inspired me to create a menu like this in webflow all right looks good so yeah this is what we will be building today to view more daily interactions and premium content visit webdev4you.com also be sure to subscribe below to receive a notification every time there is a new daily interaction okay so here i have a blank webflow project and we'll start with the daily interaction class naming convention so it's d dash the daily interaction number so today is 19 and then the element so every element on the site will have a d 19 in front of it and this is for consistency purposes and so that we know we're working with daily interaction number 19. so first we're going to build out all the elements for the menu and then we're going to add the interaction so the first thing i'm going to do here is add an element i'm going to add a section and i'm going to give this section the class name d-19 section and i'm going to give it a height of 100 vh so it spans the full height of the viewport and it will be the full width as well then for the background i'll give it a background color of black and i'll give it a display setting of flex justify start and align center and this will be a bit more evident as we go through this tutorial as to why i'm setting these options here and for this i'm also going to set a position of relative because we are going to have an absolute position div inside of this section and i want it to be relative to the section and not relative to some other parent element like the body so by setting it to relative anything inside of it will be relative to it alright so there we have the section the next thing i'm going to add is the lines so if we go to the demo we see this website has lines going down and it's split into uh six different sections uh so here for the the site i'll go to the navigator and inside of the inside of the section i'm going to add a div block so i'll add add an element i'll add a div block and i'll give this div block the class name d-19 lines wrapper so the lines are going to go inside of this div block so for this i'm going to give it a position of absolute so this is that absolute div that i was talking about so it's going to be relative to the section and not relative to the body because the section has a position of relative all right so here for the lines wrapper i'll set it to absolute and set it to full so it fills the entire section and then for the display setting i'm going to set it to flux and i'm going to say justify start and align stretch so by setting it to a line stretch we can set its children elements to be the same height as this wrapper all right so that's all i need to do there now we're going to add six div blocks inside of this lines wrapper so in the navigator so we have the section we have the lines wrapper so i'm going to add an element i'm going to add a div block and it gets placed in the lines wrapper and i'm going to give it the class name d-19 um let's call it call it lines and i'm going to set this div block to expand here it is now a flux item because its parent element has a has a display setting of flux so this element becomes a flux item so i can set it to expand so it fills the entire parent element and it's also the same height as the parent element because yeah the lines wrapper has a display setting of flex and it's a line stretched so it fills the height and by setting it to expand it also fills the width so it's filling the entire parent element so for this as well i want to yeah copy it six times now so because it's set to expand it's set to fill all the available width so if i copy this six times we're going to have six div blocks all with the same width so here i'll hit command c to copy and then i'll paste um yeah i'll paste in the lines right i can select the lines wrapper so let me undo that so select lines wrapper and then paste until i have six blocks so i have one two three four five six they're all set to expand so they're trying to fill the available space and that's why we have six equal blocks here all right looks good so the next thing i want to do for these lines is add a right border so they're actually div blocks but i'm calling them lines because we're going to add a right border to create that line effect so here for the lines yeah i'm going to go down to border and i'm going to select here the right border so i'll select it here then i'll add a solid border with a width of 1 and i'll change the color to white and add an opacity of 20 percent so the color is white with an opacity of 20 and we applied it to the right side of the div block so now if i preview we have subtle uh subtle lines visible here within the site hopefully you can see that within the video they are a bit light but it has a nice effect for the site and it'll be nice when the blocks come in it almost looks like they're joining in into the lines to create this interesting effect all right so there we have the lines um yeah so the next thing we'll do is add the menu wrapper so the menu wrapper is going to be fixed okay so the reason i'm adding the lines here um you know if we add in another section i could have the lines kind of go into that section so the lines go through the entire site but it is just one sec one section with um you know filling the width of the viewport and the height so yeah this is okay for now but yeah the lines are going to be outside of the menu wrapper and also because uh late this will make sense a bit later but later on we're gonna hide the menu wrapper so we don't want to hide the lines as well so i don't want the lines wrapper inside of the menu wrapper okay so here for the section i'm going to add another div block so i'll add an element i'll add a div block and i'll call this uh d-19 menu wrapper okay so now we're going to place things inside of the menu wrapper and for this i'm going to set a position of fixed and full okay and it is going to be relative to the section so it's going to be full width and full height of the viewport and the reason i'm sending it to fixed is that if if we had scrolling to the site i want the user to be able to access the menu anywhere they are on the website so by setting it to fixed if they scroll if the site has some scrolling and they scroll to the bottom that menu can still appear within the viewport of the browser okay looks good so we have the menu wrapper it's fixed and for this um yeah that's all i have to do there actually i don't have to set a display setting because we're going to add some some other wrappers inside of this wrapper okay so here i'll click on navigator and for the menu wrapper i'm going to add a div block so i'll add an element i'll add a div block and i'll call this d-19 blocks wrapper okay so now we're going to add the blocks and for this i'm going to set it to a position of absolute and full and i'm also going to set a display setting of flex and justify start and align stretch so again we're going to do the same thing we did for the the lines or the div blocks that had the line applied to it because we're going to have six blocks so we want it to be justify start and align stretch so now inside of the the blocks wrapper i'm going to add a div block add element add a div block and for this i'm going to set it give it the class name d 19 block and i'm going to set it to expand same thing we did with the the first lines set it to expand then go into the navigator and just copy this and inside the blocks wrapper paste until i have six blocks yeah or yeah actually this should be d-19 block wrapper okay so i know it could be a little confusing here so it's block wrapper so we have the blocks yeah the blocks wrapper and then we have the block wrapper so the blocks wrapper contains all of the blocks and the reason why we're calling these individual blocks a block wrapper is because we're now going to place a block inside of it okay so um if you followed along with some of the block reveal effects this will be a bit more clear but i'll continue here and uh hopefully this this becomes a bit more clear as i go along um so here inside of the for the d-19 block wrapper we're going to give it an overflow of hidden so anything outside of these div blocks won't be visible and this will allow us to create that pan panel reveal effect because we yeah because we're going to place a div block inside of it and have it move in and out okay and i also want to set a position of relative for the block wrapper because we are going to have an absolute position div inside of it and i want it to be relative to this block wrapper and not relative to some other parent element so by setting it to relative anything inside of it will be relative to it and that's it okay so uh yes we added the blocks wrapper it's inside the menu wrapper the blocks wrapper it has a flex of align start and stretch and then we added yeah so here in the flex uh yeah set a display setting of justify start and align stretch and then we added six block wrappers so yeah without so this one's singular and this one's plural so we added six block wrappers gave it a position of relative and yeah copied it six times and it has a flex item setting of expand so it fills the available space okay so we have six blocks and now we want to add a div block inside of each one of these so i'll select the block wrapper add an element add a div block and i'll give it the class name d-19 block okay so this will be the actual block and for this i'm going to set it to a position of absolute and full so it fills the entire block wrapper and then i'll give it a background color of white okay so there we have the block and now i can copy this block and paste it into the other block wrappers so i'll hit command c to copy and in the designer just select the block wrapper and paste okay so now we have six blocks inside of each block wrapper and this is going to allow us to move the block in and out so the block wrapper has an overflow of hidden so we won't see the the block move in and out of the block wrapper it'll just have that nice panel reveal effect okay so yeah so far so good um so the next thing we want to do is we want to add a text wrapper inside of the menu wrapper so here i'll select menu wrapper because for the text wrapper these link blocks we're going to put in a yeah a text wrapper so let me go into webflow into the the site and select menu wrapper then i'll add a div block and i'll call this div block d-19 text wrapper okay and for this i'm going to set it to a position of or actually let me give it a width and height of 50 percent by 50 percent and let me set the menu wrapper flex setting so here for the menu wrapper i'll give it a display setting of justify start and align center so this will place that text wrapper in the center so now it's yeah it's starting here at the left and it's in the center and it has that setting applied to it because we just applied the flex setting to the menu wrapper of justify start and align center okay so there we have the text wrapper um i do want to move it over to the right i'm going to move it let's see what the value is here yeah 16.666 percent because 6 are actually not the width let me undo that so yeah let me set the width to 50 percent we want to give it a left margin of 16.666 percent okay so the reason we're doing that is because um 100 divided by 6 is 16.6666 and i want this yeah 16.66 repeating and i want this text wrapper to start at the second block so by moving it 16.666 repeating to the right it starts at the second block okay so that gives it the effect so when i start it looks like these these texts are lining up we can't see the line here but just for design purposes it looks like it's lining up with the second block okay all right looks good so let's go back in here so we have the text wrapper and for this i'm going to give it a display setting of flex i'm going to set it to vertical and yeah justify start is okay and align stretch is okay um so now i'm gonna add a link block inside of this text wrapper so i'll select the text wrapper i'll add an element i'll add a link block and i'll give it the class name uh d-19 link block okay so the reason we're adding a link block inside of the text wrapper is because we want to we want to link we want to place text text inside of the link block and have it link out to something so like a url a page a page section an email telephone number or a file okay so there we have the link block i'm going to give it a display setting of justify center and align center so that the text is in the center of this link block and actually uh justify start we're going to start the text at the beginning of the link block so now i'm going to copy this link block three times so i'll hit command c and just paste there we go so we have uh yeah one two three we have three link blocks okay so now i'm going to add some text inside of the link block so with the link block selected i'll add an element i'll add a text block so let me scroll up here yeah text block and i'll give this a position of relative for the text block give it the class name d-19 menu item text so i'm giving it a position of relative so it comes to the front so we can see this text inside of it so now let's style the text a bit so i'll say for typography i'll say circular bold i'll give it a font weight of bold set it to a color of this blue and give it a font size let me rename the text inside of here so i'll say designer or designers and yeah so we also notice it has an underline and that's because the text is in a link block so webflow automatically gives it that hyperlink styling and it adds the underline to it so to remove it let's just go back into the navigator select link block and i will um yeah go to typography and set it to none for the underline so the underline is removed and now i'll go back to the menu item text and we'll style it a bit more um so let's make that text even a bit bigger something like um yeah 54 might be a bit big but just for demonstration purposes and then the line height set it to something like 70. all right so we have the link block the text is inside of it and looks good so now i'm going to copy this menu item text and let me collapse it so i can see it a bit better so we have this menu item text so i'm just going to copy and paste it inside of the other three link blocks so i'll double click so i'll say designers musicians and photographers for yeah photographers okay and i'm gonna add some some margin to the link blocks so there's a bit more space so hold down alt and add some top and bottom margin okay so there there's a little bit of space in between them so maybe something like 10. all right so there we have the menu items i can click on them and it looks good so yeah let me see here yeah link block musician yeah okay perfect alright so we have the text and it's looking good so the next thing i want to do is add this image here on the right so to do that let's select the let me close this here let's select the menu wrapper and i'll add a div block inside the menu wrapper and i'll give it the class name d-19 bg wrapper okay and for this i'm going to give it a position of absolute and i'm going to set it to the right so it goes to the right and then i'll give it a width of 3.33.333 repeating yeah because two blocks is 33.333 percent and i want it to span across two blocks there okay looks good and for this i'm also going to set an overflow of hidden so we can have that reveal effect for the image then inside of the b2 wrapper i'm going to add another div block and this is going to be d-19 bg image okay so we're going to place the image in here for this i'm going to give it um yeah also for the bg wrapper let's make sure it has a position of rel oh no it's absolute never mind um yeah so here i'll select bg image and i'll give it a position of absolute and full okay so it fills the entire wrapper and then for the image i'll select add a background image i'll choose an image and i'll select this image here give it a position of cover and center actually i'm going to put it to the left yeah it looks better and i don't need it to be tiled so i'll just select the x here to not have it be tiled all right looks good so i think we have everything we need also for the link block i want to set it to an overflow or actually the the text wrapper i'm going to set it to an overflow of hidden okay because we are going to move the link block in in and out of this text wrapper alright so hopefully that made sense if you have any questions about anything i just went over definitely let me know in the comment section below or in the forum section for this uh this video alright so we have all the elements now we can add the interaction okay so um so what we're gonna do here is we're gonna add actually we need to do one more thing we need to add the menu trigger so inside of the section i'm going to add an element i'm going to add a div block and we can see it gets placed on the left here i'm going to give it the class name d-19 menu trigger and i'm going to give it a width and height of 50 pixels by 50 pixels set the background to blue and set the position to relative so it comes to the front and i can also play with the z index if it's not in the front here i can add a higher z index value so it comes more to the front but by setting it to relative it it automatically automatically okay yeah automatically comes to the front there and then for the radius i'm going to set it to 50 percent uh so it becomes a full circle um for yeah to make yeah to make a square a complete circle just set the border radius border radius to fifty percent or half the uh pixels of the square and that creates a perfect circle okay and then i'll add some margin to the left maybe like 40 pixels for the menu trigger and there we go so when we click on this button here we're gonna have the interaction occur okay uh yeah so far so good all right now the next thing we're gonna do is add the interaction so when i click on the menu trigger so i'll select it here i'm gonna go into interactions and here for element trigger i'm gonna click the plus and i'm gonna say mouse click or tap so when we yeah click or tap on the menu trigger we're going to start an animation and i'm going to i'm going to add a new timed animation and here i'm going to give it the class name or the name d-19 first click so this is what happens when we first click on the menu trigger okay so for this i want to set all the elements to the left okay so the first thing i'll do is select the blocks so in the menu wrapper i'm going to select the the block here because we're going to move the block to the left so i'll select d-19 block let me collapse that so it's a bit nicer yeah so we have d-19 block here and then i'll go into interactions i'll add a new time to action i'll say move and i'll move it on the x horizontally negative 100 percent so it moves that block all the way to the left and i want it to be the initial state so i'm going to set it as the initial state by clicking next to timing and clicking this toggle and i want it to occur for all of the blocks so i'll select the block and i want to affect any element that has the class d-19 block so i'll select it here instead of selected element i'll say class and now all the blocks move to the left okay and they're set as the initial state and perfect so if i preview we don't see the blocks all right so now i want to move the link blocks to the left as well so i'll collapse this and i'll select the menu wrapper go into the text wrapper select the link block here and i'll say move negative 100 percent and set it as the initial state yeah right there set it as the initial state select the second link block move uh negative 100 percent and set it as the initial state and the third block will move negative 100 and set it as the initial state okay yeah and then for the background image i'll select it um here i can select it in the designer or in the navigator select bg image and i'll move negative 100 okay and set it as the initial state and perfect so the last thing we need to do is set the menu wrapper um yeah this entire menu wrapper we need to set it to a display setting of hide so here i'll select add a new timed action i'll select hide show and here i'll say display none and then i'll set it as the initial state so the reason we're hiding it here at the end is because even though the menu is hidden if we had elements behind the menu we wouldn't be able to select them because the menu is still in front so yeah even though elements inside of it are not visible that menu is still blocking elements behind it so by setting it to hide the user can still interact with the elements on the site but uh yeah but then once the menu comes in we'll have it show so that the menu they'll be able to see the menu alright so now that we have all the initial states set up yes set up let's let's add the interaction of having everything come in so the first thing i want to occur is i want this menu to show so here i'll click and i'll say hide show and yeah let me make sure i have the menu wrapper selected so yeah because we've already used the elements here in the timed action we can select it here so here for the menu wrapper i'll select it and i'll say hide show and i'll say display display flex because the menu had a display setting of flex so i'll set it to display flex so it comes back in and then we can have the blocks come in so the block is going to move yes i selected the block up here set it to move and it's going to move back to zero percent on the x i'm going to add an easing of ease out expo and a duration of 0.5 is okay i'm going to add a delay of 0.1 and i'm going to yeah so yeah that's all set there um actually wait uh yeah i'll add a delay of 0.1 and then i'll set it's going to affect the class so any elements with this class so now if i preview and i click those blocks come in perfect so the next thing i want to occur is i want each link block to come in so i'll select it and actually for the block i don't want to delay i'm going to set the delay to zero then i'll select the link block the first link block i'll say move move it to zero percent yeah oops yeah zero uh let's see here zero percent zero percent there we go and i'll add a delay of or start it with the previous interaction so i'll click hold and drag place on top of the block and i'll give it an easing of ease out expo duration of 0.5 and a delay of 0.1 okay so now i'll select the second block i'll say move or the second link block say move set it to zero percent and i selected the third link block so let me go back up here yeah select the second link block say move to zero percent and start it with the previous time to action set an easing of ease out expo and a delay of 0.2 then i'll select the third link block i'll say move and we'll set it to zero percent on the x so it comes back to its original position i'll start it with the previous timed actions by click holding and dragging i'll set it to ease out expo and i'll add a delay of 0.3 so they cut they have that staggered effect for the menu items so i'll preview when i click the blocks come in and the menu items come in as well so i'll click and perfect all right so now we want the image to come in so up here i'll select bg image and i'll say move and i'll say zero percent on the x and here i'll add an easing of ease out expo i'll start it with the other ones by click holding and dragging and i'll add a delay of 0.2 duration of 0.5 is okay so yeah so there we go i click and perfect so that we have there we have the the interaction when it comes in so yeah let me preview again click and perfect it looks good so the last thing we need to do here is add the second click so when we click again we want that menu to uh to to go back or have the animations go in reverse and then we'll hide the menu so here i'm going to close this and on second click i'm going to start an animation i'm going to duplicate the first click here by clicking on these three dots and here i'll select d-19 first click to select it and i'll rename it here to d-19 second click here i'm going to delete all the initial states because we don't need an initial state for the second click because we already applied it to the first click so i'll just delete there and perfect so now i'm just going to move things around so for the reverse animation i want all the menu items uh to go back first and the image and then the blocks and then hide the menu so for the link blocks i'm just going to click hold and drag and place them at the beat at the beginning so yeah click holding dragging placing there at the beginning and then for the delay for the first one i'm going to say 0 for the second one i'm going to say 0.1 and for the third one actually let's start them all at the same time so i'm going to click hold and drag and place them on top of each other so for the second one i'll add a delay of 0.1 the third one i'll add a delay of 0.2 okay so the yeah the link blocks are going to move in in a staggered motion first then we're going to have the image so i'll place the image right up here with the blocks then we're going to have the image and the blocks move or close or yeah move to the left so yeah there we have the image i'm going to add a delay of 0.3 for the image and then we're going to have the block as well and the block has a delay of 0.3 so first the link blocks are going to move to the left then the background image and the blocks are going to move to the left as well so here we just need to change the value so for the link block instead of 0 we're going to say negative 100 so it moves to the left negative 100 percent and negative 100 then the background image as well negative 100 percent and the blocks negative 100 on the x and then for the menu wrapper instead of a display setting of flex we're going to say none so we don't see the menu wrapper and we can interact with elements on the site so now if i preview so i click once the menu opens i click again the menu closes and that's it so that's how we create a full screen menu with a panel reveal effect on click looks good i can publish it yes i published two selected domains and preview and yeah i click and there we go so let me see if i can demonstrate why we hid and why we hide the menu and then show it so here i'm to go into the section i'm going to add a text block and there we have the text block um and i'll give it the class name d-19 um actually let's add a heading so let me delete this text block go back into section add an element i'll add a heading and i'll say uh yeah d-19 heading i'll give it yeah change the styling a bit and yeah set it to white okay so now if i preview we have the heading um and let me see here let me see if i remove the line wrapper for a second okay so yeah we want to place the heading yeah let me show the line wrapper and let me give the heading a position of relative so yeah there we have the heading so we see we can select it um if yeah well we can select it well the menu wrapper would have to be in front of the text as well so we can add a z index of something really high to the menu wrapper and then to the menu trigger hopefully this isn't getting confusing it might be but basically what i want to demonstrate so yeah there we have the menu and notice we can select the text and that's because we hid we hid the menu right so initially the menu the menu wrapper isn't visible so we can select elements on the site and if we click the menu comes in and then it then we hide the menu again if i were to go into the interaction and if i were to remove the hide show like just delete the hide show here and i try to highlight this text notice we can't interact with this text on the site and if we had buttons and things like that we wouldn't be able to interact with it because even though we can't see the elements inside the menu wrapper that menu wrapper is still blocking the site still is still in front and blocking elements behind it so that's why we need to add so let me just undo it here that's why we need to we need to hide the menu wrapper initially and then bring it back uh yeah bring it back first and then add all the interactions and then when we close the menu we need to hide the menu wrapper at the end as well so yeah we're applying the hide show to the menu wrapper so now i can interact with it because yeah we're hiding and showing the menu wrapper i can click now the menu wrapper is shown and interactions occur then when i click again the interactions occur and we hide the menu wrapper so we can interact with the elements again okay so i just wanted to cover that concept really quick um yeah hopefully that all made sense um yeah the last thing i'll do i know this video is getting kind of long but yeah let me go into styles let's just add a quick hover state to these uh this this text so i'll select it and here for the states i'll select hover and i'll just change the color to this magenta color and that's it i could add some transition to it but yeah by going to the the normal state and adding a transition but i like it just having it that quick change of color for for the text so i'll click and bam there we go i can link this out to anything um yeah i can go into the here go into element settings and or i have to select the link block here i can link out the link block to anything here to a site another page and things like that okay so yeah that's it for this video tutorial probably one of the longer ones but it is a really interesting effect it can make for a really nice menu on your website um it was inspired by designcanada.com really cool menu um yeah so that's the power of webflow you can really create these really amazing menus um yeah just with a few interactions and adding the elements there all right perfect yeah so this was a lot of fun uh really excited to be sharing this with you and yeah so hopefully that all makes sense if you have any questions definitely definitely let me know in the comment section below or in the forum section for this video um i did add this button here just a quick rotation but yeah that's just a little button if you want me to cover this let me know it's quite simple you just add a few div blocks inside of a circ wrapper kind of add a radius to the wrapper and then have it rotate with the interaction as well all right perfect so looks good so that is it for uh daily interaction number 19. yeah creating a full screen menu with a panel reveal effect uh to view more daily interactions and premium content visit webdev4you.com thanks for watching and i'll see you in the next daily interaction [Music] you

Channel: WebDev For You

Views: 1,606

Keywords: webflow, web flow, webdev for you, webflow tutorial, webflow video tutorial, webflow tutorial 2018, webflow for beginners, webflow menu animation, webflow fullscreen menu, fullscreen website menu, panel reveal animation, sketch, figma, adobe xd, xd, avocode, invision, website prototyping, webflow animation, made in webflow, webflow interactions, responsive webflow, webflow website, web design in webflow, responsive web design, javascript animations, website builder

Id: FzABKTBpGPU

Length: 37min 3sec (2223 seconds)

Published: Wed Nov 14 2018