Animated mobile menu with CSS/JS | Build a responsive website from scratch (Part 3)

Key Takeaways

hello everyone this video is part three of building a responsive website from scratch in this video we're going to be finishing up the mobile menu section by building the animated off canvas menu if you haven't seen part one yet check it out otherwise let's get into it now to start off building this off canvas menu looking at the design we can see that it's fairly simple it's just a white block and each link is in its own row so what we're gonna do is first write the HTML markup and then I'm going to style it in our s CSS and then the last step will be to handle the animation and make it slide on screen or fade in or something when you open the hamburger menu so let's go into our code editor and let's figure out where we want to put the mark-up for the menu so obviously we want to be in the header tag since it is part of the header the menu is so I'm going to I think put them in you in a div after the nav so let's call this header underscore underscore menu maybe wait am i using this ready oh yeah I'm using the menu for the hamburger I think this is more of the menu so I'm going to rename what the hamburger is so instead of underscore under from menu let's make it underscore underscore toggle and then I'll just rename this in these styles so here we go that her menu is now head or toggle let's just do quick find and replace here this a little toggle here to clarify what that's doing let's double check the JavaScript as well it doesn't look like there's a menu so we're good on that side let's just go back to our site real quick make sure everything's still working okay overlay and the hamburger icon we're still working which is good so now let's move forward and read our header menu the header mini is going to be you know that white block and then in that we're gonna make some links so design 1 2 3 4 5 links so we'll see a link times five again using an image shortcut press ENTER and we got five links this is just a landing page so I don't need to have these actually be links so it's gonna be home about contact blog careers boom about a boot contact blog that's like a test of my short-term memory and careers just double check that all about contact blog queries yay I think this should be all the markup that we need let's go back into the header and then add the styles for the menu so the menu so the background is gonna be background will be white did I create a variable for the white color or not variables white I did it'll be background right and then in that will be links and I don't think I need an additional class for the anchor links themselves it's just enough that there are anchor links so that's gonna be color and looks like it's probably the same gray as the header here so let's go back into our variables and I'm guessing it's a dark blue thing now we also need to add a bit of spacing get my handy dandy little rectangle here and then we will see first how much spacing there is on the top and bottom of the whole thing this looks like about 36 it's the same on the bottom and then each link oh I need some space too but I might do is do something like this or each link is going to be a certain height maybe 36 and then let me duplicate this square here then I'll add another padding on top and bottom of 26 so then each link is gonna be you know 36 something like this well you know I speak it later on there's gonna be a padding of top and bottom is 26 and then 36 height for each link so padding I guess I need to use a calculator again 36 no no 26 for the padding divided by 16 is one point six two five rims one point six two five rims on top and bottom and then zero and left and right I guess we just do it all around so we've got the padding and then I think I also want to now there's a couple ways you could do this I could I could add top and bottom padding to link itself I could also add the height of 36 and then make it a flexbox parent and a line items Center I think I'm just going to add the top and bottom padding let's say 10 pixel on top and bottom that way I don't have to write as many styles as I would if I had to transcend do flexbox think so padding oops heading and 10.625 and what the heck we'll just make it all the way around now let's see what we got on our site and we got our links has a white space but I think that's okay so I want them to not be side by side and it's happening because anchor links by default are display I think in line or in line block one of those if we change them to display block then they will take up the whole width that they want that they can there we go so display block maybe text-align:center caps lock again text-align:center looks like that works so let's add those styles into our code display block and for whatever reason I like to order my styles in this way where text-align:center where I start with the bigger properties like display and position flexbox things and then I move on to margin and padding and then I do text colors and then at the end I'll do like transitions or whatever just a way that I like to keep things a little bit organized cuz when you start getting more rules you want to be searching so I just try to group these similar styles together hello the site that looks pretty good now the other thing we need to look at is this white block for the menu doesn't take up the entire width but it looks like so you can see on the mobile site there's like a container width so you have some space on left and right and it looks like it's kind of sort of the same all the way down let me refresh my memory and see if I actually added some padding to stuff okay I did added some padding and that's from header nav so that's just kind of a global padding thing okay so before I do more stuff with the menu itself and to add some add this padding that I have here on the header and put it sort of for anything on the mobile page because we want we don't want things that go all the way the edge and it looks like things are right now because yeah like later on we're gonna need that padding depending that I was looking at was on the nav ok I think the best way to do this is to take this padding not have it nav specific but make it a helper class of course so let's add some spacing so we'll say with generic container class and then this will have the padding so that means we want to go into the nav element and then add the container padding there okay looks like it's working so it doesn't have the padding in the nav but it's in the container class so now that means we can add this container class to other other elements but actually for the in tainer class I only want the left and right padding I don't want the top and bottom so I think what I'm gonna do is take this top and bottom make it zero for the container upper class but go back to the header and put the nav select your back and say padding 1.0 65 ram is zero because what I do oh I know why it's because this reset the padding so the nav has the padding just on top and bottom and it's cancelling out the left and right padding here and that's because I'm using this padding shorthand so the best way to do this is to specify padding top and padding bottom I use a little control D to duplicate the line so it's a really helpful shortcut here and then here it's gonna be padding left and right of 1.5 rims there we go shorthand properties are great listen I do you want to split them out just because you might want different values for different elements so now the nav has padding all the way across which is good and we can start adding the container class padding to other elements we have a menu open we want it to be on top of the overlay and then how about spacing so I think if I just add the container class to the header menu you itself should automatically do that we can't see it right now but there we go so we can see there is padding there although wait a minute I don't want padding I want margin for that so I'm gonna keep the padding hood do you need it for like the other content down the page but we need to change is padding to margin for just the header menu so let's get rid of this and let's take that padding left and right it's 1.5 REMS we do want it to match the padding that the rest of the container elements are gonna have but we're going to make it a margin said so margin and I think we can use the shorthand so zero and then 1.5 rims now you can see that it does have that margin you just can't see it on the page itself cuz everything's white so I think we should be good to go now let's just take one more look at the design okay so they are some rounded corners so let's add a border radius to the menu as well order radius let's try three pixels I think we have enough now that we can start doing the overlay thing right now the header menu is under the overlay because overlay as I'm assuming it has its index doesn't have a z-index couldn't do it yet let's see what we got here overlay and then their menus under that I guess because this doesn't have a z-index set and that is probably because there's no position property so if you don't have a position property it's going to default to position static which means that anything that has its position set or has a z-index values gonna be on top of it so see what happens if we add position absolute okay it's now it's on top of stuff and let's try with 100% you can see it's like going off the screen so what we want to do is this margin thing isn't actually doing anything so it's position absolute we could do is instead of with 100% you could say with like 90 and then margin Jonathas gonna work that's position:absolute yeah it's not so since it's position:absolute unfortunately you can't use the margin auto on left and right to Center it because it's like not in relation to anything else it's absolute now I do want to make that spacing right so since we had that margin before of 1.5 rounds which is not being used obviously no that's the best way but I can do a calc and say I want this to be all the way across 100% minus 1.5 Rams on either side so 1.5 times 2 is 3 so 3 rims then when we Center it'll be it'll sort of be flushed to either side for the container for position:absolute element you can Center it by using left 50% and then transform translate X and what this is doing is left 50% is making it go 50% or half way across you know it's container so that's why it's right in the middle what transform does is it's going to let me turn off that left if you don't have it by default it's gonna be left aligned right so turn on transform translate X you're moving it 50% of the object itself so not the container but the object itself so that's why combining the left so this is the middle line right here and we want to move it back to be centered we only want to move it back this much half of the width of the element itself so that's why these combined will give you a centered position absolute item so let's do this we're gonna copy these things over to our code there you so there's an absolute width is the calc kind of percent mice 3 REMS to have the padding editing a little F 50% transform translate X negative 50 I need to get rid of this margin yeah there we go don't need that anymore opening the overlay now I can see it's nicely centered and we putting it out a little bit of space on the top there using our little handy dandy rectangle here see how much space that is about 24 so we are going to do margin top there's a calculator 24 divided by 16 1.5 there you okay so now looks pretty good we might need a little bit more rounded corners let's try and creasing that border radius a little bit maybe five compared to design actually not super around five is good okay so there we have our mobile menu the next thing we need to do is we want to animate the menu on screen when the menus clothes gonna be off canvas meaning off you know your viewport you're not gonna be able to see it and then it'll somehow anime in we could either fade it in we could slide it down from the top or slide it in from the right let's do some research so go back to code pen search for off canvas maybe a mobile menu may be animated mobile menu a little more specific okay responsive money with icon this seems pretty popular so I'm just kind of getting ideas for you know how they're handling this thing where's the menu what loo well not sure what happened to that bootstrap for animated menu you click this thing this is interesting it sort of fades in covers everything so that's that's one way we could do it sort of similar to the the overlay sort of fades in the fades out could fade in the menu along with the overlay so they actually be sort of cool I think I'm gonna do that I was thinking I was gonna slide in from the left or right but fading in actually seems quite nice and we can hopefully utilize some of the same styles and animations that we did for the overlay into the menu so looking again the overlay was set opacity zero position fixed right so pasty zero it's still you can't click through it dude is here oh yeah it's not clickable what did I do I think I forgot to maybe add visibility:hidden then we can still select stuff underneath it yeah I just needed to add that visibility:hidden and actually I since I'm reusing this for the overlay and also the menu let's make it a helper class like everything else so let's see here visibility maybe I should put it in animations so we're using visibility so what I'm gonna do is before the keyframes I'm going to add another helper class I'll say has fade and I'll say visibility:hidden and that's gonna be the default state of any of these elements that were fading and fading fading out okay doesn't have visibility here cuz I had forgotten it last time but now I can add the has fade class to the overlay and if this works we'll also add it to our menu itself let's reload for a good measure its overlay has fade visibility it's hidden I can see that I can select through like the overlays not preventing me from clicking here because it's the text cursor okay so this is working so I'm going to add that has fade class also to the menu itself so header menu that's food so now it's not visible because it is visibility hidden it's fine the element there it is so has fade so now I can just kind of do the same thing that I did for the overlay you know in JavaScript scoot this over a little bit so we can see our java scripts we are when we open the hamburger menu we are adding the fade in fade out to the overlay we also want to do that to the menu but since they both have that has faith class what I could do is instead of having to duplicate both these lines of code for both elements I could say Const all the safe fade elements Elam's so document query selector and then if it has that class of has fade I can hopefully target it with this because I might need a query selector oh yeah cuz query selector I think we'll just yeah I just gets the first one so I need to do query selector all that's why I'm naming the constant name with a plural instead of a singular just a little little hints like that will sort of help you not make mistakes so let's stay on the open stuff first fade Elam's and I think you can do for each or each all right can't remove the syntax JavaScript for each I know this is very basic I admit I'm not super well-versed in JavaScript there we go yeah for each function yada yada so for each function we want to do this so then in the function it's gonna be element hopefully this will work okay so what we want to happen is on both the overlay and the header menu when we click this we want it to add the fade in class worked what happens here eard it's disappearing for some strange reason what happened maybe let me try removing the has fade class from the menu just to see what happens when it's only on the overlay weird why is it disappearing like that that's very strange let me try to do it manually fade in Oh even if I do it manually weird something about the hands fade is like canceling this for some reason because I had the visibility:hidden okay let's start from the beginning adding the class via JavaScript does seem to be working so that's not the problem the problem seems to be because of this has fade class where I said the visibility to hidden Oh it's cuz I think I didn't add the end State for this visibility:visible there we go I think that should work now yeah because the way I'm running the animation it's going forward so it's keeping the end state here so because this was not here it kind of defaulted back to the visibility:hidden from that has fade class so now things should work let's see okay stays like that okay so let's add the has fade class back to the better menu alright oh I didn't add the other stuff we just added code for the fade in which seems to be working looks pretty nice might speed that animation up a little bit so let's do the reverse so do the same thing fade Elam's for each function element so the element parameter because it's looping through every element that has the has fade class you can use the element parameter to target and run functions and stuff like that so element elements okay so now both the open and closed functionality should work so let's give it a run Hey look at that nice okay I'm gonna speed that up a bit it's just a little bit a little bit slow but I'm pretty pleased how this looks I think that's pretty good now I didn't want to fix that over legs when you scroll like this like the overlay is not going all the way at the top overlay I said top three point seven five seven zero oh it's cuz I don't want it to be on top of the header or I don't want it to be on top of the nav want the header to be on top of it but I think that adding that it should still go all the way to the top I think it's because this doesn't have a position set I think this is position:relative I'm trying to put me nav on top of the overlay oh it doesn't have a background color I was just using it from the the body but I need its own background color there we go so now still scrolls and stuff let's do that so to the nav will add position relative and the background color relative background color white all right there we go now oh I forgot to that's remove the overlay thing top of zero to reload here we go now you know this looks pretty good another thing people do sometimes is when you open the menu you sort of lock scrolling on the body so you basically see overflow:hidden so then you can't scroll so I think I might do that with yet another helper class to a body what another class of this will just say no scroll the overflow:hidden we are gonna have to add this class to the body when you open the menu so when you open the menu we're going to I need to add as a constant let's add it to the top here constant body equals document query selector body there we go when you open it I'm going to lock the scroll by adding this class list add no scroll and then we'll do the reverse remove and we'll just put this one first since that's the way we had it in the other one see if this works the opening the menu alright so we can't scroll I'm trying to scroll and it's not happening because it wants to keep you in the menu when I close the menu removes no scroll class we can again scroll down okay hey this is turning out to be pretty good so we're done with the mobile menu and the next step is going to be going back and adding the rest of the content of the site