Daily Interaction #9 | Off Canvas Menu on Click | WebDev For You | Made in Webflow

webform makes it easy to develop and design now let's build daily interaction number nine [Music] hey what's up everyone John with webdev for you and welcome to the daily interaction series where every weekday we build a new interaction or animation in web flow today we're going to build an off canvas menu on click so here if I click on this menu trigger we see that the entire site moves to the right and we have this menu here on the left and if I click again the site moves back to the left and we no longer see the menu so it's called an off canvas menu because literally the entire site is moving it's moving to the right all right so this is what we will be building today to view more daily interactions and premium content visit web dev for eucom also be sure to subscribe below to receive a notification every time there is a new daily interaction so here I have a blank web flow project and we'll start with the daily interaction class naming convention so it's d - the daily interaction number so today is 9 and then the element so every element on this site will have ad - 9 in front of it and this is for consistency purposes and so that we know we're working with daily interaction number 9 okay so the way this interaction is going to work first we're going to build all the elements that we need and then yeah we're gonna place everything for the site in a main wrapper so that we can move the entire site to the right yeah so yeah we're gonna place everything in the main wrapper so the first element I'll add is uh is a div block so I'll add an element I'll add a div block and I'll name this D - 9 main wrapper and I'm not gonna set any width or height because I wanted to inherit the height from the elements inside of it okay so the next thing I'll do is add a section so I'll add an element I'll add a section and I'll name this D - 9 section one we're gonna have two sections so we can have some scrolling to the site so their section one I'll 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 I'll scroll down to background I'll set the background color to black I'll scroll up to display setting I'll set it to flex set it to horizontal justify:center and align Center so I'm gonna have the menu trigger here within the section and I want it to be in the center so I'll add another section so I'll go into the Navigator I'll select the main wrapper I'll add an element I'll add a section and I'll give it the class name D - 9 section - 2 again I'll give it a height of 100 VH and I'll set the background color to blue so we can distinguish it between the first section so now we have some scroll space to the site and if I preview we we can scroll we have section 1 and section 2 so now let's add the menu so I don't want to place the menu in the main wrapper because we're gonna have the main wrapper move to the right so I want the menu to be in the body so it it doesn't move with the main wrapper so here I'll select the body the body tag or a class I'll add an element I'll add a div block and I'll give it the class name D - 9 menu wrapper and for this I'll scroll down to position and I'll set the position to fixed and I'll place it on the left because I want it to be fixed on the left so it'll be fixed in the browser and it won't move and for the width I'm gonna set it to 250 pixels you can set this to anything you'd like I find that 250 pixels works well then for the background color I'll set it to magenta and there we go and for the Flex for the display setting off set it to Flex set it to vertical justify:center and align Center so anything I place within this menu wrapper will be vertically centered and that's how I want the menu items to appear I want them to be stacked on top of each other vertically so then the next thing I'll do is add the menu items so here I'll add an element I'll add a link block and the reason we're adding a link block is so that we can link it out to something so we can link it out to a URL page page section email telephone number or a file so here I'll give it the class name the dash nine link block and then I'll place some text inside of the link block so I'll add an element and I'll select text block all right I'll give it the class name d dash nine menu item text so we notice it kind of has this funky blue color and underlined and that's because the text is inside of a link block so web flow is giving it this hyperlink styling so to remove that we'll just go to the navigator we'll select the link block I'll go into styles and I'll scroll down to typography and right here for the underline I'll select none okay now I'll go back into the navigator select the menu item text and we'll style it so here for typography I'll set it to circular bold I'll set the font weight to bold and I'll set the color to white I'll double click inside of the menu item text and I'll rename it to home and then I'll give it a font size of 34 and a line height of 40 so then here I want five menu items so I'll go to the Navigator and I'll hit command C on the link block and paste until I have five menu then I'll double click inside of each one and rename them so home about services contact and shop ok and I'll select the first link block here go back into styles and I'll add some top top and bar bottom margin so here I'll hold down alt and I'll add some top and bottom margin of 10 pixels so by holding down alt I can add them to both the top and the bottom ok so there I have the menu so now we want to bring the main wrapper in front of the menu so here I'll go to the Navigator I'll select the main wrapper go into styles and for this I'll go to position set it to relative and I'll change the z-index so by setting it to a position of relative we can now yea work with the z-index so we can move the main wrapper in front of other elements or behind other elements so the higher the z-index value the more in front the element will be so for this I'm just gonna add a really high Z index value so it appears in front of the menu so I'll add something like 999 ok so there we have the main wrapper so now we want to add the menu trigger so that when we click it the main wrapper moves to the right so here I'm going to add the menu trigger inside of the section so I'll select section 1 I'll add an element and I'll add a div block and notice it's in the center and that's because we set section 1 we set the display setting of section 1 to Center Center so here I'll give it the class name of D - 9 menu trigger I'll give it a width and height of 50 by 50 and I'll change the background color to this magenta here okay so now we have the menu trigger I'll go into interactions here next element trigger I'll click the plus symbol and also like the mouse click or tap so on first click I'll start an animation I'll add a new time to animation and I'll name this D - 9 first click so when we first click we want the main wrapper to move to the right so here in the navigator I'll select the main wrapper go into interactions I'll add a new timed action I'll say move and on the X because we want to move it horizontally I'll enter in 250 which is the same size as the menu so now we can fully see the menu because the main wrapper is moving to the right okay I'll add some easing of ease out Expo this is just a personal preference you can set the easing to anything you'd like and I'll set the duration to 0.5 so now when I preview and I click we have the menu showing because the main wrapper is moving to the right okay so now on second click we need to move the main wrapper back to 0 so we don't see the menu so I'll close this here and right here on 2nd click I'll start in it and animation and I'll duplicate the first click so I'll select these three dots and select duplicate so here I'll select D - 9 first click - and I'll rename it to D - 9 second click so here on the main wrapper rather than 250 on the X I'll set it to 0 on the X so now I'll preview and I click it opens I click again it closes all right so yeah the easing is easy I'll expose well and it has a duration of 0.5 ok so click the main wrapper moves to the right click again and moves back to 0 and that's it that's how we create an off canvas menu in webflow so one other thing we'll do we will yeah add a cursor to the menu trigger so I'll scroll down and I'll select the cursor and I'll select pointer so that the user knows that they can click on this menu trigger and the other thing I'll show is if I publish this site so I'll publish to select domains and I'll preview if I click we notice we have this horizontal scrollbar and that's because the main wrapper is moving 250 pixels to the right and it's adding this horizontal scrolling to the site so to remove that we want to add some custom code into web flow so here I'll go to pages here on the left and I'll click on this gear icon to edit edit page settings here I'll select the custom code and in the head section we're going to add some style tags so here I'll type in style style and then I'll close the style tag and in between the style tag I'll type in body open curly braket close curly bracket and in between the curly brackets I'll type in overflow - X colon hidden and semicolon so this is what's going to disable the horizontal scrolling within the site I'll leave a share link to this daily interaction so you can see this bit of code so now I'll save and I'll publish again and I'll preview and I click and notice we no longer have any horizontal scrolling to the site all right it looks good so that is how we create an off canvas menu the menu is fixed so I can scroll and it stays in its current position all right and we can also move the menu trigger around here if I select it I can set a position of absolute and I can position it in the top left top right bottom left bottom right and actually let's set the section to relative so that the absolute position div is relative to this section and not the entire page okay so yeah we can move it around there yeah top left and there we go and top right and it looks good if it was in the top right you would want to want to have it fixed and not within the main wrapper so and then you'd want to set the z-index to something higher than 999 so I'll set it to a thousand so we can see it and yeah there we go all right but yeah that's kind of working with the UI and everything and the user experience you probably wouldn't want the trigger in the upper right because the menus on the left so it's just kind of working with the placement of the menu trigger okay I'll place it back in section one and set it back to auto so it's in the center all right looks good so that is it for daily interaction number nine creating an off canvas menu on click all right it looks good so I did cover how to create this menu trigger and daily interaction at number seven where it turns into an X when the user clicks all right so that is it for this video tutorial to view more daily interactions and premium content visit web dev for EUCOM so thanks for watching and I'll see you in the next daily interaction [Music]

Channel: WebDev For You

Views: 1,840

Keywords: webflow, web flow, webdev for you, webflow tutorial, webflow video tutorial, webflow tutorial 2018, webflow for beginners, off-canvas menu, webflow off-canvas menu, webflow menu, website menu, webflow animation, made in webflow, webflow interactions, responsive webflow, daily interactions, interactions in webflow, animation in webflow, webflow website, web design in webflow, web dev in webflow, responsive web design, javascript animations, web animations, website builder

Id: bUBAFKmEqjE

Length: 14min 50sec (890 seconds)

Published: Wed Oct 17 2018