Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT

hello what's up everyone okay finally back after like three weeks oh my god it's okay though because we are going to build a navigation and a pretty modern way and I'm gonna show you a few tricks that you can do some cool animations in JavaScript so we're gonna build a simple navigation and we're gonna also have a mobile version I just spoiled everything there no okay anyways so on mobile it's gonna be like this right and when you click we're gonna have this nice animation here and all the links are gonna nicely animate them like this and this is super customizable so you can make like the delay stronger or faster or slower and very very easy and like the animation here you can easily change it in CSS so we're gonna do one cool trick here in JavaScript that's gonna be enabled us to do this alright so without a further ado let's get started okay so obviously we're gonna close this and YouTube everything okay good I'm gonna open up a my vs code here fresh and I think I made the folder here let's see navigation tutorial there we go alright gonna be quite quite simple so we're gonna start obviously with our index.html we're gonna generate a new project we're gonna name this navigation okay but the lowercase M and yeah let's get started okay so we're gonna say net we're gonna use html5 and we're gonna see we're gonna build a div with a class of logo here is where our logo is gonna go it's called two nav original okay and besides this we're gonna have a ul with an li so all lists right and I think I named this home and mvs go with if you hold shift and alt and press down you can duplicate really easily and nicely so we're gonna name this about we're gonna say work and our projects perfect good and for now I think we we are done with this so let's open this up and live server and the port is already in use so let me close that there we go okay I'm gonna put this here actually I just maximize this for now because we still need to add our style CSS we're gonna link it we're gonna say style and I'm gonna remove some basic things here we're gonna remove the padding and we're gonna say box size border box just so we don't run into some weird issues okay that's it now let's start with the snap thing here so whoa whether they press okay good so we removed all the basic styles and we can start so we're gonna say nap right we're gonna say display flex so all our so it comes like next to each other and then we're gonna say justify content space around so now it's gonna be like this we're also gonna say a line items Center which is gonna Center it vertically okay so justified content is gonna well it's not gonna Center it was gonna space space it around it space it around okay and we're also gonna add a min height to this and say 8vh and I also added a background color to this give me a second it's five the four nine five four I believe yeah okay it's that one I think we're gonna remove this for now just so we can see what we're doing and we're gonna add this back later okay and I believe we also are using a week on Google Fonts I used Poppins Poppins I said hey man let me use let me use something different because I'm using mouse rod and red rail way too often so I thought I'd switch it up try something new my life good so we just copy and paste this and then get the Poppins go back to this and we're just gonna add it here and RNAV there we go works perfectly good next actually I think we can add back the background color so I didn't want to add that just so you can see clearly where the nav isn't where this is but we're gonna change the color now anyway so I'm gonna say logo we're gonna say color white and I'm actually not gonna keep it white I'm gonna go here just lower it down a bit because you don't want to have that huge contrast it's not gonna look that good if it's pure white so I'm just lowering that down and I also did text transform here and upper case so all our text is upper case we're gonna say letter spacing five pixels it does exactly what it says so it just makes a bit of space in between each letter and let's add a font size of 22 pixel inos good awesome maybe 20 all right let's go with 20 good now for our UL here we're gonna add a class of nav links here all right now we're gonna go back I forgot to add this I'm sorry so we're gonna say nav links here and again same story we're gonna say display flex so it goes like this and we're gonna add a width to this cuz right now wait let me show you if I add the background color of red that's the whit right now if I want to make this like if I add here justify content space around like nothing's gonna happen right because it doesn't have any space so the cool thing is is you can add display flex to this justify content space around and then you can just play around with the width if I want this more space around again just that 35 and now it's more spaced around I can go 40 even more spaced around so you can mess with this quite nicely which I really like but for this I just I have charity okay now this is looking quite ugly so we're gonna select all the a tags I have links a we're gonna add the same color that we did up here just so we're consistent good we're gonna get rid of that text decoration and we're gonna say none good I believe I also added a letter spacing here of tree pixels let's see how that looks good and a font weight of old good I actually think this is too big that's what she said font size 14 pixels yep much better good good good good all right we also need to remove so we're gonna say nav links Ally just so we removed these bullet points here okay I'm gonna say what is the bullet how do you remove that I always forget list it's list-style:none yes there we go awesome good good good all right so that's it for our desktop view quite simple yeah not much not much nothing interesting okay so the way I build my my nav for the mobile is I basically do this and then in my nav I'm gonna add a Burberry class here so I'm gonna say burger like that I'm gonna add three dips here one two three like you can do with SVG's but you can do it so fast with this that I kind of prefer this one so the burger has like three lines right so I'm gonna name them line one line one I'm actually gonna just copy this and we're gonna say line 2 line 3 and yeah that's that and that's it that's the whole thing good so now if we go back it's gonna be here we're gonna be like hey but this kind of ruins our layout well now it's really cuz we're gonna display it none so it's only gonna appear and our mobile view so now here we're gonna say burger like this actually we don't need to display none because we don't see anything because our lives are empty right these are empty so what we're gonna do is select burger and we're just select all the bits in here because they're all gonna be some the same I'm gonna give a width up 25 pixels a height of 5 pixels you can play around with these values if you don't like the way it looks again I'm gonna get this color again just so we're consistent here good I'm gonna add a margin so it has a bit of spacing all right it's not working let's see why is it not working burger this fifth class burger this alright let's see what I did wrong here hmm we had a width a height margin this is the time where you try to figure out what the hell did you do wrong I see it there I see the lines there I just don't okay so it's not a color it's a background color there we go wow that looks ugly that looks really ugly let's let's add three pixels here ah there we go I can see you can play around with this until you like you can do two pixels if you think it's too thick that's what yeah okay you leave it at tree good now we're gonna go up here we're gonna say burger and just say it display:none that's it looks like this now good awesome now we can work on our mobile so go all the way down here and say media screen and max-width is gonna be six and eight pixels there we go and just to test the dial we're gonna say body display:none I always do this it's a habit okay so maybe the wit can be bigger here so before it hits the breakpoint you can maybe increase the width right you can go like 40 until it looks good so you can mess around with that drive here or maybe you can do another breakpoint if you want so if you don't want this to be spaced out like this you want it like this but when you go smaller a bit so let's say around here around either thousand something pixels you can just think increase the width of this so it's gonna look nicer it's gonna look more spaced out actually let's just do that okay so you see what I'm saying so this is just a quick fix here just so it's gonna look okay so I'm just gonna take the nav links here and for this in particular I'm just gonna increase the width to I haven't no 50-60 let's see yeah so something like that just make sure it looks okay across yeah just playing around with that I want to cover mobile this is like tablet tablet zone good all right let's continue so here what we're gonna do is we want to modify this because we don't want this to be here so to do that actually I think I can just take this here like this so this is mobile around this okay and we're gonna start again the nav links that we selected and I'm gonna say position:absolute Wow okay there we go and we're gonna say I'm gonna put it to write zero pixels so it's stuck here on the right side I'm gonna add a height of let's see how much height I added here I believe it's 8vh so to be fullscreen I'm gonna say 92 eh like that so that's gonna give us full screen good and also we're gonna say top 8vh so it's gonna be right under our net barn good we're also gonna copy the background here so let's copy this background to see what it actually looks like good looks like that perfect and now all we need to do is display flex we're gonna say flex Direction column so it goes down like that a line items no it's just a find content Center no it's not it's a line items because we changed the direction to column so the order changes centering there we go so we have a nice spaced out nav here good awesome let's see if I miss something here you can also mess around with the width so you can make it smaller you can make it bigger I'm gonna keep it at 50% but you can also go fullscreen if that's that's the thing you want but I believe I use 50% and the thing that I showed you at the beginning okay now we don't want this to be here so what we can do is transform translates X 100% which is basically gonna move this whole container off the screen and perfectly it's gonna move it off the screen so it's here now we don't want this to scroll so all we do is body and we're gonna say overflow X hidden there we go we cannot scroll anymore good awesome let's see we're gonna say we also want to make the let me just remove this for a second the original state of DS is gonna be hidden so we're gonna say opacity zero and when we click on the burger it's gonna fade in nicely so for start we're gonna just say nav links Li and we're gonna say opacity is zero okay so what that does basically we cannot see anything good and also let's put this back overflow X to hidden and the last step is get that burger and just say display:block so we took it from display hidden to display block on mobile and look at that nicely positioned and everything this is centered here and boom remember because it's still in the context of of the nav which we add the display flex so it's still gonna have the nicely spaced around a burger so there you go awesome another thing we can do is maybe add a cursor to this so cursor:pointer so boom there we go great alright let's let's we still have like one or two things to do here so I'm thinking if we should do the JavaScript or not okay well let's think in CSS for a moment when we click on this burger we want the navigation to show so the only thing we need to do is basically take this transform and put it back to zero so to do that is I'm gonna go here to the bottom and say nav active and we're gonna save transform translate ex back to zero so when we click on this burger the navigation should get the zero transform yeah that's it basically not nothing else to it good and also we should have a transition because we don't want it to boom pop up like that so let's say we want to transition the transform we're gonna see 0.5 seconds ease in good awesome alright let's leave it at that for now and then we're gonna get to the other ones okay so I want you to create a package a yes or rename it whatever you want at the end of your HTML we're gonna add it good now what we're gonna do is make it function so we're gonna say cons now slide it's equal to eight anonymous function awesome here we're here in the declare we're gonna get the burger and we're gonna get the slider so we're gonna say burger is equal to document the query selector and we're gonna say burger good and we also want to get D the nav which is document dot query selector nav links awesome so what we gonna happen is when we click on the burger we want the nav link to get the class of nav active so let's do that so we're gonna see nav burger add the event listener on click we want to run a function and what we want to happen is the nav should get a class list so we're gonna see classes this and we're gonna see my ad but toggle we're gonna toggle the class list of nav active let's see how that works and it doesn't work okay why because we need to invoke this function so a nav slide now if you now if you're gonna have multiple functions I'd reckon I recommend actually building a app function here and you can call all your smaller functions here just to keep it cleaner but from now I'm just gonna do like this so we're gonna invoke this function so now if we click this slides in nicely good now the problem is how are we gonna animate these and one by one well first we need to make an animation so let's build out an animation we're gonna go down here we're gonna say add keyframes and we're gonna say nav link fade okay from and - so obviously we want from opacity 0 to 1 and also I actually want to add a little movement to this I'm gonna say 50 pixels and it's gonna go from 50 pixels to zero pixels this is gonna slide then like that nicely good now how do we add this well what we're gonna do is we're gonna get all the nav links in this so to do that all we have to do is up here we're gonna say Const nav links so these are the individual links this one this one this one and this one so we're gonna see document dot query selector query selector all because we once like all of them we're gonna see nav links Li like that good so this is gonna be the toggle map and the mate links just to be clear now the cool thing here is we can do this we can say nav links dot for each so for each link we're gonna run a function here and also the cool thing in here is so these are the individual links right you also have access to index which if we cancel all this is just gonna bring back the individual like how many how many links we have so in this case we have one two three one two three four right cuz we have four here one two three four awesome now why do we want the index well with this way you can actually easily animate the delay between each so let me just quickly show you so if I say here link dot style animation it's the equal to we're gonna do backticks here and say nav Ling fave okay the animation we did 0.5 seconds is going to last for these four words and I'm gonna interpolate it here with index I'm gonna divide this by seven or by five so what does this mean let's see and we're gonna say seconds here so this would be the delay I'm gonna console.log this for you to see so if we say console.log index divided by seven it's gonna give us F twelve it's gonna give us a nice Wow what was that noise a nice delay between each and it's gonna be equal so it's gonna look really smooth and it's really nice and the awesome thing is you can easily add more your if you have a designer or someone you can easily add more links here it's gonna automatically recognize it it's gonna add it it's gonna add the proper delay to it and it just works so you can add more here and it's gonna be the same look I can just add more boom nice delay between each of them then you can easily add different animations here and it's just gonna work so divided by seven if you want it like that you can go 0.5 you can mess around with this and if you want to have an initial delay you can just add a plus 0.2 or something to it so it starts off automatically with the delay and I believe I did this and the in my original site so we're gonna say 0.3 so we had a basic delay to it awesome let's see does that work refresh that's a bigger delay I want to see if this actually works there we go it works now we have a bit of problem here the problem is let's see how much delay I'd I need here let's go one second yeah so it fades in after the nav opens so let's go 1.5 here yeah something like that now the problem is this stays like this we don't want that we wanted to if we close it we want it to happen again so to do that is quite easy we just copy this we're gonna say if link dot style dot animation so if this exists if our links have animation on it then we're gonna say the link that style the animation it's gonna be equal to nothing else we're gonna add our animation boom yep not working alright so I'm extremely stupid the reason why this didn't work is we need to add that in the event listener oh my god so just copy everything from here and paste it in here I don't move this in here just make everything clear ah Jesus good actually let's move this back Oh wine so okay never mind here's the first line let's see boom boom there we go blasting okay I also added a background here and just did I just did it so the page is not empty but the last thing we have to do is just change the burger so to do that it's quite simple we added line 1 line 2 line 3 so what we do is go here and just add a toggle clasp to this so we're gonna say toggle I'm gonna say line 1 we're gonna copy this to 3 - oh wait - entry good and for each line we want something different so for this one the first one the upper one here we're gonna say transform rotate then same - 45 degrees I'm gonna say translate we're gonna move this - 5 pixels and this is DX + 6 pixels on the Y we're gonna copy this paste it here and here we're just gonna say - here and here it's gonna be plus 45 degrees and for the middle one I just get rid of it and say opacity 0 awesome alright so all we have to do is just toggle it in here so what we want is we're gonna say let me make sure I'm in this ya here Berger animation good so for this we're gonna select so when on Berger again so when we click on the burger we want what do we want well we want to add on the burger class list of toggle we're gonna see how I named it toggle okay so we're gonna toggle the toggle pass Wow awesome good let's see well that works the middle one these don't work why is that happening let's see so basically all of these should get this let's see what's happening here line 1 line 2 and line 3 so we're going to add the toggle to the line 1 line 2 and line 3 so this effect should take place here huh what did I miss what did I miss transform rotate well here's one problem here is the second problem wait what's going on here there we go so kind of messed up my spacing in there alright make sure make sure it's okay but we also want to add a transition to these so it doesn't look so so boring so but I think I use let's see how much I used I used a 0.3 ease on this so try to go and find your burger dip here add a transition of all 0.3 seconds geez and we should be done so there we go awesome okay so there we go look at that nice and the cool thing again is you can add another one of these and you don't have to modify the delay or anything is just gonna work magically look at that it's just gonna work so you can also remove let's remove these two BAM there we go awesome here we go that's it guys hope you enjoyed this tutorial oh I know this was long as hell so I apologize for that but yeah this was quite quite fun to make hope you enjoyed it and yeah make sure to suggest anything else you want to see yeah I can also want to do some kind of lock type of videos definitely just about life about what they're for sure and yeah enjoy your day it's it's hot as hell here so I'm gonna go take a shower okay peace

Channel: Dev Ed

Views: 1,136,464

Rating: 4.9420781 out of 5

Keywords: reponsive navigation bar, responsive navigation tutorial, responsive nav bar tutorial, responsive navigation css, html, javascript tutorial

Id: gXkqy0b4M5g

Length: 35min 4sec (2104 seconds)

Published: Wed Aug 29 2018

Reddit Comments

[u/storyofedd]

As per request here on web_design I finally got the time to put up a quick tutorial for those of you who struggle with responsive nav. So I made one and included some simple animations. Again feel free to leave ideas and ways to improve a responsive navbar and other suggestions for animations. Hope you enjoy this one!