Pure CSS Hamburger Menu & Overlay

[Music] this video is sponsored by the ultimate freelancing bundle by study web development comm which gives you everything you need to start your own freelancing business including 130 page in-depth guide invoicing and client proposal templates website templates an SEO checklist and much more visit the link in the description and use the code brad 25 to get 25% off hey what's going on guys so in this project we're gonna be building a landing page that has a CSS only hamburger menu and I'm sure most do you know what a hamburger menu is or you've at least seen them they're these menus that have the three lines kind of looks like a hamburger and you click it and then some kind of menu opens so sometimes it can slide over from the side or the top in this case it's going to just come right from the middle so we're going to have CSS transition to give us that effect also to give us the animation on the hamburger itself you can see when I click it it turns into an X we also have this little animation when I hover over it and yeah that's what we building and it's completely responsive so if it's a smaller screen mobile screen or something yeah so that still looks pretty good and if this looks familiar to you you've probably taken my HTML and CSS course on udemy which I'll put a link in the description this is actually one of the smaller projects in that course now we're gonna build a start to finish including this whole showcase area here so what I'm gonna do is put in some timestamps if you just wanna if you want to skip the HTML or if you want to skip the whole showcase part and go right to creating the menu alright otherwise you know you can watch the whole thing because I don't I don't like to I like to start from scratch in most of my projects and a lot of guys probably know that I don't like to just throw you into you know into the middle of a project so let's jump into vs code now I do have the files created so if you're gonna follow along you can go ahead and create this simple file structure we have an index.html we have a CSS folder with a style dot CSS for our main styles and then menu dot CSS just because there's a of CSS that goes into creating this menu so I figured I'd give it its own file and then I just have an image folder with this beach image here of course you can use any image you want I will put a code pen in the description that will have this image if you want to use this one all right so let's go ahead and get started in the way that this works without JavaScript just show you real quick the hamburger menu actually has a checkbox okay so we're using a checkbox with the class of toddler and that's how we're toggling it is we're styling the checked State okay usually you'll use JavaScript to do stuff like this but in CSS you can target the checked State so that's how we can add specific styles when it's checked all right so that's what we're gonna be doing so we'll start off with the HTML and like I said I'll put time stamps and in case you want to skip this part but the HTML is pretty simple so let's go ahead and create our head body tags and boilerplate and for the title I'm just gonna say hamburger menu will say CSS hamburger menu and we want to link our style sheets so let's link CSS slash style and then right below that we'll do CSS slash menu okay and I'm using i'm gonna be using d Roboto font so let's grab that real quick from fonts dot google.com that's fine all right so I want Roboto which is his first one here so we'll click that will grab the link and yeah we can just copy that and close this up and we'll put that right above our style sheets alright so in the body we're gonna basically I have two sections the menu and then the showcase which is the the landing page so the menu is going to have a class of menu wrap all the way around it so around everything and then we'll have our input with the type of check box and we don't need a name or here we do need a class and I'm gonna call that toggler all right and then underneath that we're going to have the class of hamburger and inside here we're going to have just an empty div like that okay and then underneath that we're gonna have a class of menu and inside menu we're going to have two more divs and you'll see why we have these later on when we get to the CSS okay inside that div we're gonna have our UL and we'll have our list items with our links they're not gonna actually go anywhere let's just say home and let's do bout and services of course you can for whatever links you want here and then contact all right so that's it that's our menu HTML so let's go under the last div here and let's do I'm gonna use a header tag here you can use whatever you want I'm just gonna use header and let's say showcase class showcase and then we're gonna have a class of container which is going to be our basic container to move everything into the middle and so on but also have a class of showcase - inner which will wrap around the content so we can Center it using flexbox so inside here let's do h1 we'll just say welcome paragraph I'm gonna do lorem xx and then we just want a link formatted as a button so I'm gonna give it a class of BTN and for the text we'll just say read more all right and that's it that's the HTML so I'm gonna open this with my live server extension and that's what it's gonna look like and notice we have the check box at the top so let's actually make this smaller just so we can have both on the same screen here as we work and I'm gonna close up my sidebar and we should be all set with the HTML so we can close that up as well and now we're going to style the the main showcase area a landing area whatever you want to call it so up at the top here in style dot CSS I'm going to set some variable on the root scope I do have a video on CSS variables if you've never used them before but they're pretty easy we just used double - I'm gonna set the primary color variable and I want to set this to an RGB a value so that it can have some transparency so red green blue alpha will allow us to assign the the last value is the the opacity so let's do 13 red 110 Green and 139 blue and then for the opacity 0.75 okay so that that's that greenish bluish color and then we're also gonna have an overlay color which is going to be the background when the menus open that darker color which also needs to be transparent so we're going to do our GBA for that and let's do 24 39 and 51 and then the transparency will do 0.85 okay and then I'll have one more variable for the menu speed so that we can easily change that if we want that's going to be 0.75 seconds so those are variables now let's do some of the core styling I'm gonna add a reset so I pretty much always set the box-sizing to border-box and just zero out the margin and padding okay and then for the body remember we're using Roboto so let's do font family and Bato and sans-serif okay and I'm gonna set the line height - let's say 1.4 and if I save that you can see those Styles now take effect so let's do the container which just kind of pushes everything to the middle and we're gonna set the max width to kind of a narrow width I'm just gonna do 960 and then set the margin to auto which will move everything to the middle and set an overflow of hidden and set the padding on the sides to 3 room okay so now I'm pushes that to the middle and I know I'm not explaining every single little detail of the CSS but I'm guessing that you guys know at least a little bit of CSS if not check out my CSS crash course or you know take the udemy course the HTML and CSS from the beginning which is a 20 that gets a 20 our course so now let's do the showcase so for the showcase I'm gonna set a background color and I'm gonna use the primary color so to use a variable we need to do var and then put in whatever that variable is okay and I'll set the text color to white so if I save that it's gonna look like that now I want this to take up the entire screen and just ignore the menu for now that's gonna be position fix so this will move up afterwards so just focus on this part down but we want this green or this blue whatever this color is to take up the whole screen here so let's set a height of 100 viewport Heights 100 VH I save that now it takes up the whole viewport all right and we want to position this relative because the overlay is gonna be positioned absolute with inside of it or I should say before it now to add the overlay we're going to use showcase with the pseudo selector of before which kind of creates like a ghost element that we can style you can even add content but we just want to add just empty set of quotes here and then let's put the background as an image okay we want that beach background or whatever you want to use so IMG / showcase and then we're gonna set the background repeat' value to no-repeat the position to Center Center and then let's cover the entire thing all right so if I save that nothing happens what we're going to do is position this absolute okay so position it absolute that's why this is positioned relative and we want to set the starting point of zero left zero so top corner and then set the width to a hundred percent so it goes all the way across and the height whoops what I do it and the heights also to a hundred percent so basically we want this to cover this whole area so if I go ahead and save this what happens is it gets put on top of it okay so this this is this image is now on top of the content so to move it in back of it we're gonna just set the Z index to negative one to push it back alright so now it's behind it the reason we can see it is because the showcase background color is our GBA so we can see through it okay and if I go up to the primary color I could change this to like you know 0.45 and now it's more transparent if I set it to 1 you can see it's completely solid so I think that 75 is pretty good but of course you can change it alright so now let's focus on this content here style that so we have our showcase class and then we remember we have a showcase - inner which we're gonna we're gonna use flexbox to Center everything so let's do display flex now if I do that automatically it turns into a row a horizontal row so I want to set the Flex direction to call them alright that puts it back and then we can use align items to Center let's do justify content to Center and text a line to Center alright now if I do that it doesn't Center it this way because this the element that it's in doesn't have a height so we want to set the height to 100% the whole thing and save and that didn't work because I need a semicolon and there we go and it might not look Center just because of the menu it's pushing everything down but it's it's centered within this and we're going to just change some styles on the text here the heading and so on so let's do showcase h1 and let's make that heading bigger so I'm going to do a font size of 4 R M and let's target the paragraph and let's make that a little bigger so we'll do font size 1.3 r m and a REM unit just is just one REM is equivalent to the pixels of the root HTML element which by default is 16 pixels okay I actually have a video explaining remin hem units and vh + BW units if you're interested so the last thing we have to style in this showcase is the button so I'm just going to do BTN and let's display this as an inline block so that it works on on links and so on and then border we're going to set that to none the background I'm actually going to use the I will do background color and I'm going to use the primary color so let's do VAR primary color and the text color is gonna be white padding will do 0.75 REM top and bottom and then let's do 1.5 REM left and right and then I'm just going to add a little bit of margin to the top to push it down all right so I saved that that's what it looks like let's get rid of the text decoration so underline and then for the hover lets do dot BTN colon hover I'm just gonna set the opacity to 0.7 okay so if I hover over it makes it a little lighter now I just I want it to be smooth so I'm gonna add a transition on the opacity property let's do one second and we'll just do ease in and save and now you can see that it happens nice and smooth instead of just flicking to the opacity being less all right so that's it for the showcase area now we're going to move on to the menu so in our menu CSS at the very top let's add the menu wrap which wraps around everything and we want to position this fixed okay if I can spell position so position fixed because we want it to be always at the top even if we could scroll down which we can't but if we could it would still stay at the top so we want to do top zero and let's do left zero and then to make sure it's on top let's do the index one alright so we'll save that and now you can see it's on top of the rest of the content so now let's do the toggler which is the checkbox so menu wrap toggler and we want to position this absolute and set it to top:0 left:0 we're going to be doing this with a bunch of the elements and then z index of two and the cursor should be a pointer if we hover over it and the width is gonna be 50 pixels and the height is gonna be 50 pixels however we want to make this invisible okay we don't want to see the checkbox so we're gonna set opacity to zero and if I save you can see now the check box is gone okay it's it's still there it's just hidden so we have the class of hamburger underneath so let's grab the menu wrap class and a hamburger and that's also going to be positioned absolute okay and it's going to be top:0 left:0 and then we're going to set the z-index to one and set the width of this to sixty pixels and the height to sixty pixels okay so this is that square that the hamburger that the lines are going to be inside of so we're going to set a padding of one rim because we don't want the lines to be right up against the side and then a background I'm going to use the primary color so we'll use our variable it doesn't show up in the intellisense because the variables are actually in the other file however they will work because if we look at our index.html the style.css is above the menu CSS so we can inherit those variables alright so we'll just have to type it out primary color okay and then we're going to use flex here to align to the center so flex and then align items to the center and let's justify content to the center and save and now you can see that outline of the box and it's see-through because we have the primary color which has that alpha value all right so now let's work on the lines inside of the hamburger so say hamburger line this is what we're gonna do here is gonna be the middle line okay so let's do menu wrap and then we want to target hamburger and we want the immediate div and the way that we can do that is with a greater than sign and then the immediate div so we're targeting in the HTML might as well just leave this file open just to show you so we want to target this div right here and that's what we want to put the line on so let's say position:relative and we want to set the width of the line to 100% the height is going to be 2 pixels want to set a background color of white and let's add display flex so we can add a line items Center and justify content center and save and now you can see we have that that middle line now to create the top and bottom lines what we're going to do is take this selector and we're going to use the before and after pseudo selector okay so we want to go right here and do : before and then let's also do the style will also pertain to : after alright so we want to make sure content we add content and that's just going to be empty quotes and then we want to position this absolute alright we're gonna set the z-index to 1 and I want this we're first going to move both lines above okay so I'm going to do a top position of negative 10 pixels which will move both of them above to begin with and where we also want to set a width of a hundred percent and a height of two pixels just like the middle line and then the background is gonna be white but we're just gonna will inherit okay so if I save that now it looks like there's one line above it but there's actually two the it's both the before and after so to create though the last line I'm just gonna take the after selector here and I'm simply going to change the top position now to 10 pixels instead of negative 10 which will move it down and now if I save you can see we have our three lines alright and just to put some comments in here so you know exactly what is going on this is the top style for the top and bottom lines and then this right here moves moves line down all right so now that we have our lines we want to be able to animate them and we want that wanted to animate when we click on it okay when we open the menu which will work on the menu in a little bit but remember this is a checkbox so when I click it actually puts it into a checked State and we can style that in CSS so what we'll do here let's say toddler animate oops and we're gonna target menu wrapped toddler but we want to target the checked state so we can do colon checked okay just like we can do colon hover and we can we can test for different states and then we want to do plus hamburger because we don't actually want to style the checkbox we want to do the hamburger immediate div okay so just like we did above and then to rotate it we can use the CSS transform property with rotate and this takes in degrees we're gonna do 135 degrees all right so now if I save this and I go up here and I click you can see that it's rotated 135 degrees so let's see I think did I forget something here yes I did they forgot the transition you see how it just kind of flicks to that I want it to transition into that so right on the hamburger div here I'm gonna add in transition on all properties it's because why I did this it's not it's a transition on all properties will do 0.4 seconds and ease and save and now when I click we get that nice transition effect instead of just flickering to to that rotation all right so obviously that's not what we want we want an X so in order to do that it's pretty easy we're just gonna grab this here and let's say turn lines into X so we'll paste this in and we want the before and after so before and after and set the top position to zero and then we just want to add a transform on this to rotate 90 degrees okay because we want it to be in an X fashion so if I save that and now I click both of them go 90 degrees and turn into an X so pretty easy not not too much CSS at all to be able to do that now I also want the effect where if it's checked okay right now it just think the check box is in its check state I want it to hub to rotate a little bit when I hover over it so let's do that let's say rotate on hover when checked so to do that let's grab this selector except we will only want this to happen on hover so we can add again : hover okay so we're targeting these different states within CSS and we just want to set transform again and then rotate and I'm gonna rotate 225 degrees okay so I save that it's in its check state right now so if I hover over it rotates 225 degrees alright but it doesn't when it's in that when it's not checked all right so now we want to do want to style the menu okay these links right here where they need to be in the middle they need to be large and then we have the overlay and then we need to add the functionality where it only shows when we click this okay so let's start with just styling it and then we'll do the animation or the transition stuff like that so we're gonna target let's see menu wrap and then the class of menu okay remember we have that class of menu around these two divs and then the UL so for the for the main menu class we're going to position this to be fixed and set the top top left zero and with 100% we're basically doing the same thing we did with the overlay we want it to cover the entire area now initially it's going to be set to visibility:hidden but I want to be able to see it so I can style it first I'm gonna I'm gonna put that style but I'm just gonna comment it out for now alright and then let's set overflow to hidden and let's set the display to flex and align items to center and justify content to the center so now if I save you can see the menu is now directly in the middle here you can barely see it but we're gonna fix that so now let's style the immediate div which is this first div within that menu class so the way that we can target that is with menu and then div like that alright so the background is gonna be that overlay color which is the dark color which is transparent so let's do overlay - color alright we want to set a border radius cuz I wanted to have that circle effect although you don't have to do that but I'm gonna set that to 50% and then the width and the height I'm gonna set to 200 viewport width because I wanted to go outside of the screen so let's say height also 200 viewport widths okay and then we want to set display flex but we want to set the Flex property and the none otherwise it's going to give us this weird oval type of love look so let's align items to the center justify contents I know this is that's pretty repetitive but we want to make sure everything's centered correctly now the way that we get that that effect where it shoots out from the middle is by using transform and then scale okay transform you can do rotate scale skew you can get you can do different effects now by default we want it to be set to zero all right now if I save this you can see that it's gone because scale zero means that it's it's scaled down to zero what we want to happen is when we click this we want it to then scale to 1 and also transition so it's nice and smooth so again I'm gonna comment this out for now just so we can still see it and notice that the overlay color is now shown is now in the background alright so in order for it to transition smoothly we need to add a transition I'm gonna say on all properties 0.4 seconds and ease okay next thing we want to do is that second div so I'm going to copy this and just add in that so we can target the next div and we want to set the text align to Center and we're gonna set a max width to 90 viewport widths and then a max height of that div will be a hundred viewport Heights all right and then we're gonna this is also going to have an opacity of zero which will make it disappear but again I'm gonna comment that out just so I can see what the hell I'm doing now so last thing is just the transition I'm going to transition the opacity 0.4 seconds and ease okay so the next thing I want to target is the the list items here obviously we don't want them to be purple and small and have bullets so we're gonna grab this and then inside that div we want the UL li so let's set list-style:none get rid of those bullet points and color to white now the color this pertains to text these are links so that's why they're not white but what we're going to fix that and then the font size I'm gonna set to 1.5 Ram make that bigger and let's add padding of one rim to separate them oh okay so now we want to target the links so I'm just gonna copy this and we're just gonna add on the a tag here and the color I'll just do and tear it which will make them white and we want to remove the text decoration so remove that underlined so that's a nun and I'm also going to add a transition on these for the color and 0.4 YZ seconds and I should probably spell transition correctly okay so let's see the neck now we have this we have the effect we want when we click it but we need to make it so that you know this is not here initially and then it pops up when we click this so we want to go back and uncomment everything the opacity okay so that will take away the links uncomment the scale to zero and the visibility to hidden all right so now say right here we'll say show menu so we're gonna do a couple different styles here that will allow us to now show it when that the X the hamburger menu is clicked so first thing we're gonna do is targets menu wrap and we want the toddler when it's checked and we want to target the menu inside whoops it should be dot menu all right and we're going to set the visibility to visible because now it's checked it's clicked so we want visibility to go from hidden which it is initially to visible all right and then we also need to set the scale but the scale is on is on that first div so we're gonna copy this selector right here and we're just gonna say greater than sign and then div and we're gonna set the transform scale value back to one which is its its original scale and then the transition duration is where I'm going to add that remember we have that menu speed variable so we can easily change the speed that which it opens so we'll do menu speed so now if I click that we get that scale to 1 and it transitions nice and smoothly now we still can't see the links because that those are in the inner inner div so we'll copy this and target the second div and that has an opacity of zero to begin with now we want to set it to one and we just want to add a transition on the opacity zero point four and all right so that should do it so now if I click that awesome so if it's big like this you can see it goes right out of the screen because we set number the height and width to 200 viewport widths and if it's smaller like that you can kind of see the outline of the circles and you can change that if you want if you want to extend that height and width or whatever but I kind of like that I like the effect but yeah so that's it guys hopefully you enjoyed this and of course you can use this in other projects I will put a link to the code pen in the description so that's it if you like this video please leave a like and I don't like to mention it too much but I do have a patreon account I have the link in the description so if you want to support the channel for even $1.00 per month it's greatly appreciated it keeps me going you know YouTube ad revenue isn't isn't the best right now but that's it guys thanks for watching and I'll see you in the next one hey guys one of the best if not the best resource I can refer you to for starting a freelance business is at study web development comm slash freelancing the Creator Kyle shared it with me and I can personally vouch that this bundle is well worth it you get 130 page guide to freelancing and it comes with things like invoice templates client proposals HTML and CSS templates a portfolio website access to a private Facebook community and much more so use the code Brad 25 to get 25% off today

Channel: Traversy Media

Views: 319,259

Rating: 4.9656444 out of 5

Keywords: css menu, responsive menu, hamburger menu, responsive, css overlay, css transitions, css animation

Id: DZg6UfS5zYg

Length: 35min 47sec (2147 seconds)

Published: Thu Apr 04 2019