Drawers, Flyouts, and Hidden Menus | A Webflow Tutorial (Re-upload)

welcome my name is Hosea Conda I'm a Chad based web designer and web flow developer and in this video we're talking about drawers so our drawers are kind of like hitting content that Scrolls in from the side of the website to give you more information about whatever it is that you're learning about and they're really useful for a number of things in this example this is just a really small section I built out for like a coffee company where their coffees are presented here and you're clicking on them to learn more but they're also helpful for things like team member profiles or you could even use this if you wanted to build your own cast cast them your own custom navigation bar that has a hamburger menu and hidden drawer for the navigation so this is a really useful technique so I'm excited to share this with you guys again we're going to be building out this little section here in the background we're going to be building out their drawer and how to make sure that the content is scrollable and then we'll be using interactions 2.0 so that we can get the door to slide in and by clicking either on the X or on the body of the website we can get that drawer to slide right back out so I hope you're excited about this a topic I am and I'm ready to get started let's do this all right so we're going to get started by building out the section that holds all of the product cards and then part two we'll be adding the drawer and all the animations that make it work so let's jump into the designer here I'm going to click command e to bring up the search toolbar and then add section and then hit command enter that will automatically help me to get to the selector so I have to click on it every single time and I'm just going to call it sections to make things easy and then I'm gonna give it a height of minimum 100 VH the reason I did minimum instead of height is because by minimum it's going to ensure that no matter what the content is in this section that section will at least be the full height of the but let's say I add content and that content is larger than 100 eh that's okay because the section since it's at a minimum it's going to grow or expand along with the content if I set it to height 100 eh what that means is that if the content exceeds that size any content beyond that is considered overflow and it will cause some layout issues where the product cards will overlap the content below it or the section below it so by setting it to minimum we're making sure that getting the best of both worlds at least the height of the browser but it would grow if it needs to when I hit escape and hit the up arrow to get to the body and click on body all pages and then I want to set the background to my linen color and add that little bit of texture here we go I'm a society cover center do not tile and fixed so just think of it kind of like burlap a texture that we associate with coffee inside of that section I'm going to add a dead look pick command enter and name it my container and up here I'm gonna set the width to 85% a maxed width of 1320 pixels and you'll notice it's kind of hard to tell but it's a line left if I just hit this little button right here and automatically centers the content and then we're going to add a couple of things we're going to add a text block a heading and I selected maybe heading two because this is technically a section and then we're gonna add a paragraph then with my section selected we're gonna add 100 pixels of padding on the y-axis and what I should have done actually is at a dip lock and Ed are heading content inside of there and then with a did block selected create a new class called max width of 500 and there we go so let's just type in a random globally sourced coffees and then we can call this our beans or something like that and then this is a little bit of lorem ipsum get a hip some comm it's just kind of like a funny take on lorem ipsum and we do need to fix this we're gonna give us a class of over line people call it over line or preheader whatever you like I believe it's all caps bold two pixels of letter spacing I think it's our kind of like brown color and I think that's it actually okay okay with the section selected let's make it position:relative and what that means is that in a minute I'm going to add my coffee beans photo and position it absolutely and anything that you said absolutely it's kind of like searches for the next available parent element at such a relative and it kind of positions itself according to that so we're gonna add a image make it our coffee beans pick command enter and call it coffee beans image and we're gonna make it about 50 VW or viewport width and then position absolute and then up to the top right and then I do want to kind of bring it up so that the first bean is kind of eclipsing the top there something like that and then since I'm going beyond the section I'm going to go into section on hit overflow:hidden just make sure we don't have any kind of layout issues and that is pretty much kind of like the top heading part here the reason I used viewport for this image instead like a fixed pixel width is because as we scroll this in that image is going to get smaller and smaller and kind of respond to the width of the browser okay then not inside the container but in this section we're going to add a collection list and let's go ahead and Link it to products I've I previously went in and added all of our products so you wouldn't have to watch me do that and I do want to sort by date added or created because I want Yemen to be the first one it's gonna be our beginning Pig if you will and then with the collection list we're gonna call this product grid and I know that it's sixty pixels away from the heading here and there are 30 pixels of padding on either side because these are cards and we want them to be pretty big we want them in to make a strong impression on the user I'm not using a container so no matter what the product cards will fill up the entire width of the browser then with that same CSS class selected I'm going to hit grid and I know that I want 30 pixels of padding in between the columns and 60 pixels of padding between the cards and then I want three columns and we can go ahead and delete that last row because it'll automatically add the rows for us as needed for the collection items all right and then we're gonna do a couple of things so I like to leave these collection items alone just kind of personal preference so I'm going to add a div block and call this product wrapper and then I want to add two things in the product wrapper first is a product card oops sorry you did you're doing that here yeah and then not in the product card itself but going back up to the product wrapper I'm gonna add a dip block and call this drawer wrapper so you can kind of notice if you look here there's two different dip blocks or if you look over here under product wrapper there's two things and right now we can go ahead and hide our drawer wrapper we're gonna be working two product card all right so with the product card we're gonna be adding an image the title of the coffee and the price and I want to talk about three strategies for how to do these images one is the image field when is a background image and then one is a image field but with a little bit of custom code so so the first strategy is using the image field and essentially what I do is just go ahead and add this image here and then link it to the CMS and call it a day the problem is that I'm kind of assuming that the client has some way to edit these photos and they'll always upload photos in this same exact ratio the 1 to 1 square ratio and my experience has been that you just can't expect clients to do that we kind of have to make it a little bit more foolproof for them so if you know that the client is pretty technologically savvy and that they maybe even have access to high-end editing software or whatever it is it maybe you can get away with just using that image field but I found that you like I said you have to make it more foolproof the second way you can do it is use a background image so create a div block kind of show you here death block just for the sake of explanation I'll call this ratio 1 to 1 okay and then what is gonna be 100% height is actually going to be zero and padding is going to be 100% and then we're gonna add a background image decided to cover do not text from the middle and then all I have to do is get background image and select my product image okay so now we have the images the issue with this and whoops I just noticed that the coffee bean is overlapping the first product card but you know what I kind of like it but I I want the product cards to be selectable and since this is overlapping the predacons it's actually going to make it this this overlapping section is not going to be clickable is the image is on top of the grid that's got a product grid set this position to relative and that will push the beans behind the product grid okay so the issue with the background image strategy is that we don't have access to alt text so alt text is like if I click on this hit on settings I can add alt text so image of a coffee beans strewn about okay and they have two purposes the first and most important is screen readers so if you're visually impaired and you're going through this site the screen would tweet err obviously the image will not be seen by somebody's visually impaired and so the screen reader will pull the alt text and read it as a part of going through the website and so it's part of having an accessible site is to have alt text in your images so if we use background image for these it means that we're not being accessible we're not making easy for someone who's visually impaired to go through this site secondly alt text is good for SEO because if we happen to mention any of our keywords like coffee then it's gonna help us to rank better in organic search results that should be secondary to making it easy for somebody who's visually impaired to go to this site but it is a concern okay and then third the reason that I don't prefer not to use background images is that we don't get to take advantage of web flows source set technology where basically depending on the size of the browser it serves up the most appropriately sized image so unmown web flow will serve a smaller version of the image than it will on desktop on desktop it'll serve up a larger image that it's nice high definition so by using that current image we don't get to take advantage of any of that stuff so what I'm going to do is actually just get rid of the background and we're gonna try our second strategy and we're gonna make it position:relative and then inside of this ratio 1:1 I'm going to add an image element and let's go ahead and get the image that we can see what we're doing a little bit and you can see that we can either write custom alt text but that will be alt text for every single photo or we can get alt text from products and I didn't I could have added a field that would be pacifically for the alt text but I'm just going to use the name for now and then I'm gonna get so you can see that currently they're all different sizes so I'm going to call this image 100 because I'm gonna set it to position:absolute full and 100% by 100% okay I'm gonna go back to ratio 1:1 and make sure it's relative okay perfect so now my images are all the right ratio but you can tell that some of them are really ugly and that they've been stretched or shrunken to fit inside of the boundaries of our ratio box so what we can do is like I said we can add a little bit of custom code and so we're gonna add our style tag here and that means that it's on the browser hey this is CSS we're gonna call that image 100 CSS class that we created opening and closing brackets and then we're gonna use object it's cover if I did that right all of our images are now showing correctly and that object fit cover essentially what it's doing is it's kind of the same thing as background cover for background images but it's applying it to how the object fits inside of its parent element you can also do contain and some other things if you want to look it up but anyways what that means is now we we have our images displaying no matter what the client uploads it's gonna be in the right image ratio we get to have all those benefits that we talked about like alt text and source set and all that good stuff so alright inside of the product card let's keep going we're gonna add a new div block and this is really I want to encourage you to think about okay how can I build CSS classes that can we use over and over and over again and so I could call this like product caption wrapper or something like that but I know that I want to use flexbox space between to position the elements and so instead of naming a caption wrapper I'll name it Flex between so that if I needed to I could reuse the same element over and over and over again and then start it to horizontal and space between alright and then let's add a essentially two text blocks elements okay so the first one is going to be the name of the coffee and the second one is going to be the price next with ratio 1:1 selected let's go ahead and click into the symbol and sketch here and figure out how much spacing it is and it's 20 pixels of margin bottom there we go okay and then let's go ahead and style this stuff I think what I might do is since this is a heading two and these coffees are pretty important I may switch to using a heading and use heading three and get rid of this guy and then style the h3 here so I want to set this to zero I want to set this to zero and then let's get the styling of this guy so he's 20 to 30 extra bold I was 22 let's do 1.5 m or something like that whoops 1.5 yeah and I think that's pretty much it okay and then with the price I don't know if this has a special oh okay I guess it does okay so let's name this price 22 pixels 1.5 m and it is medium I think we can just stick with normal and that's fine okay and then we forgot to assign this to name in products okay awesome I think that means that we're done with the product grid let me just double check okay I think it's looking pretty good let's go ahead and preview what we've done you can see that on my screen which is like I guess this is 1900 and 1920 pixels wide these cards are pretty big but I like but I like when your products are nice and big and the photos are easy to see so this is looking good and maybe the last thing I'll do is with image with product card selected I'm gonna add a pointer cursor so that the user knows this is a clickable element so now when I hover over the entire card it's a clickable element alright so that ends part 1 and the next section we're going to be building out the drawer and then we're going to be using animation to make it all function together and make it look like one of those flyout drawers welcome back to part two where we're going to be building out their drawer and then using animation to slide it in and out and the first thing we're gonna do is actually limit how many of these product cards are displayed I just learned the hard way that since we're using the CMS and there's technically I think nine or ten of these product cards if I added the product drawer and I started working on it there would technically be ten iterations of that drawer since there are 10 CMS collection items so to kind of add the drawer i need to temporarily limit how many of these items i'm a lying webflow to show so I'm going to show one only and then again in the future we'll just add we'll just take away that limit so that all the cards show up but for now it's just letting us work on one at a time alright so now that we've got the product car done we can work on the product or I'm going to take off a display / display hidden and we're gonna send a to position fixed and full width fix what that means is that no matter where we scroll on the site this drawer wrapper is always going to be here in view and that's what we want we don't want that as the user Scrolls the content inside of the drawer disappears we want it to always be in a view the next thing we're going to do is set it to flex horizontal is fine and all of these settings are fine and the reason that we did that is we're gonna add to dip blocks inside of our drawer wrapper so if I click here in the body you notice that drawer wrapper is selected so the drill wrapper is sitting on top of everything I could even go ahead and set a high Z index of like 99 or something like that just to make sure it's sitting on top of all of the content and then let's leave these Dib blocks so this first one here we're going to call wrapper close and set it to expand and then this one here we're gonna call this drawer and it's gonna be set to let's do minimum width 50 viewport width and we'll set it to don't shrink or grow and that's going to ensure that it's at least 50% of the width of the browser but if it needs to grow again just like we did with this section it's gonna grow to make sure that the content can fit inside of it and then we've got a not the text color but the background color is going to be our tan color here and we've got a texture for our drawer actually I'm gonna I'm gonna leave it on not fixed and that should be fine all right okay the next thing I'm gonna do with their drawer whoops my sketch file slid to the right he let me move it over and I want to make sure I get the proportions correct here so I know that there is 80 pixels of padding top and bottom and I'm gonna ignore the close icon here for a second and there's 80 pixels of padding on the y-axis all right so the next thing I'm going to do is go ahead add a heading and a little make the call this h3 and we're gonna get text from the CMS it's gonna be the name so you see Yemen red Harrah's pulled up and we already set the styling for h3 here and I want this to be an h3 because again it's under the global source coffees section so we're trying to create a nice hierarchy to our content but the styling is different so that's okay we'll just call this drawer h3 and that way we can give it a little bit of different styling and it's gonna be 38 1.5 38 we've got a large space of 1.5 and all caps okay that looks good there's a number of ways to do this line down here so I could have this wrap inside of a div block and then the there would be a border bottom or I could just simply add a dip block just below this and I'll call this HR and it's gonna be with 100% and I'll give it a border bottom I believe it's just nice brown color and I think that looks good let me just double check the spacing here there's 20 pixels of oh sorry 30 pixels of spacing on most of them so let's go ahead and add that here 30 thirty and so I do want to make sure this is a zero okay then inside of the drawer I'm going to add an image and we're gonna get the image from the country image in our CMS and of course it's way too big so let's give it a combo class and just call it country image and it's gonna have a height of 300 and we use auto margin oops apparently that didn't work so let's go ahead and set it to text-align:center actually instead of doing that because although this is left-aligned I think what I'll do is add dip block place the image in there and then text-align:center the parent div block and there we go then inside uh-oh luckily that worked because this stuff down here is Center aligned so inside of that same text-align:center box we can add a text block and call it over line and then another text block and then this is going to be the country of origin whoops I think that's right actually that's the region region of origin and then this is going to be the country of origin okay and then with the country image selected let's give 20 pixels of padding on sorry of margin on the bottom there's to push the content down and then this is going to be a CSS class that we use throughout their drawer so we can just call this drawer text and I'm just going to stick in it's 22 it is our darker color here or actually that's not whoops okay so luckily we can save that drawer text we can just delete this and let's add a new heading I will use an h4 I get a text from country of origin and then we can style our h4 here this is 32 and I think everything else looks good okay so copy the HR line and paste it into the coffee drawer and I'll show up below the content there and you see that as I scroll the drawer is staying fixed which is exactly what we want all right next is adding this content down here and so I'm gonna add a tip look and call it two columns and let's use the typographic column feature here and then inside of this we'll add two divs and just for this to work they need to be in line block so let's go ahead and add that there okay they're showing up side by side but that's because of the inline block setting but as we add content this will shuffle over to the right-hand column okay actually you know what I'm gonna do I changed my mind I think I'm just gonna get rid of that and make these with 50% so they should be side by side now okay and then let's add a text block actually I'm going to add a new div block and these Dib blocks will kind of hold these pieces of little stats of content and first one is farm texts and now we can use drawer text so you kind of started getting it ready so let's click on that 22 one extra bold all caps all right and I've got text and this is going to be the whoops and quite see what's going on I think if I select it here I'll be able to see the whole drop-down field and this is the farm perfect and since I added that Doug block here let's go ahead and call it like stat rapper I can add three of these I think and then make sure that the same spacing is below all of them okay now we're running into an issue and it's actually a really good that we ran into this issue so I'll show you guys how to do this but I'm currently trying to scroll down on my mouse and I can't that's because this element is position fixed so I can't scroll down to see what text this is so if I click on drawer and set the overflow to scroll it's going to let me scroll down even though this is a fixed element so I can see the info down here and that's really important to set that in just in case that your content exceeds the height of the browser so again we're running into that it's the third time I talked about overflowing content so anyways next is variety and I'm gonna actually go over here to change this set it there and I think this is altitude unless I'm mistaken how to - oops and there's all right last but not least is notes let's go ahead and copy the rapper and then click on the second inline block here and add it there and for whatever reason I think I'm just going to use flexbox for this so we'll call this two column flex there we go and there needs to be 30 pixels of spacing right here so I think we can just take drawer or start rapper and that 30 pixels our spacing there okay great next up is so for this for this um the notes I actually used a rich text block and I want to show you why times if I go to add our rich text get text from products and D notes and then call that drawer text okay now if I had out of just a text field and added these four elements whenever I added it here it would just show up as forwards side-by-side so the text field doesn't recognize line breaks but rich text fields do if I go into the CMS quickly and click on Yemen you'll notice that oops let me take off bold you'll notice that there are line breaks I introduced and in description it just won't let me do that so we have to use a rich text block for this particular section and I'm gonna take that off and then I'm actually gonna go to preview let's copy this because I need to take off the I need to take off the CMS on my word where is my content okay let's go ahead and delete that temporarily and a rich text there we go okay and then call this drawer text and now I can individually access the paragraph which is what I wanted you so what I'm able to click on all paragraphs nested inside of drawer text and it needs to be not Roboto but it needs to be darker grotesque and it shouldn't be that 60% grey needs to be our full black and not it's looking at exactly like what wouldn't you get to look like so now we can go ahead and get text from products then let's go ahead and copy this HR line and with this particular line since this has that 20 pixels of padding at the bottom let's go ahead and click it and do a combo class of margin chop ten only and now that spacing here is correct all right and then the last thing is to add a paragraph and it's kind of bugging me that this drawer is growing so I think maybe sort of minimum I may go ahead and just make this 50 VW here so that this paragraph doesn't grow and then one thing I want to do is well let's go ahead and align it to the CMS description but anything to be dark paragraph whoops I don't like it to have that 60 percent opacity on top of this tan color because it doesn't have enough contrast okay so unless I'm mistaken I think we've got all of the content and we just need to add the close icon okay so let's do that so it's out of our drawer we're not close and we're gonna call this close icon wrapper and with drawer selected let's make this as position:relative so that we can absolutely position the close icon in the right-hand corner and your site at 2:40 right now you can't see it because it's just an empty tip block okay and this is going to be 64 pixels square so we can do that here then we're gonna add a border of our black color and so I click off I think you should be able to see it now and we're gonna make the radius 50% so that it's a perfect circle then we're going to make it flex box so that we can add an image inside of it whoops I didn't mean to export the circle so let me quickly grab these two icon close and export this sorry about those guys and I thought I had exported it already but apparently not okay there we go and then I do want to set the dimensions here and now we've got our close icon and we can even set a hover thing if we want so maybe on hover the background takes on this light color and give it a transition of background color so if I preview this then we've got that nice transition color and I can scroll up and down to see more of the drawer maybe the only thing we need to do is give this the pointer cursor so that people know it's a clickable element there right so that ends the second part of this tutorial in the third section we're going to use the interactions feature and web flow to make this drawer slide in an app alright guys welcome back to section 3 of this tutorial it's actually the following morning and I have a lot more energy because I was recording around 10 o'clock last night and I got too tired but anyways what we're doing now is we're going to be using interactions 2.0 to animate this drawer in and out of you so the first thing we're gonna do is actually I've already hit done it here but in our collection we're gonna limit how many items that collection is displaying if you look at this shadow in the middle you'll notice that when I limit this to one the shadow got a lot softer and that's because there this is a fixed element there are actually really eight or nine however many party cards there are there are nine drawers all sitting on top of each other and that especially the larger the collection gets it can slow down web flow and just make it a little bit painful to do all these interactions so I recommend temporarily limiting how many items are are to one and then removing that once you're done all right the next I'm going to do is let's talk about the triggers for our animation so in short the rule is that the element that triggers the animation to close the drawer cannot be nested inside out the element that triggers the drawer to open okay so let me give you an example of that this close icon we're going to want this to be a trigger element to close a drawer of course well if this were nested inside of the trigger element that opens the drawer the drawer would actually never close when this is clicked because even though I'm clicking on this element specifically I'm also clicking by clicking on this all of the parent elements that precede it and so it would continue to register that both the clothes in that open animations were all both being clicked and it would never close dror so they had to be sibling elements that's why if you look at product rapper product car which is going to be our trigger element to open the card is a sibling element of drawer wrapper you could change that so you could let's say you just want on the image itself to be the trigger oh I could move drawer wrapper inside a product card and it could be a sibling of the image either way as long as the clothes trigger elements are not nested inside of the opening trigger elements alright enough theory let's get into this so the product card selected let's go to our animations panel and start a new one based off of mouse click and then start an animation oh I was working on this a few minutes ago just a practice and we're going to call this a drawer open and this is parts going to go pretty quickly actually withdraw or wrapper selected that's everything on screen here I'm gonna click move and I want to set it to 101 V W and that means that it's moving to the right the 101 percent of the viewport width in other words off-screen and I want that to be the initial state of where the drawer is so I'm gonna click set as initial statement you'll notice that under class it says only siblings with this class that's exactly what we want and then we also want the opacity to be set at 0% we're gonna add a hide show and you're gonna see why in a second but it needs to be set to flex because the wrapper was initially set to flex box but in their closing animation I'm going to hide the drawer using display:none and so I need to make sure that the hide show is set to flex I'm open then we're gonna move it back into view so I'm gonna set this to 0 DW ok so I stop back and V but you can't see it because we need to just set the opacity to 100% all right so now we've animated everything in let's go ahead and click these two elements and 0.5 seconds is probably fine but let's use ease and then if we test it out that is a nice smooth animation all right we can also what I'll do is draw a wrapper let's go ahead and hide this and we can test this out by clicking on there and our drawer is working as it should all right so let's go ahead and set this back to the Flex box and then we need to set up our animations to close the drawer so there's gonna be two trigger elements one of course is this close icon over here on the top right and then wrapper close is also going to be a trigger element and that's because a lot of people assume if they click off of the drawer the drawer will close so this is technically a element it's not actually it's blocking that content below but unclick it's gonna slide the drawer right back out all right so let's go to animations on mouse click we're gonna start an animation and we're going to duplicate drawer open and set it to drawer closed we're gonna delete these to move the hide show down below and then let's go ahead and style the animation so instead of going to 0 we need to side to 101 cause we want it to move out of you again we need just at the opacity to 0% and we need to set the drawer wrapper to hide okay now nothing happened to the elements here and the reason is because this is still set to only siblings but drawer wrapper is not a sibling of drawer closed and neither as the close icon so really we need to set this to all elements with this class now you can see that everything was out of the way so I can close that and now we can just do mouse click the clothes icon here starting animation and I can use the exact same image that we created all right so let me go back up to draw a wrapper and let's go ahead and hide that let's click on the collection and let's remove our oops limit items what computers being just a tad sluggish I think it's waking up like me preview this and if I open that click the drawer opens if I click on the X it closes click on this card it opens click on the body and it closes so our drawer is working just as we expected it to doing what we need to and working beautifully and we can scroll down to see the rest of the content and there we are that's the end of this tutorial I hope that you guys enjoyed learning about how to work with drawers they're so useful and if you have any ideas for the next video just let me know in the comments below and I'll consider that and I'll be thinking about what would be a fun video to do but anyways also want to mention I've been so encouraged by your guys comments so please keep letting me know what you enjoy about the videos and please subscribe and make sure that you're aware of any other videos that are uploaded so that we can all keep learning about what flowed together so anyways hope you guys have a good one and I'll catch you in the next one

Channel: Jose Ocando

Views: 9,058

Keywords: webflow, tutorial, web development, no code, drawer, flyout, menu

Id: 4nbHG-Aa20g

Length: 49min 55sec (2995 seconds)

Published: Mon Aug 05 2019