JavaScript - How to Create a Responsive Hamburger Menu with HTML, CSS, & JavaScript

[Music] hey what's up guys in this video we're going to show you how to create this responsive navigation menu this is what it looks like full screen and then when you resize the window it'll turn into a hamburger menu and this is how it looks when you click on it [Music] alright guys let's get started let's create a header and a nav inside of that i'm going to give this a class name of navbar now let's create a link and this is where the name of our company is going to go we're going to add a hashtag inside of the href because this is not actually going to go anywhere we're going to give this a class name of nav branding so i'm just going to add dev in there now we're going to create our nav menu so we're going to give that a class name of nav menu alright the first item we're going to add we're going to give it a class name of nav item and inside we're going to add a link once again that's not going to go anywhere so we're just going to add a hashtag and we're going to give this a class name of nav link so this is going to be for the home page we're going to copy this twice and this is going to be for the about page and the contact page all right right under our unordered list here we're going to create a container and we're going to give it a class name of hamburger and instead the hamburger we're gonna add three spans we're gonna give those a class name of bar and we're gonna need three of those so we're gonna copy that twice all right that's to be it for the html in here we're going to start by removing the default padding and margin and we're also going to add box sizing border box let's change the color of the header i'm going to go with hex code 262626 and for the list items we're going to use list style none for our links let's change the color to white and we're going to use text decoration none for the navbar we're going to go with a minimum height of 70 pixels and we're going to turn it into a flexbox let's use justify content space between align item center and we're going to give it a padding of 24 pixels on the left and the right let's also turn the nav menu into a flexbox we're also going to use space between and align atom center we don't want our links so close together so we're going to use a gap of 60 pixels let's make the text in our nav branding class a little bit bigger we're going to go with two ram and for the nav link we're going to use a transition of 0.7 seconds ease and that's going to be for the hover effect so let's add that now so when we hover the links now they're going to be that color right and we don't want the hamburger to display so we're going to use display none and we're also going to use cursor pointer all right now let's create the little bars that make up the hamburger menu we want them to stack on top of each other so we're going to use display block let's give them a width of 25 pixels and a height of 3 pixels and we don't want them so close together so we're going to use a margin of 5 pixels on the top and the bottom and auto on the left on the right and we're also going to use webkit transition we're going to go with all 0.3 seconds ease in and out and you can copy right from when it says transition all the way to the end and you can just paste it in the bottom all right let's also give these bars a color of white and now we're going to add a media query at 768 pixels so at this point we want the hamburger menu to display so we're going to use display block and we also want to create the animation that is going to make the hamburger menu turn into an x so the top and the bottom we're going to make an x and the one in the center is going to disappear so we're going to do hamburger active and we're going to activate this class with javascript so we'll get to that in a moment and here we're going to do bar and child so for bar number two we're going to use an opacity of 0. and we can copy this let's change this to 1 and we're going to use transform and we're going to stack two properties on top of each other so we're going to use translate y we're going to go with 8 pixels and we're also going to use rotate 45 degrees all right let's copy this we're going to change this to 3 and let's change that to negative and this 2 negative as well and when we click on this hamburger menu of course this is not going to be here the menu is going to appear here so we have to create the settings for that so let's start with a position of fixed and this is gonna ensure that when we scroll down the menu remains on the screen so it's not gonna stay on the top it's going to remain on the screen until you click on one of the links or when you click on this again all right let's hide it from our view we're going to use left negative 100 percent and we want it to come off the top by 70 pixels let's set the gap to zero and flex direction to column that way the links in the menu appear in a column all right let's use background color we're going to go with the same color as the nav bar and we want the menu to take up the whole screen so we're going to use with 100 and we want the links to be in the center of the screen let's also give this a transition of 0.3 seconds that way the menu doesn't appear on the screen as soon as we click on the menu so it's going to take 0.3 seconds for it to appear on the screen and we don't want the links of our menu so close to each other so let's give them a margin of 16 pixels on the top and the bottom and whenever we activate this nav menu class we want to display the menu so we're going to set left to zero currently it's at negative 100 and once again we're going to activate that with javascript all right in here you want to get access to the hamburger class so we're going to do query selector hamburger all right let's copy this we also need to get access to the nav menu right now we're going to add an event listener to the hamburger it's going to be of type click so as soon as you click on this hamburger we want to activate the class that is going to turn this into an x and also the class that is going to show the menu so we're going to use classlist and toggle and we're just going to type in active let's copy that and we're going to do the same thing for the nav menu alright so now when we click on this the menu appears and when we click it again it disappears so now all we have to do is when we click on one of these links make sure that this closes so this goes back to how it was like this to do that we're going to use query selector all we're going to select the nav link class and for each link we're going to add an event listener and this is going to be a click event at this point we want to remove the active class from hamburger and nav menu so we're going to use class list remove active let's copy this and we're going to do the same thing for nav menu all right so now when we click on this and select one of the links it's going to close the nav bar and that's it

Channel: codefoxx

Views: 4,199

Keywords: Responsive Navigation with Hamburger Menu, Easy hamburger menu with javascript, How do you make a simple hamburger menu?, How do I make a responsive hamburger menu?, How do I create a toggle menu in HTML?, How to create a hamburger menu in HTML CSS and JavaScript, Mobile navigation menu javascript

Id: flItyHiDm7E

Length: 11min 25sec (685 seconds)

Published: Sat Aug 14 2021