Animated Responsive Navbar Tutorial

hello there my gorgeous friends on the Internet this video we're gonna create a responsive navigation bar but rather than having that pouring block to expand when we're on mobile when you click on the hamburger up here we are gonna add this liquid motion expansion thing to it okay so as you can see here on the screen when we click it it just expands very nicely and slick with the emotion II I have no idea what I'm talkin about I just roll the intro just roll it alright so what we have here and the S code I just have an empty index.html is filed at CSS and we have an app touch a s all of them are empty besides the CSS which I usually just remove the basic stylings here and I've attached this SVG which we're gonna find on my github so let's get going we are gonna go to index.html here and we're just gonna add a minimal markup here it's not it's not too bad so all we have to do is just create a nav here and here we're gonna have the hamburger which is gonna actually be invisible so we're gonna just create three divs here with a class of line and which we can duplicate by holding shift alt and just pressing down twice that's gonna give us three lines and that's it that's all we need in here now this again is gonna be invisible and when we're on mobile we're gonna just add these styles to it so that's all we have there and then we have a ul with the actual links to it to the like about contact and projects so you can do ul dot and then you can add the class name which I'm gonna add nav links like so hit enter and here we're gonna have an Li with an 8 anchor tag in here I'm just gonna add a hash tag here it's not gonna take us anywhere for now I'm gonna add about and I'm gonna duplicate these twice again here I'm gonna rename this to contact and down here we're gonna rename this to project and that's that's everything we need here that's all in EV and just to have something interesting on the nav on the on the page not just the navbar we're gonna add just a section here called landing ok with the clients of landing and here I'm just gonna have the image of that SVG that is attached I'm gonna call this dots again this is just optional you don't need to do this but I'm gonna do it just so everything looks nice and we can pop this open with my other click doesn't work open with live server I have to change this stupid thing okay there we go that's all we have and it looks amazing I'm gonna drop it in here like so I'm gonna make it smaller actually I'm gonna make it fullscreen because we're gonna optimize this for desktop first so let's go into our style that CSS and make this little thing look half decent okay so all we have to do is let's just grab the nav here I'm gonna give it well that's weird let's switch to English I'm gonna add a height of 10 th to this so that's gonna be the size of our nav bar and I'm just gonna add the background and we can actually go to the circle SVG and get this one which is 5 B 7 8 C 7 it's gonna be this nice bluish color so let's take a look and that's what we have there as you can see the links are up there and that's all we need so let's also get the nav links so this is the unordered list on the page and we can display this flags so it goes horizontally like this okay so they're not going and call him anymore and actually let's make these visible so I'm gonna change the colors of them I'm gonna get nav links I'm gonna do a nasty selection here I don't recommend usually add a class to this as well but we're gonna do this one fast I'm gonna add a color of white so we can see and I'm also gonna remove the text decorations and all the other things that have we usually just don't need so we do that then we're gonna do the text decoration we're gonna remove this we're gonna say none font size let's make the sixteenth pixels which I think it's the default I'm just repeating myself let's get the body here I'm gonna add the font family and I'm gonna change this to sans-serif like so Oh fun not on display font family let's just do this one because it looks doesn't look that bad okay perfect so as you can see there they are now to remove these thoughts from there we can do list style and we can do none and the nav links whoops and that's gonna remove us all those dots up there all right so we just have the nav links in here and what we can do is we can add a width to these let's make it wit 50% so this is the unordered list so just to visualize this I'm gonna add a background color of light coral so this is what we have this is our unordered list here I'm gonna add the height of 100% so it's the same height as our nav because that's what we want so height 100% okay there we go and now I want is to be spaced around and aligned in the center so to do that all you have to do is say justify content space around that's gonna do it horizontally like so and then we can do a line items Center to do it vertically there we go okay but now I kind of don't really want this to be here I want these to be up on this side so how can we do that a simplest way we can do that is just to add a margin left of Auto so when you add Auto it's automatically gonna jump it to the side of the page good and now we can remove the light coral because we don't need that let's get rid of this hit save there we go pop this open looks looks looks wonderful okay perfect let's also just modify this a bit so it looks half-decent so I'm gonna go back to vs code here and down here let's just get your landing landing like so I'm gonna add a height of 90 VH okay so we have ten here and I add 90 here just so it's full screen so 90 plus then I believe it's 100 and then we're gonna do just display flex again here justify content center a line opens center okay just aligning everything in the center here perfect and now what we can do is just get the landing h1 here and just add a margin of like 100 pixels and a font size 50 pixels make it bigger and let's also get the color in the upper color here which is the pink is the pink actually let's see it's safe well don't hit save it had color and then add this color let's see yeah we got this nice pinkish color a pink it's purple what's wrong with me today okay there we go I always miss a thing in purple let me know if you do that as well or if I'm just very very stupid okay so we have that going perfect and now we can just mess around and make this responsive so we finished there and how can we make this responsive it's super easy we just go down here we add a round symbol and then say media screen and and what we can do here is add parenthesis and we can define the value when this media query should take effect so if I say here max width I'm gonna add a colon and if I say 768 pixels like so and then I just out open curly brackets again like we normally would if I add body here I can just get the body and save this plain none so basically what happens when I hit the 678 pixel mark it's gonna add display:none to our body and as you can see it's not working the reason why that's not working is we need to add this pace down here okay so media screen and max width hits safe and as you can see now when we go all the way down here it's gonna add display:none okay so we don't want to add display:none to this so we're just gonna make this small again like so and we can actually stick our preview here so we can visualize everything okay so we want this to take effect around I don't know around here okay so what we're gonna do is we're gonna get the that's huh let's get the nav links first so we're gonna get the nav links and what I want to do is add a position fixed to these like so and it's gonna bring it down here as you can see I'm gonna just add a background of we're gonna get the color from up here that bluish color again so we're just gonna stick that background so we can see what's happening here so there it is okay and what we're gonna do is add a height of 100 V H and a width of 100% so it's all fullscreen like that okay now this is fixed so we cannot do anything on the page anymore okay so that's what we got we're gonna also add a flex direction column to this so it goes down that way okay perfect so that's what we have for now here I'm gonna add this plane none for - this just for a bit so we can visualize everything else so as you can see since we added a position fixed to this nav links we don't have anything up here anymore so let's add the burgers so let's go all the way up here or down there either way we can just get the the line alright so each line we can add a width of 30 pixels let's add a height of 3 pixels a margin let's actually add just a background white to this and see what we got okay so we just got those three lines up there but we kind of want to have some space in between them so we can do that by adding a margin of 5 pixels and there we go we got our nav bar going right there our hamburger perfect let's also get the nav here I'm gonna add a position relative to this because I want to move this burger all the way here in a very specific position so now if I add position relative to the nav I can get the hamburger remember the lines that we have here are actually in the hamburger okay so we can add a position absolute and we can move the whole thing all right absolute I'm gonna add a cursor:pointer so it looks clickable okay perfect and then down here we can just add right five percent like dad's gonna move it that way let's add the top of like 20% it's kind of gonna move it there and to actually position this better we can do a transform translate minus 5% and minus 50% okay just position it actually I think it's the other way around actually yeah okay add the minus 50% here and here I add the 20 so I have to add 50 and then it's perfectly perfectly gonna be in the center I cannot speak anymore these hamburgers are making me want to eat and okay perfect so that's what we have good let's bring back the nav links here and we are almost done so what we need to do is to get that beautiful looking circular animation is down here rather than hiding this this nav what we can do is we can mess around with something called clip path so if you don't know what the mask is don't worry I'll explain to you let's say we have this piece of paper okay and now I want to make a mass of a circle in it so I'm gonna kind of cut out a circle here alright and this will be my mask this is how it looks okay it kind of looks like a circle and what we can do is we can have this can be our nav okay our net or big blue nav bar and if we put to be mask on it only that small green is gonna be visible okay and then we can take this and we can expand this mask all the way till it fills up it folds up it fills up the whole screen after that terrible analogy we can get going so then pound here in our nav links we're gonna create that mask so to do that we're gonna use something called clip path like so clip path and we can add a circle as you can see up there hit that and now what we can do is we can add how big we want this circle to be so if I add a hundred pixels hit save as you can see it's gonna be a hundred pix if we add 50 it's only gonna show 50 pixels okay but we want to start this off and let's start it off at zero okay but before actually we do that I actually want to show you what else we can do here so we have a hundred there and after we can add an ad like that ad and we can also define the position we want this to be yet so to define the position we can add percentages just like top left right bottom okay so to do up we can go 90% actually it's gonna be right I apologize and then we can put it up with this 10% so it's gonna go up however if I want to make it go more up I can do like something like minus 10% that's gonna bring it all the way up here so it's kind of out of frame of it okay so that's the way we can do that and actually this property just to warn you doesn't have that great of a support so to add a bit better support this make sure please please please make sure you also add this you're gonna do a line WebKit like so WebKit clip path clip path like so okay so - WebKit another line clip line path and then colon and we can just copy everything from up here and paste it down here hit save okay it's gonna basically be the same thing alright and then we can also add a transition to this because we want to transition it we're gonna add a transition all one second and we can do an ease for now actually we can do an ease out okay it's probably gonna make it look cooler okay now we can create a a open-class to this so in JavaScript when we hit this it's gonna animate so let's take a look on how we can do that we're gonna create a nav links dot open like so okay and here I'm just gonna copy these two properties from up here so let's hit copy and drag it and back here actually let's close this up for more space I don't know why that didn't do that sooner hit paste this sucker and let's let's modify this so now we cannot see what we're modifying here because this is gonna be added after so let's just try to modify it up here and then we're gonna copy the properties and we're gonna change everything back to 100 pixels so let's do let's see 500 and see how that looks and actually we have to modify both of these I believe so look at that 500 if we do 800 now here's kind of like trial and error and you have to see at what size it's gonna fill up most of your screen because if you go smaller it's gonna probably fill it up more and if you make it wider it's gonna fill it up less so now come on work with me all right let's try a Towson all right that fills it up full screen for us let's expand it a bit perfect all right see it's popping out there a bit so you can probably go a bit more but I'm gonna leave it like so so just experiment with this and you can go bigger or smaller all right so we need around 1000 so I'm gonna switch this back to a hundred like we had at before and down here when we add the class we're gonna add the Towson to both of these okay hit save perfect let's hit refresh and now what we can do is let's also change these to column so the landing flex Direction column okay thank that okay perfect there we go let's go into our Java Script and add that class so close everything up here make some space back here what we can do is just get the hamburger hamburger it's gonna set it equal to document a query selector and we can get the hamburger all right we can also get the nav links it's gonna be equal to document a query selector we're gonna do the same things here nav links and let's also get the each individual links cons links it's gonna be equal to documents dot query selector all I'm gonna select all of them here I'm gonna do nav links like we did up there but I'm also gonna select the L I okay so all the Allies and this okay let's just add the opening transition to see if it works so we can get the hamburger we can add an event listener to this and on click we can just run a arrow function here and what I want to do is I just want to get the nav links dot class list I'm gonna toggle a specific class and which class well the open that we just created so hit save let's see hit and boom there we go we get a nice nice super nice animation Oh Edie we have a problem where it's my hamburger it's gone he ate it okay cuz I'm really hungry so let's go back to our style that CSS and reason why that is is because this expands right on top of the nav bar so what we can do is we can go up to our hamburger and we can just add a z-index of like two or something and then it's still gonna be up here so Wow here we go expand this beautifully looking good now another problem is this is still well it's not clickable it should be but as a safety percussion what we can do is we can go to Navin seer and we can add a pointer event none and when we open it we can add those point pointer events back pointer events all there we go so we don't have any issues with clicking them heads open there we go beautiful everything is clickable close and there we go that's all we have now to also add these to fade and individually we can quickly do that by let's just do it this way we can go below are our landing here I'm just gonna add nav links Li I'm gonna add opacity 0 to all of them okay and now let's also get the nav links Li a again super ugly selection I apologize I'm gonna change the font size to like 25 pixels so it's a bit larger and here what we can do is I can get the nav links Li I'm gonna get the ends child well and and can never write this correctly ends child we can get the first one and we can apply a DA a different transition to all of them so I'm gonna get the first one the second one third one and I'm gonna just change one to three here what we can do is we can just apply a transition all 0.5 seconds ease and we can apply a delay here so I can say 0.2 seconds paste it here paste it here and we can do 0.4 seconds here and 0.6 seconds here okay so we're gonna apply the opacity back and what we can do is just get the allies here and apply a faithful ass to them and just add opacity to 1 okay this doesn't do anything right now they're still invisible but what we can do is back in JavaScript we can add this fade class to them so let's just quickly go back here super simple all we have to do is get the links and for each link here in parenthesis we're gonna run an arrow function and what we need to do here is just get the link class list I'm gonna toggle the fade class and that's that's pretty much it let's see open this up look at that we get a super nice fade we can close this back up and there you go just like that you can add more personality to your navigation so thank you again very much for taking the time and hopefully you learned something new also please drop a sub if you enjoy this type of content on this channel and until next time liquids liquid fluid the dish [Music]

Channel: Dev Ed

Views: 939,091

Keywords: responsive navbar, responsive navbar tutorial, navbar animations, animated navbar, css navbar, javascript navbar animation, burger menu css, dev ed, javascript burger menu, html navbar tutorial, how to create navbar, how to create navbar in html and css, css animations, css tutorial, javascript tutorial, web development, responsive navigation menu, responsive menu

Id: H4MkGzoACpQ

Length: 22min 10sec (1330 seconds)

Published: Wed Mar 27 2019