How to Create a Website - Complete workflow | Part 06.2: Making the nav work with jQuery

Key Takeaways

hey guys and welcome to the second part in building a mobile navigation if you haven't already watched part 1 there's a card up on the top right now where we look at styling this whole mobile navigation using flexbox and in this video we're going to animate the whole thing using jQuery and then at the very end of the video I go back into the CSS to fix a mistake that I made with my navigation when I go to add a hover effect in there and it just we run into a little issue and so we we fixed that to what I'm gonna do is create the hamburger menu and then make the hamburger menu work so when I click it it makes my what we're seeing now on the screen appear and disappear I'm just going to actually give this a write value of a hundred percent no not right left zero left is 100 percent there we go so that's sort of the animation that I want to happen so you can just see there it's gonna slide out and 100% when you click the button it will slide away like that but obviously I don't want to see all my text and stuff sticking out the sides here either so because that's a bit of a problem we do need an overflow:hidden I always do none hidden there we go so that will hide that away so it doesn't get in our way now what I'm gonna do is come down here this markup this commenting here if you're not used to sass this is a sass only comment it won't show up in the CSS just do a mobile burger menu so what I'm going to do for my hamburger menu there's a few things I'm actually have to jump into the HTML to start this off and I'm going to come in here to create my hamburger menu so I'm gonna have a nav toggle and inside of that I'm going to have a hamburger whoops I want that to be a small age there we go and that's it so nothing should change right now good in my yeah in my nav let's come back to here so my hamburger menu we are going to do a few different things so we have my nav toggle first my nav toggle is what you actually click on to make it appear and disappear so let's just do a display:block and give it a background of pink for now so we can see it and some padding I'll just do one M right now just so I can see things I want to see if there's my box so good it's working and now I need to position it so position will be absolute and right will be zero top will be zero I'll just do a right of 1m and a top of 1m there we go that's more or less where I want it I'm not worried about the shape or the size of it because once I put my hamburger menu in there it's going to change a little bit and I'm gonna change my cursor to pointer so when I put my mouse on top well if it was a mouse icon it would turn into a pointer just to show you what I'm talking about you can see now it's turning into that so if we did see it it would turn into that okay cool that's it I think for there now what I want to do is style my hamburger so hamburger and for this I also need my hamburger before and my hamburger after cuz we're gonna use a few pseudo classes or elements pseudo elements to populate this display will be block let's go with a width of 2m a height of 3 pixels and a background of white and there we go you can see those are starting to come in the only problem is they're sort of overlapping each other and all of that so need to change how they're positioned so I'm gonna use my hamburger before it'll be the first one I do this one will get a transform and a trance about their translate X Y X up and down is y translate Y because I'm using a height of 3 pixels I want to move it up by 3 pixels so minus 3 pixels and you saw it move up except it didn't move up enough I want it to be separated 6 there we go so it should be 3 pixels than an empty space of 3 pixels and then my 3 pixels there and then that's it I'm gonna copy this whole thing and paste it and put after here except I don't want negative 6 now I want positive 6 or is it positive 3 positive 3 I always mix those up so there we go you can see that's all there I can turn off my [Music] background pink now I don't need that anymore and it's actually positioned pretty much where I wanted to be so that worked out really well cool now what's gonna happen when I click on the hamburger we want it to rotate and all of that let's start by creating our JavaScript file yeah I'm gonna make my do I already have one actually no I didn't have it did I link to it already I think I have my link already I just didn't create it oh I never even linked to it ok and I'm gonna be using jQuery for this so I also have to link to jQuery I forgot to do all that I just I generally just take the this one here minified and grab all of that and close and paste that in there's other people that hosts it too you can get it off google and all of that so I'll close there so that's good and I also want to link to my own and I'm gonna put a few comments in here actually this is my J a query I have font awesome awesome and all the way at the bottom is usually where I put my own my own scripts so we'll throw those in there so I need a script SRC is equal to j s slash scripts J s closed script save that file and make I had my new file we'll save that as a yes and we'll call it scripts guess one might as well start with the best practice document ready whoops read ur ready so when the document is ready we want to do a function and this is well put everything now I've put my jQuery linked already although my jQuery my J JavaScript my own link all the way at the bottom so technically speaking this shouldn't work until the document is ready anyway but this will make sure that the whole document is loaded before it starts trying to do my scripts just to make sure this doesn't slow down the loading of my page at all so what I'm gonna do is we want to I'm gonna split this to the bottom actually uh split down I usually work with the split screen left and right but I like being able to look at things as I'm working on them I mean there we go so I want to select what do I want to select I want to select main nav and what I want to do main clap on click we want to do a function whoops function and the function will be what will be my function my function is when I click on it we will select this so we want to select our main nav and we want to add not add we want to toggle class and I'm gonna create this now I'm gonna call it we want to toggle class is open let's save that and let's test it out to see if it works and I click on it it should be logo main nav is here it's not working but something is changing and I'm not getting a console log error let's go look at my console cuz it's not working hmmm ok guys I'm really dumb I don't know why I selected me nav here let's go and try and fix that to put a nav toggle instead because that's what we're clicking on save that and yeah we can see there it's adding in the is open class so that was not smart of me but at least it's working ok so I did everything right let's just put in a little comment here so you know if this gets more involved we know what's going on I am burger menu toggle okay so let's close my scripts and now we just have to come in here with more more in our CSS so what do I want to look at I want to say when oh no I did that wrong I sort of had it right I have to open up scripts again yes sorry I don't want this I want I want to select my when I click on this I want to add the class to my main nav ok so when I click on this my main nav gets the is open there we go that makes more sense so let's close that now because the reason I just thought of that is I want to where is it toggle nav I want my nav toggle is open to have a not my nav toggle Oh guys I'm not doing good here I want it to be all the way up here my main nav so my main nav is open gets a left of zero there we go hey guys it's working super and I want to animate that I just don't want it to appear and disappear like that so let's just come up to my main nav and add a transition on there so transition I'll just do it all ease in out and we'll do 250 m/s milliseconds let's see how that looks that looks pretty good I think there we go awesome cool I'm happy that was nice and easy the only thing left to do is my hamburger menus so my hamburger menu except my hamburgers not inside we're also gonna add the class to my hamburger I keep closing scripts here so main nav tag class is open daaad burger will also get in is open I mean Ave is getting it and whoops my hamburger is also open okay so actually let's leave that open so we can see that this is working so my hamburger is open will actually this should not go here this should come up she actually I don't have anything that's just hamburger okay we'll do it at the bottom my hamburger is open gets a transform rotate will go with a 45 degrees cool and then what I want to do is I want to say my actually because this should work hamburger is actually what am i doing I can just do after will do after rotate trans form rotate 90 degrees so it sort of makes that X that we can see coming together there and my before gets a display of them and look at that perfect oh I think that looks awesome so when I click that it should go normal and you can see it's jumping back and forth between the two the only thing that I want is I don't want again I don't want jump I want it to sort of fade in and out so on here we can add our trans transition all ease in out 250 milliseconds as well so now it should enemy I don't like the animation actually that it's swinging too far that and I need it's going the wrong way they're both rotating the same way so I find it looks really weird what if I do a negative 90 on here instead of so yeah that looks a bit better they're sort of crossing each other now instead I'll just show you what I did let's slow that down a little bit let's make that like one second and I'll put this back to 90 so when they're both going the same way I find that see the way that they're spinning there looks a little odd to me you can also see the top thing is just disappearing when it clicks and it's because my display is going to none let's change the opacity on that instead opacity zero that should but then that ships it down that's okay it's just getting in the way so I think if I do I remember right negative just to push it back to where it oh whoops you can't have multiple transforms on something well you can but you just negative six why is that moving Oh cut paste again I think that should be a three that's moving it that way this is an ex that I wanted there we go so that should make the other thing fade in and out too which I think looks a little nicer so you can see they're both turning in the same direction and I don't really like the way that they're both turning they're in the same direction I find it looks kind of weird so that's just why I prefer coming in here and doing this one as a negative 90 so it spins in the opposite direction I know this is the wrong way - there we go okay so it sort of just makes them cross each other like you would expect it to happen and now obviously that animation is way too slow so let's bring that back to 250 250 save and there we go I think that looks really good it comes in it comes out it's working perfectly the only thing I could add in here is a hover effect for these so we might as well do that even though most of the time probably won't do much but we can do it anyway so we'll do an a and let's just yeah might as well do it the SAS way and hover oops that should be indented actually and hover so when that's hovering it will get a bad round and I'm just gonna do an RGBA and I'll show you why in a second RGBA again of it let me get darker so zero zero zero and just do point one zero see what this looks like we also give it that a focus however and focus I just so I can tab through oh that's not gonna work ah what if I did that on my list items instead let me do it on my list items I don't see why not oh except I can't I can have a hover effect on it we can't have a focus on it but you can see it's working the focus won't do any things we can't focus on them sadly but that does give us this hover effect and the advantage with doing the rgba instead of giving it a specific color is if I later decided I don't like this background color and I actually wanted to use my main color it's still gonna darken and it's gonna stay with that or if I want to darken my secondary and it still works perfectly fine and I'm gonna stick with accent okay this is me a little bit from the future cuz when I was editing this I was ashamed of myself a little bit and I made a huge UX mistake this is a really big one guys I'm embarrassed by this one I put the hover on the list items instead of on my links and that's terrible because if someone is looking at this and they're hovering over this looks like you can click on the whole bloody thing and even if I couldn't see this hover effect if I was on a mobile screen I wouldn't really be focused on clicking on the word home that looks like a big-ass button that I can just click on with my finger so you know this looks like the link just doesn't work I'm clicking I'm clicking it looks like the link is broken you have to go on to that little thing here this little space to click on it that's terrible why why would you do that this is things that I get mad at other people for doing I've actually seen buttons that are sort of done like this and I've been so angry that somebody was so lazy to do that and I almost did that and I'm really ashamed of myself for that actually luckily it's really easy to fix I'm gonna put a background color on my link just so we can see how this is gonna work so I'm gonna do a background of light blue so we can see that come in okay so what I actually am going to do is take off this align items and justify content because I don't actually need that on there that was a mistake on my part I wasn't looking far enough ahead on this one so when I save that you can see it's actually they're actually taking up the full height now and the reason for that is by default flexing things sort of grow to take up the whole space but this is a line item center is would stop it from doing that so I can take that off the justify content I also don't need and I'm gonna hit save now this is where things of flexbox are a little bit weird but we'll see how it works in a second the only I want this to grow to take up that whole space so I'm gonna do a flex basis of 100% just to make sure it takes up that whole space now what I was saying was a little bit weird is to get this to go right in the middle you know you wouldn't necessarily think that you could do this because this the text is inside of the a tag so the text isn't another tag like here I'm doing a flex and it's changing my link into a flex but I can actually do a display flex on here so I'm doing a display flex on my link and then what I want to do is do an align items Center Center and it centers it vertically so even though this is just text inside of a link I can still have it do that and now you can see that I can click on that whole area and now I can do my justify Content Center so I'm just taking that aligned items and that justify content that I had on my list item and I'm bringing it down and putting it on my a it's just really important that I also have the display flex on my a or those won't work and now they're perfectly centered I might as well take this hover effect off of here and drop it onto here so they will get darker and I can take this light blue background off and there we go it's we're working perfectly awesome super super happy with that so yeah I can again really nice thing with flexbox is you can do this align items even if it's not on another you know it's affecting other tags it's affecting the content that's inside of that a so now that whole space is actually clickable so I could come in I don't have anywhere for these to go but if they did go somewhere the whole thing is a clickable link now so whatever you do don't do what I almost did and make a little link inside of a big thing that looks like you can click on it yeah that pretty much wraps up this video I do hope that you liked it if you did awesome possum subscribe to the channel if you haven't already there should be a little box right on the side there with my face on it you can click on to subscribe there's also another video up there that if you like this one and you've liked this series so far you probably liked that video that is highlighted right there also hit the thumbs up before you click on the like the next video until the next video take it easy