Responsive NavBar Using HTML CSS JS | Navigation Menu Bar With COOL Animation | Hamburger Menu Nav

in this video as you can see in the preview on the screen you're going to create a really really cool menu with animations and effects we're also going to make it responsive so it'll work also on mobile devices by the way before we get started you can now get the source code of this video and all the others the link will be in the description down below you can also find a f links to really interesting things including amazing learning platforms where you can take your skills to the next level so go and check them out down below because you don't want to miss them okay so here I've already linked all the Styles sheets I need as usual so the font awesome stylesheet and the main.css file live server is running and also Pria is running as well I've made videos about font awesome pra live server so I leave the links in the description box down below especially font awesome because you need to know what styles sheets you need how to download them etc etc as you can see this is the structure of my project so the index. HTML then the images a folder with pizza which is what I'm going to use then the CSS with the font awesome folder and the main. CSS file okay so first of all I'm going to do something like this so body div with the ID main container instead of this another div with the ID content container like this instead of this another div ID in this case content lay and then you'll see why we need that then the header inside the na and then inside the n in anct with the has sign like this home and then another with the ID menu BTN like this and also instead of this we're going to place the font awesome icon so I'm going to show you where we can find it so let's go here as you can see up here for awesome.com icons then you search for the icon you want so in this case I want bu like this all right so I want the free version which is only this one you can find the one that you like you go down here you click on it copy it then we go back here and inside of that we paste it okay so the header is done so let's see what we actually get as you can see this is what we get pretty cool right then here we're going to do something like this that's actually okay so ID content then instead of here an each one with best ways to make pizza from scratch like this pretty cool so image and then images and then pizza. jpg then paragraph let's actually just do something like lurm you know 300 maybe it's just too much that's actually do something like that okay then I'm just going to copy this another paragraph down here like that perfect and this is what we actually get okay then after the divs which is this div so the content container we are still inside the main container okay okay so after this div here still inside the main container we're going to add another div with the ID menu container and inside this ID close menu and then here another font awesome icon so let's go let's close that let's search for x mark down here we copy that and then then we paste that there all right then we've got enough of course these are all like hash signs but of course you would have your own links right so home and let's do something I did so recipes Services okay to make that more real right so basically this is what we get and as you can see you've got this menu down here okay so now that we've got the HTML in place we can go to the main. CSS file so here by the way if you like the content of this Channel and you want to support it you can get the source code of the video or you can send me a small one of donation the link will be down in the description you can become a member of my patreon but you can even use the links below to join amazing learning platforms and other cool stuff so all the links will be in the description box down below so go and check them out and thank you so so much for the support so first of all let's reset a few properties so box sizing border box actually like to do that you can do even more reset if you want then the body I'm just going to have the background color and this background color is going to be 5 a32 e b okay that nice color there the main container is going to be withth 100% like this then position relative all right because then we're going to use absolute one of the children okay then content container this is going to be withd 100% then mean height 100% of the viewport height background color white position relative display it's going to be Flex Flex Direction column align items Center and then of course transition transform 1 second box Shadow 0.5 seconds and of course the transform we're going to do something like scale one and then translate X zero okay because then we're going to change them and we're going to see a CO animation right okay so now the header content header and we're going to do like something Del like this the background color is going to be 5B 66 FD display Flex Flex Direction column and then align items center now that we've got this we are going to style the nav so content contain [Music] na navigation then width 100% height 70 pixels ping 10 pixels 30 pixels then display Flex justify content space between and then align items Center it to be better right here you've got the links that now we're going to style so we need to style the links so content like this container a like that and then text decoration none I don't want the underline or the colors Etc 25 pixels color white and also we want the menu BTN so the icon of the menu we want that to be a little bit bigger okay so so much better right at least we've got the menu done by the way just as side note on Firefox on Windows this scoll bar by default has the same color as the background of the body okay so this same color here and here I am on Linux so as you can see the scroll bar has this dark color okay it could be either dark or light but as I said on Windows specifically on Firefox the scroll bar has the bluish color and it doesn't look great because the background is white as you can see on other browsers this shouldn't be a problem because I've tested it a bit and it looks like the color of the scroll bar doesn't change like that so this sort of problem should be only on Firefox as I said specifically on Windows because here you don't have that problem and luckily on Firefox you can change the color of the scroll bar and this works on Linux as well on other browsers this is still not possible but also the color doesn't change automatically so you shouldn't need to do this right so to change the color of the school bar we can actually do the up here we're going to do HTML School bar color and I'm going to give it a light gray and white so as you can see that changed also here on Linux as you can see it changed let's actually try red so you can actually see that it really changes so as you can see now it's red and yellow this doesn't look great but just to show you okay and you could even do something like scroll bar with none to make it invisible so you don't see the scroll bar or thin which is thinner as you can see but as I said this doesn't work on other browsers only on Firefox at least in the documentation Etc there is in compatibility with other browsers just with Firefox the others are testing it but I don't know when they will actually support that okay but now you know that you can do that because otherwise as I said you would have a white background here and this big Scholl bar with this sort of blue color that doesn't look great at all right okay so now that we've got that out of the way we can carry on with the actual video so after we've done that we can actually start the content and the content is going to be 100% Max width pixels pting is to be 10 pixels 30 pixels 100 pixels and 30 pixels then display is going to be Flex of course then Flex direction is going to be column like that and then align items is going to be Center a little bit better right down here as you can see you still have the menu but don't worry we'll fix that then content the H1 margin 30 pixels zero and then font size let's make it bigger like that and then text align Center all right then the image content image with 100% And then margin bottom 30 pixels like that if you're enjoying the video please let me know by clicking the like button and also subscribe to the channel as well for videos like this one and then now let's style the menu container so position absolute because we actually going to move it around a to be then the top is going to be 30 pixels right is going to beus 200 pixels and then transition right which is what we'll use so one second so as you can see the menu is not here anymore but as you can see you can sort of see that up here but now we need to style the actual navigation so menu container n display Flex padding top it's going to be 80 pixels height 100% Flex Direction column and then justify content start like that so by doing this let's save it as you can see the menu is not there anymore it's hidden outside of the screen but there is a problem since we have cont content on the right okay we can actually scroll that way and you can sort of see that okay you can see the content here because basically the main container ends here and basically you've got this overflowing it doesn't look great because if you just scroll that way you can see that so how can we actually fix that we can actually go up here main container okay overflow x hidden basically everything that overflows on the x-axis will be hidden so as you can see we cannot scroll that anymore because now it's over here but you cannot scroll because it's hidden so that's another thing then let's go down here by the way a little reminder you can now get the source code of this video and all the others the link will be down in the description so now that we've got that we can actually style the links so the text decoration is going to be none the font size 24 pixels the color is going to be white the padding 10 pixels Z 10 pixels Z transform translate zero transition form 0.2 seconds okay 200 milliseconds and this is basically because we want to actually make a CO when we have over the the links so in this case we're actually going to do that here H and we can do something like transform translate x 10 pixels actually here we can actually write X translate x0 10 pixels all right and then last but not least we need to style the Co menu icon and it's going to be white font size to be bigger than top Min - 10 pixels right 110 pixels actually it's better to just Place position absolute down up there it's better like that so the position of the close menu icon is relative to the menu container because the menu container up here is position absolute as well so then this is relative to this and this is relative to the container of this so the main container basically okay because the main container has the position relative here so this this and then this okay I hope that makes sense okay so now that we've got that as you can see we've got this but we cannot see the menu over there so we need to actually style the menu when the menu is open and of course to change the style we're going to add a new clust with JavaScript when we click on the button and at the moment though I'm just going to add it manually in the HTML file so up here we can actually add to the main container the class menu open okay so we can actually see what we get and then we'll actually write the JavaScript to do that when we click on the button so let's go back here okay so first of all I'm going to do something like main container with the class menu open then the menu container is going to be right 135 pixels okay so when the menu container has the class open then the menu container is going to be right 135 pixels as you can see you've got the menu here okay of course you cannot see anything because we need to move everything left okay then the main container with a class menu open again but in this case content container and now this is going to be fun so transform scale 0.8 and then translate xus 250 pixels as you can see we get this so this is the final let's say result as you can see here you've got that then let's actually add the shadow as well and then I'm going to show you one thing that you need to be aware of so 0 0 0 0.7 okay so as you can see you've got this cool shadow around but there is a problem as you can see now you can still scroll up and down so this is the content container this whole thing here and of course the content container stretches to basically hold the whole content but we don't want that we actually want just the part that we see before scaling so we want this part and then all the content down here we want to hide that okay so we actually want just this part we want to freeze there and then we want this part this visible part to scale and then translate here but we don't want this content just want this okay so how can we actually do that first of all we want the height of the content container to be this so from here to here so the visible part and we can actually do that using height 100% of the viewport so now the height of the content container is this in fact if we scroll down as you can see this is where the content container ends and this is Overflow but we don't actually want to see the Overflow we want the content to sort of stop here and everything below that we want to hide that and how can we actually do that we can actually do that by doing something like overflow hidden like this as you can see now you cannot scroll up and down because the content down here it's hidden and if we transform then as you can see down here you don't have the content so this is basically what you were seeing before the transformation took place and the viewport height is from here to here of course now it's scaled down to 80% okay so that's why it's smaller and if you remove the Overflow hidden as you can see you still get the same thing the same content but down here you still have content that is overflowing the container and you can still scroll up and down so that's why I actually wrote hidden I hope that makes sense and now you cannot scroll up and down there is also another problem which is that you basically can select things inste of here so as you can see you can select that you can do whatever inside of here okay you can click the buttons you can do whatever inside of this we don't actually want that and do you remember that overlay that we added in the HTML file so content overlay as you can see here so we're going to do something like main container menu open content overlay and this is going to be position absolute top zero bottom zero and then it's going to be right zero and left zero so basically we stretch it to cover the whole container cursor it's going to be pointer so let's actually see what we get so as you can see now we cannot select anything because over here you don't see that but there is an overlay an invisible overlay and as you can see the cursor changes because then we want to be able to click on the X here and on this here to actually close the menu so that's what we actually want to do so now before before we go and write the JavaScript code we can write a few media queries to make this responsive because let's actually open the developer tools so over here you can actually click the responsive design mode Let's actually start from this okay so basically now this is scented but if you do like this this this this this as you can see it goes left left left left and it reaches this point and it doesn't look great so what do we need to do we actually need to write a few media queries that will recenter things every once in a while so let's say that we want to recenter it when it's like this we want to recenter it a little bit then when it's like this we want to recenter it a little bit Etc you can do that as many times as you want even every 100 pixels it doesn't make sense to me but if you want to do that just do it so let's go back to the main CSS file like here and we are going to write a few media queries and then we we can have a look at the JavaScript code to do everything so mean with pixels like that header now this is actually another thing that I wanted to do so this is not for the menu but this is to change the pading of the Navar and you'll see what I mean later on then we can actually do something like this so let's copy this okay so here I'm going to write Max that's fine like that and here instead of header enough we're going to write close menu I like this and then down here we're going to write main container menu [Music] open menu container right 110 pixels and here we're going to change that and this is going to be right minus 80 pixels okay so let's see what we actually get so we start from here and we go back down down down with the width so if you go down as you can see it sort of recenters things okay so I'm aiming to actually keep this menu sort of in the center okay so as you can see it's resented okay and then I want to do that every 400 pixels so 1,000 and this is going to be 60 and this is going to be 90 pixels and then I actually want to do that 600 pixels for the last time 40 and 70 okay so let's actually Zoom that as you can see 1,000 it goes a little bit that and then 600 same thing so then now with the iPod this looks like that with the iPhone it looks like that so it looks fine all right that's pretty cool in my opinion okay so now that we've got that out of the way and we made it responsive we can actually add the code to actually open it by clicking on the actual button because now it's just like that okay so let's go back here Perfect by the way if you like the content of this Channel and you want to support it you can get the source code of the video or you can send me a small one of donation the link will be down in the description you can become a member of my patreon but you can even use the F links below to join amazing learning platforms and other cool stuff so all the links will be in the description box down below so go and check them out and thank you so so much for the support so first of all we need to remove the class from here because we're going to add it using JavaScript so this is what we've got now perfect and now we actually need to go back here down here script you can actually make your own file if you don't want to write it down here I've just decided to write it down here okay so first of all I'm going to get a few things that I need so menu BTN document quy selector then menu vtn then we can actually duplicate that so here it's main container the selector is main container of course then close menu BTN and this is of course close menu and this is content overlay and the overlay like this then after that we actually need to add an event listener not listener when we click of course I need also to write event here I need that because now I need to do something like prevent default because of course when I click on the link I don't want it to behave like a link a real link but I want it to do what I'm actually going to right so the main container class list add menu open then down here let's actually copy this I'm going to do something like close menu button same thing but of course I want to remove like this and the same thing for the overlay so content overlay I want to remove the menu open so let's see what we actually get and I can already tell you that there is a thing that we need to fix so let's go here so when we click on this this works like a charm so let's actually close here so when you click here that works but there is a problem as you can see when you click on the button to close it there is a sort of movement down like it goes down straight away and then down here you can see already the Overflow all the content down here so look down here did you see that and also here you can tell that it goes down straight away and then it goes up you see that it doesn't look great but why does it happen because basically when we remove the class menu open okay let's go back here here right so when we add the class menu open then the height is 100% of the viewp straight away and the Overflow hidden straight away the same thing happens when you actually remove the class open so basically the height to % goes away straight away and then the content height is used and the Overflow goes from hidden to visible straight away you don't have something in between like in this case the transform the Box Shadow you can have steps all right and there is an animation so it starts 40 pixels then 39 38 Etc and then the scale the same thing goes 0.8 0.81 0.82 of course it does smaller steps so basically when you click here or here to close the menu then the Overflow goes visible straight away and then the height goes content height straight away and you see that thing here so it's like now it's hidden visible straight away 100% of the view Port height content height straight away okay so we want actually to wait until the animation finishes and then we actually want to go back to the height of the content and to overflow visible okay so we want hidden hidden visible okay 100% of the viewp put height content height when the animation finishes so how can we actually do that one solution is to add another class main container and I'm going to call it delay you can call it whatever you want content okay and these things here I'm going to place them here we've separated the two things so these properties are added when the menu open is added and they are removed when the menu open is removed these two things are added when the delay class is added and then removed when the delay class is removed and we are going to delay there so that this class is removed after all the animations finished okay so now we've got that we've got that class we actually need to add it so here we can add the class delay and of course here when we click the close menu button we want as I said a delay because otherwise if we actually remove the class delay St way it works the same as earlier right so we want to do something like window like this the timeout is going to be 100 Mills like this and we want to do something like main container class list remove delay and we want to do the same exact thing when we click here okay so basically what happens we click on the menu button the class menu open is added the class delay is added so all of these properties are added straight away okay so we've got that effect then when we click the button to actually close the menu then the class menu open is removed straight away so basically these things go back to normal and you've got the animation of just those two things then there is a timer going and after one 1 second the class delay is removed and then these two things are removed and you go back to normal so you go back to the content height and to overflow visible so basically you don't see that because you sort of remove them after the animation has finished so let's actually see if that works so let's see okay so now both classes are added so you've got menu open and delay but when we click on this to actually close the menu look down here so we can see if that works as you can see we don't see that sudden movement down so basically now when you click on this you remove the class menu open straight away so the animation starts but then you wait one second and then the Overflow becomes visible and the actual height becomes the content height and not the viewport height anymore all right so it's like overflow hidden hidden hidden visible okay so you sort of delay the change of these two properties so the over flow and the height until the animation has finished and then when you remove them you don't see anything changing but under the hood actually you're changing things because now you can actually scroll and here you cannot scroll right so now on the screen you should see another video about web development so go and watch that also check out all the links in the description box down below if you want to become a better programmer and take your programming skills to the next level and also if you want to support the channel as well don't forget to like the video and also subscribe to the channel as well for more videos like this one and I see you in the next one bye

Channel: Fabio Musanni - Programming Channel

Views: 713

Keywords: web development, web dev, css3, css tricks, programming, css tips, hamburger menu css, navigation bar in html and css, navigation menu in html and css, navbar html css, navbar responsive html css js, how to create a responsive navigation bar in html and css, how to create a responsive navbar using html and css, responsive navbar with animation, responsive navbar with cool effect, navbar css tutorial, navigation bar css tutorial, how to make a responsive navbar

Id: TvvMpiClqyY

Length: 31min 32sec (1892 seconds)

Published: Thu Nov 23 2023