This hamburger menu we have this animation where it changes to the close icon and if i click on it once again it changes back to the default icon so this is what we're going.
To design in this video using html css and javascript we're not going to use any images for this we're going to do everything using code so let's get started.
right here's the demo of what we're going to design and if i click on this we have a change into a closed icon and if i click on it once again it changes.
Back to the hamburger menu right here i have created this folder called apple menu animation and i just opened it with vs code so let's go ahead and start creating the necessary files let's start.
By creating an html file i'll just name it index.html and now let's create a css file i'll just name it style.css and let's create a javascript file i'll.
Html5 code all right let's link our css file over here so i'll just type link and in the extra values type style.css and let's also link the javascript file so just type script.
And in the src i'll just type main.js right now let's start with the markup of this menu the first thing we will do is we'll create a container division called menu container.
And in that we need to create these two lines over here so let's create a division of the class of line and we need to have one more division so let's duplicate this.
And we'll also add some specific styles to these two lines so that we can style them differently so let's type line hyphen one and line iphone two.
Now if you take a look at the animation you can see that there are two animations over here so if i click on this there is one animation where it moves.
Down and the second line moves up Wesdigital
And the other animation is that both of them rotate 45 degrees now since we need to add both these animations we will create one more.Division inside this so that it's easy for us to write the css so let's create a division of the class of line inner and we'll also give it a specific class i'll just give it a class of line inner.
One and let's copy this line of code and let's paste it inside the second division and i'll just change this class to line.
Inner two all right that's it with the html of our design now let's go to our css and let's start styling this so before that let's open this in our.
Browser so i have this extension called live server installed in vs code so once you install that you can just right click over here in the html and click on open with live server.
And here you can see that your design is displayed over here in the browser right now let's start styling this so i have already linked the css file over here so let's go to our style.css file let's.
Type menu container which is the container division and let's give it a height of 40 pixels and a width of 40 pixels and let's also set the cursor to pointer.
Let's also add a background color to see whether it is displayed so here we can see we have the menu container now for this demo we'll just.
Bring it to the center so that we can style it correctly so here i'll just type body and i'll just set the display to flex align items to the center justify.
Content to the center and also set the
Height to 100 viewport height now you can see it is exactly in the center and we'll also set the box sizing to.Border box so that we have the correct height and width for all the elements so let's tap menu container and also all the elements inside the menu container.
And let's start box sizing border box right now the next thing we will do is style the line so here we can see we have this division with a class of line so.
Let's type menu container line let's set the height to 28 pixels and also the width to 28 pixels now we need to position this line.
Relative to this menu container so here i'll just have position relative and here i'll just have position absolute and let's also add a background color so.
That we can see it clearly so let's type background yellow right now here we can see that our line division is displayed over here both the line divisions are in the same place and.
Let's also add some left and top positions so let's type left and let's set it to 4 pixels and let's type top and let's set it to.
6 pixels i think we can also set the left to 6 pixels right now the line is exactly in the center of the menu container division right now let's style the actual lines.
Over here so the lines are these line inner divisions over here so let's access that let's type menu container line inner.
Let's set the height to 4 pixels and let's set the width to 32 pixels and let's also add a background color of dark gray and here we can see that our line is.
Displayed over here i think we can increase the width a little bit more so here for the line let's try 32 pixels and even for the width let's try 30 pixels and here for the line inner let's.
Type 32 pixels and we'll also need to reposition this so let's try 4 pixels and 4 pixels.
I think that looks alright and let's also add the border radius so let's start border radius and let's set it to 4 pixels now we need to set the position of the top line inner which is line.
Inner 1 to the top and the line in the 2 to the bottom so let's set the position to absolute and let's access the line inner one.
Which is this division right here so let's type menu container line inner one and first of all let's remove this background color.
And also this one right here right now for the first one let's set the top position to 10 pixels and for the bottom let's start menu container.
Line inner two and let's set the bottom position to 10 pixels now these two lines do not have any gap in between so.
Let's try 12 pixels and that looks all right and now let's bring this to the correct positions so we will use transform translate y and let's set the transform translate y.
To negative 5 pixels for the first one and for the second one let's tap transform translate y positive 5 pixels so now we have the two lines displayed.
Over here now the next thing we need to do is add the animation now we'll be doing that by adding a class to the menu container division so what we're going to do is we're going to add a class.
Called active to the menu container when we want to have the animation for the close button and we will remove the active class when we want to come back to this icon right here so before.
Continuing with the css let's add some javascript to add and remove the active class so here we have the menu container division so let's access that in the javascript let's type const menu.
Container equals document.queryselector menu container and let's add an emit listener so let's tap menu container dot add event listener.
And let's listen for the click event and let's create an adder function over here now we need to add and remove the active class to the menu container so let's start menu container dot class list dot.
Toggle active so if you have the active class it will remove it and if you don't have the active class it will add it right now let's go back to our css and let's.
Write the code for the active state so let's type menu container dot active now you need to make sure that you don't have any space between these two classes.
Because these two classes are going to be added to the same division right now let's type dot line 1 and we need to rotate this 45 degrees so let's start transform.
Rotate z and 45 degrees and for the line 2 let's type menu container dot active line 2.
Transform rotate z negative 45 degrees and now let's click on this button and we can see that the rotation has been added to both these lines right now it.