Animated Hamburger Menu in CSS/JS | Build a responsive website from scratch (Part 2)

Key Takeaways

hey everyone this is part 2 of building a responsive website from scratch in this video we're gonna be building the animated hamburger menu and overlay if you haven't watched part one yet and want to see what I built last time click up here to watch otherwise let's get into it for making this hamburger menu the first thing is we need to turn this hamburger into an X when you click on it so some kind of cool animation eye thing that happens is this overlay will in some way shape or form appear over the rest of the website and then on top of the overlay will be the actual mobile menu then clicking on the X will animate it back into the hamburger the overlay will disappear and the mobile menu itself will also disappear in some way so the first thing I'm going to do is starting with the hamburger menu animate it from hamburger to X so to do that let's do a little bit of research online so I'm gonna go to code pen dot IO and I will type in hamburger menu and just kind of see what happens what we couldn't find here I do want to mention before we get into this is that even though you can legally copy any code you find on code pen I try to do research see what other people have done in terms of solutions see what they've built or then try to build it myself this is really just the steps that I take to build something just to do some research that's kind of cool we try hamburger animation that's really the specific thing we're looking for here I don't want anything too flashy or too fancy yeah that's a little too much for me and I just wanted to include this part in the video because I do feel like researching is a very important part of coding you don't always have to invent everything from scratch okay I actually kind of like this animation the middle bar disappears it fades out and the to the top and bottom bar is form the X so let's just see what they did here they've added some transitions onto this and transform origin line to go still pass adizero so it fades out that looks like line one I'm assuming as the top one rotates 45 degrees that's angled the bottom line is going to rotate negative 45 degrees and I do like how this looks so I think I'm gonna just try to build this animation one thing that I think I'm gonna do it which is a bit different from the design is I'm gonna make this hamburger menu a little bit taller and more square because we can see the X is actually Square and it looks taller than the hamburger menu we'll make that change then we'll start adding in the animation so what I did here was basically added three pixels of margin bottom to the first two spans it's 26 by 14 height right now I love 26 by 26 is really what I want we'll just try to eyeball it honestly let's do 5 pixels is the header underscore underscore menu this is one benefit of using the BEM styling because you know everything has to be in the header sass file we go 5 go back here ok that looks pretty good I think I'm going to add a class on this header menu so that when it's open that will sort of turn on the animation okay so header menu go back here so header menu then I'll add a helper class and we'll just say open in the header kind of refer back to our markup as well so this here is the mobile menu so those spans in the header underscore on a square menu if header underscore and square menu has a class of open as well then we're going to transform those spans Spann first child it'll add another one or last child and then I think I need to add one for the middle child there's no middle child selector but I think we can do a child I think that should be - I think the number for those starts with one so when it has class of open we're going to do transform rotate 45 degrees then for the last child will do negative 45 degrees and then the middle child will say opacity zero and the reason I'm doing opacity instead of like display:none is because you can't transition display:block to display:none you have to do opacity which can use a transition now let us test this in the browser reload and of course I didn't add any JavaScript or anything yet so we're just gonna add manually the open class to the menu that doesn't look too good I think it has to do with the transform origin because right now what is happening is they're kind of just rotating themselves wherever their middle is outside of transition then we can kind of see that a bit more clearly musician will say all 300 milliseconds ease in out let's try this again the classic open take a look at the hamburger menu yes you can see each line is kind of rotating on wherever the center is little ones finds is just disappearing so I actually kinda need to look back at that because you can see that you want the transform origin to be on the sort of left side let's kind of see what they did here okay transform origin 1e ammonium I haven't used transform origin really before so let's Google that transform origin I try to look at Mozilla developer Network when I can they transform origin that's the origin of foreign elements transformations it's rotating the origin is the center and I'm assuming that's default so let's try top left so it's just rotating from the center it's a corner is kind of where the rotation starts so that might be what we want for the first line let's just try it transform origin top maybe Center left since they're just lines let's just edit for all of them transform origin center left or let's do left center I don't know which one needs to be first I'm not sure if it matters add this open thing again getting closer I think I'm actually going to add the JavaScript here I don't have to keep manually adding it in I don't really need the hello world anymore we're clicking on this I'm actually gonna add an ID because I like to use IDs for the JavaScript functionality so button am burger and then take this ID then there script up J s will say document query selector and selector it's gonna be the hash button hamburger and then what's the add eventlistener and it's gonna be a click and when you add it it'll run this function I always use a little console logs to test first open hamburger Const hamburger equals B button hamburger over here actually let's just call it button hamburger then we can reuse this constant that we created when you click the hamburger going to run this console.log message and then I also want to add a class and we can do this with class list dot add and then the class name we want to add click hamburger so I'm going to use a little if statement here so if button hamburger class list contains if it has open the open class I want to remove it otherwise I want to add the open class that should take care of the function we need for now let's click on this look at that added the open class and click on it again and it removes it ok so this looks good obviously this is X looks a bit weird we just need to kind of adjust the transform origin I think let's try 0 pixels 0 pixels just to see what happens oh look at this boy this looks weird well it's much better your pixels in one pixel in the header or was that Oh transform origin there we go let's try again clicking on the hamburger menu nice it's like a nice little X hey look at that ok so this is the first functionality of the hamburger menu next thing we want to do is we want to load the overlay because we don't have any regular content in the website I'm just going to maybe add some stuff just so you can see the overlay opening over the regular content ok so the next thing I'm going to do is we want to load an overlay well going back to the design the overlay it appears under the white navigation bar and then just over everything else so the header is here and the nav is included in that so I could do a couple things I could create an overlay on the same level as a header and then just make sure the header has a higher Z index so it's on top of the overlay so let's try that actually so here's the header what's going to add a div class overlay okay so to make the overlay let's look at the design again so it starts with this gray color I'm assuming it's the sort of blue gray color which we can use and then it's a linear gradient which fades as you go down to transparent first let's get leak color that we need this probably this dark blue here the overlay let's just add a background color as a fallback then linear ingredient weight background-image:linear-gradient and I always forget what the but let's just try it we'll see I am a professional web developer but I do look up a lot of stuff okay so that's a correct linear gradient thing so we do need to make this cover everything and I want to do position:absolute and then we'll just sit top to zero for now right zero bottom zero left zero actually I think I might need to do a fixed because it's sort of going like this so you need to basically set the height of it to 100 VH so the viewport height I think this should accomplish the same thing we'll see look at that overlay oh yeah so we don't really want that you can use the shorthand those two to d3 140 excuse this gradient fallback color let's try a linear gradient yeah the way to use his gradients and fallback colors that's what I did I can't color Yatta Yatta I got an image Oh fallback image that's actually cuz I did that but then and just add the background color like this mmm what if I did this nope well I guess it [Music] okay yes yes yes weird I don't know why this is not working well in any case we will just get rid of that background color weird I will just delete it this is kind of what we want I'll make sure the text goes sort of taller than what we can do so we'll just do this let's just do there we go okay so you can scroll down overlays fix which is pretty good obviously now it's covering up the header so we don't want that so for here we need to I think declare the position set the division rather or I think what we need to do is make the top the height of the nav bar so this is about 60 we'll just say the top is 60 pixels there we go now we have our overlay you got top to 60 actually we should use REMS we'll do our little dividing game here 16 divided by 16 is 3.75 grams now we also want to control this with a CSS class so before we if you add the open class to the hamburger it'll open what I could do is try to just use one CSS class to control all the animations so I think I'm going to add the open class to the header instead of the button hamburger itself open so I'm going to do is I'm going to take this and I'm going to add another section here hamburger open Styles the overlay to the header and then our open styles here and we'll put it in the header itself of course I'll set it at the top so if the header has class open then we want to say header menu we need to add these styles here so what I'm doing I'm basically moving that all the open styles into if the header element has the open class not the header menu let's not test these adjusted styles and update our JavaScript so that we are adding the open class in the header element itself so create a new constant we'll just call this header and we'll use the same document query selector and we will select the class of header element so now instead of checking if the button hamburger has the open class we're going to change it to checking if the header has the open class I'll update these to remove the open class from the header and then here we'll add the open class to that so what this is doing now is when you click the button you're going to check if the header has the open class and if it doesn't have it at it and if it does have it remove it let's test this out in our site we hope will happen is when we click this it'll add the open class oh yeah oh yeah it works always is a good feeling when the code does what you wanted to see the first time without having to tweak it ok let's go back into our s CSS and I'm also going to start animating the overlay cuz right now on the side it's just kind of like there let's take a look at here in the header we have the overlay and it's position fixed so I'm going to create a CSS animation a keyframe animation and I'm going to attach it to a helper class barks I'm probably attached it to the if the header has the open class then using that CSS keyframe animation it's going to fade in or fade out the overlay we might have to tweak a little bit as we go but that's kind of general idea I think what I'm gonna do is by default I want to make the overlay display:none and then we will fade it in probably using the opacity and transition and then fade it out when we close the menu so I'm going to create a new sass file actually so in our app as CSS folder let's create a new file I'm gonna call this animation so any keyframe animations we're going to load in this animation sass file and then of course we want to actually load it import it in the main sass file so animations there we go actually let's just put it up under the mix ins just to keep things kind of organized these are like the functional sass styles and then starting here is where we have elements and the different component styles keyframe animations you start by typing at keyframes and then you write a name for what the animation is so what I want to do is I'm gonna create maybe two animations for the overlay I'm just gonna call them fade in and fade out so first one's gonna be fade in and with keyframes you start with a from and then you end with a two and then you put the initial styles in the front bracket and then the end of styles in the two bracket and you can also add percentage of progress in here so if I wanted to I could say let's say 50% do something it's indent this a little bit or any percent you want and then it'll use that to time when certain animations take place this is more if you have like complex animation this what we're doing in is a pretty simple fade and so I think I might be able to get away with just using from into okay so in the header sass file you overlay has a default display of none and then in the animations I'm just gonna add display:none just because that's where we're starting and then I want to end up having a display block and opacity of one and we're also going to start with no pasty of zero now the tricky thing about this is you can transition opacity from zero to one it'll have a nice smooth animation from zero to one but you can't transition display:none to display:block that's just not how CSS works first is gonna be display:none then I'm going to say maybe one percent so right after it starts it's going to be display:block but it's gonna be an opacity still of zero and then from 1 percent to basically 100 percent the end it will stay it display:block but then it's going to train it it from 0 to 1 we can try this out by adding this animation in our Styles I'll just add the overlay styles up here so if the header is open then the overlay is going to have animation and it actually gives you a little help here so name duration timing function direction and things like that the name is the name that we added here so fade - in duration let's just say 300 milliseconds that's kind of my default timing function ease in out is what I usually use and delay I don't think I need a delay iteration count you know how many times you want this to happen we just wanted to happen once so I think you don't need to add anything there and then direction we want forwards and then fill mode I don't think I need that I don't think I need that so forwards this is actually important because saying forwards will ensure that once the animation is complete it will stay at whatever styles that you've put on the - otherwise they'll kind of animate and then reset back to whatever you had styled before adding any animation so we want to keep this display:block opacity one after it's finished alright these are the styles we need for the overlay and let's I guess test it out okay so you can see the header and then we can see that overlay now is display:none let's click on this and see what happens okay looks like we're still working but the overlay is not animating in so we know the animation is being added to the overlay but for some reason the loading isn't actually working and we're not sure why what happens if I uncheck the display:none oh so it did actually fade in good for some reason it's not sticking the end state is not staying on the thing display:none but it does have the animation okay time to Google again or I guess stuck that go she says animation final state may be okay maintain the final say the end of a css3 thing and then I really like using looking at CSS tricks as well as mdn so stackoverflow CSS tricks and mdn are kind of my i main three sources that I go to okay looks like this person's also opacity changing from opacity 0 to 1 now let's go back to opacity 0 animation film mode is 4 words what I did use that I believe yeah four words maybe does the order matter in terms of what properties I put in here I'm not really sure I mean it seems like it's working if I uncheck the display:none so I'm not sure what is happening it just says four words should make sure it'll hold the last keyframe state don't worry discuss 100% huh what if that does anything I don't know if that's gonna work but let's check on Indian I don't know if you need that both 100% and the two this is just from and - yeah from 75% - but don't think I need to actually say a hundred percent because I can't hurt let's just try I'm not even sure this is like good syntax okay let's try again nope not working so I don't think it's this I'm going to delete the 100% stuff I know this is bad but I'm going to add an important to this see if that does anything nope geez this is kind of annoying made in 300 milliseconds easing out forwards mm-hmm it seems like I'm doing everything right but obviously it's not working let's just get rid of this important because that didn't help I'm gonna try commenting out the display:none just for now and I'm gonna try just setting it to opacity zero and see if that makes it do anything different okay so it did fade it in so somehow adding a display:block is not getting added because unfortunately I do need the overlay to like be display:none otherwise I'm not gonna be able to click things better under the overlay so let's put that back in oh what if I okay by defaults overlay display:none but but what if I add display:block when it's open oh my gosh this work whoa it's so weird what if these animations don't actually affect the display property at all that could definitely be the case let's look at this CSS CSS animation display:block because it might just maybe not affect the display property at all they make them just like block display:none that's sort of what I'm looking for as you know oh one of the properties that cannot be animated is the display property okay so that's why I mean I guess it makes sense although intuitively you would think that you could add an animation from display not to display block and I would sort of understand that you want to fade it in so I think I don't need to add any display properties in the animation since obviously nothing's happening and because I'm not doing that I think I don't even need the 1% thing because I had just done that to make it display block and opacity zero so let's try this again okay here's the overlay header doesn't have open classes click on it oh yeah okay so that's a fade-in animation and then let's make another one that's gonna do the opposite fade out fade out from pasady one two opacity zero okay I added the fade-in animation when the open class is added I don't know if it'll work if I add the fade-out animation or like the default let's just try it we might need to add a helper class to the actual overlay to fade it in and fade it out but let's just reload because I want to make sure nothing weird happens with this okay I just want to make sure that because I added a fade-out animation by default to the overlay I didn't want it to like fade out when you load the page because I would obviously look very strange okay clicking on the hamburger menu fades it in very good and it just sort of disappears so doesn't have a transition which means the animation is not being added so let's make this a little bit more reusable so what I'm gonna do is I'll just add a little helper class fade in and then we'll take this and instead of applying it specifically to the overlay I'm going to add it to this helper class here so we can do the same thing with the fade out white a little helper class I think this might be a better practice anyway because then I can fade in or fade out any element using these helper classes so I'll just fade out I do need to leave the display:block here just to flip it from display:none to display:block but what I think I need to do is in JavaScript add that fade in and fade out class to the overlay so if header if it contains open or remove opens this is when you close the hamburger menu just so I don't get things mixed up close hamburger menu else add the open class meaning open hamburger menu so when you open the hamburger menu we want to add the fade in class to the overlay so let's add a new constant here let's call this overlay document query selector and it's just classic overlay so when you open the hamburger menu overlay class list add fade in let's just test the fade in functionality now going back to our site okay so you can see the fade in class was added and it's adding this animation and then we'll do this sort of the opposite we'll say overlay class let's add fade out when you close it and we might need to also remove the the answer to remove the fade in class and then I guess we should also remove the fade out class when we're opening it just to kind of reset everything okay right again reload for good measure all right it's fading in now it's we want to happen is we want the classes to basically swap when we close the menu what's feeding in but it's not oh you know what's happening it's because this when you remove the open class from the header it immediately just like goes back to display:none shoot it's kind of annoying but I think I need to remove the overlay getting the display block and instead adding it to the overlay element itself so it doesn't get affected if the header has the open class or not so overlay if it has class fade in this is just gonna do the same thing I'm just making it disappear well boy this is tough okay fades in still doesn't fade out okay let's think about this what's happening step by step so okay going back to zero this is the default state I click on this it will add display block and then it also faded in the animation works because going from display:none to display block it's still opacity zero so it's not going to like show up without the nice transition the animated transition but then if you remove if you remove that then it's going to just display none right away so what we want to do is make it go from display block to display:none after it fades out from opacity one to opacity zero so let's just research some other possible solutions excuse us animation display well it's kind of what I was searching for before display:none display block none see what Stack Overflow has for us okay yep Jane you display:none that did it did okay so yesterday query I eat JavaScript can't animate between display:none and display block I see zero visibility hidden interesting I just want to make sure that this stuff is still clickable when we have like a visibility hidden but it still exists get rid of this display:none get rid of opacity zero so now it is default display block visibility hidden it's interesting well it seems like it's actually still clickable Oh cute this might be the Silver Bullet I'm looking for yeah so it's still clickable which is awesome to see what happens is it was just opacity zero it's not clickable like I can't select text as easily yeah I can't select the text but if it's visibility hidden it does like the text and I think visibility should be able to be animated so let's go back here so fade in we're gonna go from visibility hidden to this might be where we need to just switch it quickly to visibility ability visible with opacity zero we're kind of combining so it's sort of like display:block but I guess it can be animated for whatever reason then we'll do the same thing here so from opacity one visibility:visible we'll go to pass a zero and then we want it to be visibility hidden but in order to make it still visibility visible but opacity zero we're gonna add 99% so when the animation is almost done it's going to be at visibility visible but I'll pasady zero and then let's see if I need to adjust any of these styles here I guess I don't need this anymore I'll pass the era display:none I think this should work famous last words let's reload for good measure okay see what happens fades in all right oh my gosh it fades out yes ah always feels look good when you're like struggling with something and you're researching it and then finally get it to work that's an interesting little lesson I guess like display:none is different from visibility:hidden versus opacity zero and they all sort of do different things okay yay let's go back to the mobile you hear oh I'm so happy oh this is great okay so now that we have our nice fade in animation the overlay next step is to actually code the menu and that's it for the animated hamburger menu and overlay if this video helped you at all I'd love to hear about it down in the comments and as always thanks for watching and keep on coding [Music]