How to Make a Responsive Navigation Menu Navbar Using HTML, CSS, and Javascript Tutorial

what is going on everyone so today I'm gonna show you how to create your very own mobile responsive navbar so check this out and we're going to be doing it with HTML CSS and a little little sprinkle of JavaScript so make sure you want this video all the way to the end to learn how to do it so currently this is what we're gonna create so pretty much you hover over see the color changes right here little button action changes right there and then when I scroll it and shrink it into mobile responsive you'll see the little hamburger icon boom right there and then basically when I go all the way full like this is just like that's and then I'll click on it boom got this little animation going in and then you can hover over that like there and let me click back again on the X goes back again and then pretty much that's how it is and even when it's like iPad size you can see there we got this action going on right here so without further ado let's get on to it alright so here we are on vias coast the first thing I'm going to do is create our file so once you make a new folder basically go here on because code click on you file and I'm going to type in index.html alright so now I'm gonna go ahead and hit shift then the exclamation mark right there and then press tab and boom now you have everything set up perfectly like this and as I make a style that CSS file so style dot CSS press Enter and I have some plugins so in case your icons look different from mine that's just some plug-in I found but basically have CSS here and then let me command as this on Mac so I can save it really quick and then last we do just a bas so boom and then just press ENTER I perfect now let's go back to index.html and let's go ahead the link our CSS page so type in link then press tab and then next you want to do is simply type in style dot CSS okay just two S's boom and then you can change the title here just put like website that bar and then let's go down to the body and I'm gonna type in script and colon SRC and then press tab and then basically go ahead and type in a pas boom okay so let's go ahead and let's see if this is actually working so let's go open this open with a live server and this should open them right there and basically let's make sure we have it working so I'm just gonna do you know the copy this just I'm gonna type this out alright perfect and a style let's do h1 color red boom I am perfectly okay so everything's working alright in case this is your first time on my channel I'm essentially documenting myself learning how to code so if you do want to follow me along that journey or you can see like my previous documentation videos definitely go down below and hit that subscribe button and comment down below what languages you're learning but here is my take on using the Feynman Fineman technique to learn code better by teaching you stuff that I'm building at the moment alright so let's go ahead and let's start building out the index.html alright so the first thing we're going to do is let's go ahead and let me build the nav bar in the nav container so basically that is the nav so let's see I'm gonna go first and make a container so imma go press class so that's period and this is a shortcut key case you don't know that this works and basically I'm gonna type in nav - container and then I'ma press tab all right now so now we have this div I'm gonna press ENTER and now we're inside of the nav container now in this nav container I'm going to create a tab bar so let's go ahead and type in nav dot and then I'm gonna make it the class nav bar so nav bar and then tab it and then press Enter so now we're inside of navbar now the first thing we're going to do is create the logo or aka the text so I don't have an image for this example so we're going to go with the h1 and I'm just going to name this with an ID and just to make it more specific so h1 I'm going to do a hash tag that's so you can target the IDs and then I do navbar - logo and then I press tab and now we have an h1 with the ID navbar logo and then closing tag here now actually it's go ahead and type in in this this is what I put for this example website just looks Co perfect now we got that like there and then I'm gonna go ahead and add the bar the hamburger menu that you saw so this is basically just span tag so pretty much I'm gonna go ahead and type in the class own name it menu - toggle and then I'm gonna do the ID so that'll be keep presenting yet press hashtag and then mobile - menu and then a press tab and now you have the class and now you have the ID okay now press Enter so now we're inside of this device right here and now I'm gonna go ahead and just simply create a span so I'm gonna go span and then I type in the class bar okay so boom and then on the Mac you can do the shortcut so shift command and the down arrow all right hold on click it again my bad shift alt down so the ship Alt key and then down arrow and so it's not command my bad so shift alt down arrow and then boom here we go and just leave it like this and in case you don't know that shortcut or it doesn't work on computer just literally just copying so you have three and now here is this dip so whatever you click on like the did you can see that's the ending click next to it so out of that dip and then press Enter so now we are still inside the nav right here the nav bar containing right here but we're just outside of the menu toggle did right there so basically now we're gonna create the actual menu item so this gonna be a ul so I'm gonna do you mimic class nav - menu boom okay now press ENTER and now we're inside of the UL okay now we got make some list items so I'm gonna do Li and then we do the greater sign and then a and then my name I'm put class on here so I'm gonna do dot and I'm gonna do nav - links and then press tab so now you have simply the Allies with the a tags in there and then put a hash tag just over the filter placement and then here I'm gonna go ahead and just type in home and let me make this screen a little bigger so that you can see it much better like that's and then I'm gonna do it again the shifts all it's down arrow on the Mac and then basically I'm gonna do this five more times if you're on Windows I mean I'm not sure I don't know the windows keyboards but I'm pretty sure you could figure that one out pretty simple and let's change this to services and I'm gonna go ahead and change this to about us and then let's do a contact us and then here is the sign up so that was the button that you saw so let's do at a separate class so let's actually make that up I added it to it so we'll add with nav link so go click on the class nav links hit the spacebar and I'll type in NAB links BTN so just for button and no this is just the way I'm naming it if you have a better way definitely know the comments below and then pretty much this is this is pretty much it for the HTML the only thing we need to do is add the Google Fonts which I have here so basically if you're not familiar go to google fonts or just type in google fonts fonts google calm and the font that I'm using is and you and it's no need to learn how to pronounce this but basically I just I look pretty cool and I'm clicking on it right here so it makes you just click on there or you can just do the default font doesn't matter this is just like extra of aesthetics and then when you're on here let me make it widescreen so I'm sure you might have a different view basically go down and we only want the regular to 400 so I'm gonna select this style this window will pop up and then we go to embed and then now we have this link so make sure you're on the link not the important to both but pretty much the link tag and then we're gonna go ahead and copy this go into our HTML and just simply just in the head tag I would put it right above my stop CSS I'm hit save and then we'll go to the underneath this and copy this for the font-family and now let's go ahead and head over to our Stata CSS let me just drag this over really quick and first thing we're gonna do is go ahead and do this and you always do this every time let's go ahead and do box-sizing then just do border box see here and then let's go ahead and do margin we get 0 and then padding:0 and then font-family just copy that in boom and then before we go and so I'm gonna have a root so basically this is like extra I guess but I just want to do this just for fun so that that way if I end up adding to this project I have to go through like crazy amounts of all like editing to change colors but basically this is a way to edit the colors on anything super super simple and basically I was gonna name it like this so we have dark gray and then : mhm do hashtag to 1 2 3 to 9 then press enter then dash dash again bright red and again I just made these names up but I just have to have to put the dashes in front of them then hashtag was do f9 for to 3d and then let's go ahead and do dash dash again let's do whites and I just put white just cuz just to make it home look consistent and then basically light red so light red : and then hashtag f9 for 3 3 d CC alright perfect now we save this now so far we go to our page nothing is going to pop up besides that the font has been updated with the one that we just added so let me bring this side-by-side so you can see it much better this and actually let me go ahead a little trick to if you all I believe I don't know if when those news but Mac you just click on the full screen thing and then just click on the tiles and click left a screen and then click on the other screen and boom there you go alright now we are pretty much set and I'm gonna close this side out so you can see better so imma hit command B letter B for a shortcut and now we like this alright so the first thing we want to do is create the nav container so let's go nav - container and we do with a hundred percent so I wanted to reach the full width of the screen and then I'm gonna go ahead and do background color and let's go ahead and do you have to put bar and then - - and I put dark grey which is what we have at the top right there so now you can see it looks like this and depending on your computer screen you know it might be slightly different but doesn't really matter too much the next thing to do is create the nav bar so we're gonna target the nav bar class so dot nav bar and we're gonna use display grids we're gonna use grid mainly for this example you can use fuzz box too but I just wanted our you create for this time and let's go grid template columns and 0.2 fr Auto and then one fr so essentially what this is doing is making it to where the Lux Colo go it takes up only 0.2 parts of the NAB and then we have the set apart then basically the one fr part right there and then we have at see a line items center right here and then let's go ahead and put the Heights I want the height of this nav bar to be 80 pixels and then next thing and also since I am viewing it like this it looks like it's gonna be like almost like iPad style so it's gonna be like a little crunched up but I don't worry about that and then let's go to width and let's go ahead and do ninety percent and this way that we have some spacing on the sides and then we'll do max width just in case is like a giant screen I'll do mess with of this pics right here so that in case someone's watching us like a mega big screen it's not gonna surpass that and then let's just margin:0 auto alright so now go down here and then scroll up and pretty much target the nav logo so basically us through hash tag navbar - logo and pretty much no this is the UM yeah it's a hash tag because it's an ID so you can see here this is the ID we're targeting so basically you're gonna go here and I'm and I just go ahead and color this whites or we could do the VAR white parts so um born after - white this is the same concert doesn't matter but um boom and then go ahead and do justify self and let's do snart just so it's all the way to the left and then margin left 20 pixels so got some spacing over there and now let's go under this one and let's do nav bar the logo just for the um when you hover over it that you can actually go to like the home page eventually if you were to um that stuff so just make a cursor:pointer and it saves it that way whenever you hover it just has a little little hand thing and then boom and let's go down to the nav menu now alright so here we go nav menu and let's do display grid hit save and those do grid template columns imma do repeat five comma Auto so since we have five items in here and I want them to be spaced evenly I'm hit save and I can see it looks like this that's the way I have it right now and if you're watching this on a like a full screen its gonna look much different but since I already like have the settings like this it's gonna be a slight corner like the iPad style right now and then let's go ahead and let's do list style to get rid of that stuff right there so we got rid of the bullet points and then let's do um text align my do Center and then do with 70% so just make it shrinks and then let's go ahead and justify self and so now you can see how it went to pretty much the end of this and let's go down again nav menu and let's go type in let's target the links now so NAB - links and let's just go back to show you what I'm actually doing so we just targeted this entire you well part with the net menu and now we're targeting the individual link so the literal home service about has contact us so here we are here on that blinks and I'm gonna do color whites and I can see it's white tech decoration I'm going to do none so that we can get rid of the underline and now let's click out of this let's do nav links hover so nav - links and I got hover and then we're gonna go ahead and do color and I want target the bright red and boom and then when I do it I want to have a transition so basically let's do I'll do my two E's outs and that's the others works so far boom you can see it's like two point two seconds right there so now we have the red hover for the nav links and now let's target the nav links button so now links BTN so this is the separates signup one right here so how's everything has nav links except the the last signup has the nav wins button class which we added and I'm gonna go ahead and target this with a background color the background color I'm gonna do for bright red so now you can see that's s go add some padding so let's go padding six pixels sixteen pixels and just depend this is just preference I mean you can play around with this but it looks like that's and since the view is kind of um I passed i right now it looks weird so let me actually go ahead and um I said let me get I got out of that right now and let me show you how it's supposed to look technically if you were to view this like yourself like this so it's how it was right now it just looks weird because of the like the more responsive part isn't in there yet but just don't worry about that and let's do border - radius and I want four pixels to make the corners rounded and so far this is what it looks like so pretty much like the homepage is just it hasn't had the affects only the this stuff right here so we need to add the hover part right there cuz right now the color you can't see anything it's gonna go over here back and target the nav links button helper so let's go ahead and copy this class just save some time and then put a hash tag hover and pretty much we want to do is change the background color to transparent and then we're gonna do a color and I could do whites again so let's see boom and let's change the padding just do five pixels 15 pixels and let's do border radius and let's change that to 4 pixels I'll keep that there now let's do border:solid 1px ol and then let's do VAR bright red and then I want to add a transition so transition call 0.3 s or a to add yeah 3 s and let's do so now if I bring this back over it should boom go like this so I see like that that's pretty much that's the main probably have so far so not to call it crazy not too difficult and now let's go and target the mobile start targeting mobile sections here so now we're gonna I should go ahead and we go down here we're gonna mess around with the hamburger menu now so the menu toggle and the mobile menu so let's go down here and let's go and type and type in class menu toggle I'm also targeting bar and then open brackets let's do width of 25 pixels cuz right now this thing doesn't exist yet so we got to create it and that's do height 3 pixels on margin to be 5 pixels auto and then transition I want it to be all zero point 3 s ease in out then last thing I can just do background it'll just be just do whites and boom okay so now you can't see this right now but um eventually I'll show you once you do the JavaScript you'll be able to see how it looks but let's finish off the CSS first then we can mess around the JavaScript after so now let's target our media queries so media screen' and and let's do a max width of 768 pixels and my bad didn't mean to put that semicolon there open brackets and let's target the nap container which was the original div that surrounds everything in here so let's go back to the CSS and taken nav - container open brackets and type in position:relative so we're gonna start on positioning the menu stuff once you see it so we have to have something relative first in order to do absolute positioning and you'll see that in a second and now we have the nav menu so basically even dude class or god nav menu when I do display grid when do grid template columns and we do Auto so now you can see it looks like this so see that so let me actually a little bit so you can see it better so they just ignore the the logo pluck scope are you have to worry about that anymore I was do background let's do var - - right red so now with the background created and then we had to do margins you know just some kids because basically you'll see once I have everything finish but that's like the height of the nav container the nav bar and then it'll be under it so just wanna make sure that zero so that it's perfectly aligned let's do width 100% and let's go ahead and go position:absolute boom just like this and so right now you can't see the top part so we're gonna do is go here I'm gonna do top 80 pixels so now it brings it down perfectly like this and you see that and then we're gonna go ahead and do left : - a hundred percent so this is how we kept the effect where it all scooped in so I'm gonna go like this and then opacity you're gonna do zero and then last thing would be transition all 0.5 s with ease so you don't go to see this yet but that's basically all we had for this and now let's do the navbar logo is basically um I want this to have nice from margins on the side so let's go ahead and just type in ID so hashtag navbar - logo and let's do margin left's 20 pixels here and then go down let's target the nav menu and weird assists for the arm national hamburger icon now so this is the JavaScript stuff so we're gonna actually add this class I'm active so this isn't in the HTML at all for the index.html this is something we add when we do a click event on to the hamburger menu item this will pop up which will have all the cool effects that you see so now we have background var - - dark gray and then we have the left make it zero so this is the menu that we just created so we had it at negative 100% so now it's gonna be zero so once we click is gonna shift it over and they have opacity 1 and then transition Stu going all 0.5 s ease so right now you can't see anything but don't worry we're gonna finish up the CSS really quick and then I'll show you the end result so now let's go and target the actual nap link so nap - links and then let's go and do text-align:center so the thing is let's go ahead and take off this really quick let's see let's do hold on let's go here and just comment these out really quick so you can see this better so you probably own crazy like what am I actually editing so now we're targeting the nav links so again on the index.html all of these the classes with nav links so we're gonna Center the line that there and let's go ahead and let's do a line Heights let's do 60 pixels so they can see it looks nice and clean and let's go ahead and do with a 100% and then just display and let's do table keep it like that go down let's do nav links hover and let's do background color for and let's do dash dash bright red and then we can do color so this is the text make sure it's white now let's do transition all 0.4 s ease stupido so now if we hover you won't be able to see it right now because it is currently bright red but um let's change that really quick so now we have data nap bar so let's do that bar let's just make the width a hundred percent so now you can see that we fixed that so now it's fully I'm taking up the screen let's do nav links and let's do the but in class so this is the signup we have to do specifically because when you hover you'll see this Bachelor let me go and see um one sec yeah I think I messed up the coloring on something here hold up oh yeah so before it's active so you can't see it right now so let's actually see and um might be better if I do the JavaScript now so that we can actually see what's going on let's leave this blank for now because this should be you should be able to see everything but let's go jump scribbly quick and then go back to the CSS so let's go to java scripts are now we're gonna create our first constant and we're gonna just name this I'm going to name this menu you can livi name this whatever you want to like look like this but menu is a lot easier to understand so this is equal to I'm gonna do a target with documents I'm gonna do query selector and then parenthesis and then the quotations and we're gonna target the ID mobile menu so in order to do that you have to do the actual hashtag mobile - menu and this if you go back to the index.html is the little hamburger menu that we were we created that you have yet to see yet but it's basically the I'd be mobile menus right there and next I want to target the actual link so just call this menu links am using camelcase so basically lower case the first word upper case a second this is apparently the training style let's do document dot query selector again and this time gonna target the class so dot nav menu and that's pretty much the UL class right here so pretty basically it's like like that but like the Box pretty much so go save this really quick let's go answer now and now I'm going to add an event listener so this essentially allows us to click on the menu the hamburger icon and then bullish pop-ups let's do target menu now so we're targeting the mobile menu by typing in menu I'm gonna type in dots addeventlistener and then parentheses and then press the quotations and then type in click so basically whenever you click it will do something so right after you type this and then you press comma and then type in function and you can do arrow going the two bombers to make it easier for people as they can understand what's going on and then the curly brackets and then press ENTER so now your screen should look like this and now we're gonna target the actual mobile menu and we're gonna add a class to it so that it will get the effects so basically we're gonna target the mobile menu now and we're gonna type in class list and I'm gonna type in toggle and we're gonna toggle and since we have class list you'll have to put the dot and written to put is active and then press semicolon and then hit enter and the next I'm gonna toggle is the menu links and I'll target the active class which will we create two again so menu class list dot toggle and then we're gonna toggle the class boom so now we have the JavaScript ready so let's go back to the style a CSS and I do have a better idea when stuff starts to add in so we haven't got all the way to those on classes yet but um you'll see it in just a second so pretty much let's go here and type in app links button and let's edit this really quickly and I'll edit the actually Leske I go ahead and add this first and then we'll mess around their stuff so after so border will be none and let's do padding:0 and then border radius will be zero and let's do background color and far and the reason I'm doing all this because on the before the media query and the sign up has special like it had a button effect so we have to basically reverse it and take off the borders the padding is all that color so it matches with the regular items and then we have bright red and then we have the color VAR my bed bar call for the C's whites and then we have the transition and then should be just do all your point for us just do ease outs and let's just do the it's the hover now so there's basically nav links button hover and let's basically go ahead and do border let's do none let's just do petting tell you could have just copied and pasted this so let's go ahead and actually let's just copy and paste the rest so boom and basically I want to change this to this so keep that bright red and keep that white so I'm actually I typed in the wrong thing for the normal button so the normal should be dark gray so let's erase that go back to the normal the non hover dark gray and then BOOM so looks like I have to add I think I'm missing a color on the actual act upon see yes right there so looks like let's see hmm let's go back actually and just keep going I have to add the nobleman you I forgot to add that part so that's why you can't see anything yet so let's go down back under here let's do hashtag mobile menu so that's the ID that's the hamburger menu were targeting now is do position absolutes and then top so actually let me say this really quick so top 20% rights 5% and then let's do um so you can't see that right now but let me do transform let me leave that first cuz I'm right now it's not popping up so let me go ahead and we make sure I typed everything right yeah let's go and let's go ahead and to the last parts first I think that's why okay yes so that's why it's not working yet so let's do menu - toggle and we're gonna do da bar I'm gonna do display:block so now you can see they have a little mini so you probably own it rewards the hammock menu it's been here we just I just haven't typed it in yeah so go you got splay block and then curse your pointer and then one thing I do on the mode menu because you can see let me erase this first so you can see what happened so I do position:absolute it's fully to the left corner so when I do top and I do 20% you can see you went down to 20% from the top and then I want to go from the Wrights 5% and now we hear from the right 5% and the order to make it's like perfectly even I'm gonna go with transform and macey imma do translates and I have five percents and then 20% and then like makes it a little bit more even now again putting on your eye you might say oh that's not perfect I mean we could mess around with this and like you can see when I type that in its like this there's not much difference right now but that's clue pretty close right there and we can go here nothing's happening right now because we have this over here so let's go ahead and uncommon this and let's go ahead and see that and so far it's not yet cuz we still have to add some more classes so let me go ahead and go back down we're almost done and once we add these few classes right here it will show up and I'll have a little effect too so we had the bar now they've got menu - toggle hover and we just make sure the cursor pointer there and now let's target the mobile menu aka the actual hamburger menu so let's do let's do mobile menu and we're gonna use the class that we created in JavaScript so is active because this is not an HTML at all this is Lily we made this with JavaScript which was over here this one right there so we got that's this this line basically creates it so makes that class and then we're gonna do target bar I'm gonna do colon and child and we're targeting the second so like there's three bar I'm trying the second one and I want the opacity to be zero so basically when you make the X it's um like the middle part disappears and let's go down here let's do same concept so basically me just copy this again so copy let me bring this up cuz kind of low now let's take out the opacity for this one and let's put this as the first child so we're talking now the top bar let's do transform and when do translates I'm gonna do eight pixels so if you see what happens it's gonna go like this and then we're gonna rotate this rotate let's do 45 degrees so this makes first half of the X and then those basically copy and paste this again and let's target the third bar now the bottom one and this should be a thing negative and then negative 45 degrees and looks like listen hold on oh yeah translate why my bad and this should be translated why up here I better go crazy I was like what's going on here you go alright perfect so now you can see it looks like this so now we had little menu we clicking on it boom boom like this so now let's see what happened why it's not actually popping up so it should be cuz um so we have the NAB menu and let's go ahead let's go back up here quick I so I'm gonna click on this realize that nothing is happening is because I miss the actual thing we're talking the wrong thing so should be menu links because we want to talk the menu the nav menu which is the UL here so they want to add the class active to this right here the UL so this is what we're trying to target but I was targeting the wrong one by not putting many links so make sure you go back to menu and type menu links and now when we click it boom perfect now just hover over it's everything looks like this and let me go back and show you for the we're doing the nav links button the hovered part right here like if I were to comment this out me tell me this out because you couldn't see this earlier and see how the yeah like it has like this weird fat part to it because it had when we were on the actual this part we had to get rid of all this by zeroing everything out like that so that's the reasoning for this section here so now if we go like this hover over everything we got the red buttons like this and then we scroll in you can see here by 768 it turns into here and the reason it does this because I sit there refresh it so now I go like this go back again now it's like that perfect boom click on the menu ake a hamburger check it out so now you have create your very first nav bar with a little drop-down animation effects so this completes the tutorial for today so if you enjoyed this video go down below and give me a thumbs up subscribe you have not already share this video with your friends and if you saw any issues with the code or ways to make it better definitely let me know in the comments below and I will see you in the next video peace

Channel: Brian Design

Views: 36,992

Keywords: css navbar, css navbar responsive, how to make a css navbar, css navbar animation, css navbar tutorial, css navbar dropdown menu, css navigation bar tutorial, how to make hamburger menu in css, css navigation bar responsive, css grid, css flexbox, css tutorial for beginners, css tutorial, html css javascript, css responsive, How To Create a Vertical Menu, How To Create a Fixed Menu, How To Create a Dropdown Menu With CSS and JavaScript, How To Create a Subnavigation Menu

Id: yFWAOzwovrQ

Length: 38min 44sec (2324 seconds)

Published: Wed Jun 03 2020