Leave the link of the source code in the description so you can just copy and paste it to your websites and in the end i'll also show you how to add this navigation menu to your blogger website alright so let's get started in this video i'll show you how to create this hamburger menu animation from the apple website so here you can see i'm in the apple.com website and if i click on 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 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 just name it main.js let's start with the index.html file and in vs code you have the shortcut where you can just press exclamation and press tab and you'll have this basic 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 let's 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 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.
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 the 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 six 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 in the 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 type border radius and let's set it to 4 pixels Wesdigital
Now we need to set the position of the top line inner which is line inner one 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 type menu container line inner 2 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 alright 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 you 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 dot query selector menu container and let's add an event 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 type 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 doesn't look good because it also has the translate y added to it.
So when we have the active class we'll just remove this transform value from the line inner one and two now to access both of them you can just type line inner because both of them have the line inner class so let's type menu container active line inner and let's set the transform to none and i think we need to increase the width of these line inners a little bit so let's try 34 pixels and that looks.
Alright so now we can see we have the correct close icon and if i click on it once again it has the hamburger menu so everything is working all right now the last thing we need to add is a smooth transition between these two states so let's go to the line and here let's type transition and let's set it to transform 300 milliseconds is in out and for the line inner let's type.
Transition transform 200 milliseconds is in out and now let's click on this and we have the transition now here we can see that both the animations are running at once now we need to run the animation of rotation after the translate animation so if you go back to our original design here we can see when we click on this first of all we have the translate y and then we have the rotation the rotation animation is added to the.
Line so the line one and line two divisions over here which are these parent divisions so let's access that
Over here so here i'll just type menu container dot active line and here we just type transition delay and let's set it to 200 milliseconds and now let's click on this and we have the delay for the rotation animation so here we can see first we have the translation animation and then we have the rotation animation now we need to add the delay for the reverse animation as well so let's go.Back over here and here in the line inner let's tap transition delay and let's set it to 200 milliseconds and we also need to add the transition to the active line inner so let's copy this from here and i'll scroll down and here for the line inner let's type transition transform 200 milliseconds is in out right now let's test it out let's click on this icon and we can see that it changes into the close icon and if i click on it once again it changes back to the hamburger menu.
So the animation is working all right now in this video i'll show you how to add some menu items when we click on this menu icon so here's the demo here we have this menu icon and if i click on that we have the menu displayed over here and we also have the color change when we hover over these menu items and when we click on the close button it goes back so this is what we're going to design in this video right this is our source code and the first thing we will do is we will write the html for all these menu.
Items over here so let's create a new division and let's give it a class of menu items container now in this division let's create a ul for all these menu items so let's tap ul and in that we will have a list item and in the list item we will have an anchor tag and here you can add the link of your page i'll just type hash for now and we have about services blog and contacts so let's add them over here.
About and let's copy this list item and let's paste it down three more times and the second one is services and then we have the third one which is blog and the last one is contact right that's it with the html now let's go to our css and let's start styling this so let's go to style.css file and the first thing we will do is we'll just bring this menu to the top right over here so here in the body we can see that we have set the display to flex and we.
Are bringing everything to the center so let's delete all of this from here let's just delete this whole selector and now here we can see it is on the left so here in the menu container let's set the position to absolute and let's set the top position to let's try 20 pixels and let's set the right position to 40 pixels and now the next thing we will do is we will set the box sizing to border box for this division as well the menu items container division so here let's add a comma let's type menu items container and also menu items container and all.
The elements inside that right now let's start styling this so let's scroll down and let's type menu items container and let's set the background to 111 and let's set the position to absolute and we'll set the top position to 80 pixels and we'll set the right position to 40 pixels right now let's style the anchor tags so let's type menu items container a and let's set the color of the text to white.
And let's remove the underline so let's tap text decoration and set it to none and we'll set the font family to roboto and sensorif and let's set a padding of 12 pixels top and bottom and 40 pixels left and right and here we can see that the padding is not applied to the top and bottom that's because the anchor tags are inline elements by default so we have to type display of inline block right now we can see that the padding is applied let's also set the text transform to uppercase.
And we'll also add a border between these elements so let's type border of one pixel solid 313131 and let's set the width to 100 and let's also set the font size to 14 pixels right now let's remove the padding and margin of the ul and we'll also remove the bullets so let's tap menu items container ul and let's type heading 0.
Margin 0 and also let's remove these bullets so let's type list style and let's set it to none right now let's add the hover effect so when we hover over this we need to have a slightly different color so here let's type menu items container a colon hover and let's set the background color to two to two and let's add a transition so that we.
Have smooth animation let's type transition and let's set it to all 200 milliseconds is and now let's hover over this and we can see that we have the horror effect all right now the last thing we need to do is we need to display and hide these menu items when we click on this button right here so for that we're going to add an active class to this menu items container when we want to display it and we'll remove the active class when we don't want to display it so by default we will set the opacity of this menu items container to.
Zero and we'll also decrease the size so let's type transform scale and let's set it to zero and let's also add a transition and let's set it to all 700 milliseconds is and now let's write the styles for the active class so let's type menu items container dot active and here we'll just set the opacity back to one and we'll also set the transform scale and let's set it to one.
Right now let's add and remove this class using javascript so we need to access this menu items container division so let's go to our main.js file and let's type const menu items container equals document.queryselector menu items container and here we already have an event listener for the menu container so here when we have the active class we need to display the menu items container so let's add an if condition and let's type menu container.
Dot class list dot contains and let's see whether we have the active class inside the menu container and if we have the active class then we will add the active class to the menu items container so let's type menu items container dot class list dot add and let's type active over here and let's add an else over here and let's tap menu items container dot class list dot remove active right now let's see whether this works so let's click on this button and we have the menu items displayed.
Over here and let's click on this button once again and it goes back now we need to bring this menu items container from this top right over here so for that we have to set the transform origin to the top right right now it is going to the center when we scale it down so let's go back to the style.css file and here let's type transform origin and let's set it to top right.
And now let's click on this and now we can see it goes to the top right when we click on this menu icon now the last thing we will do is we will add a different easing function so if i click on this original design we can see that we have this bouncy effect over here so for that we are using a cubic bezier now if you right click over here in this menu items container and if i click on inspect and if i click on menu items container here we can see that we have this curve displayed over here for ease and.
If i click on this curve we can see that we have the option of modifying this so if i just change this something like this we have this bouncing effect so we have to bring this curve to the top over here then we will have the bouncing effect now once you're happy with that you can just copy this code from here and you can just paste it over here instead of this is now i have already calculated a cubic bezier function so let's type cubic bezier and let's add the following values i'll.
Just type 0.13 0.86 0.11 and 1.19 you have to make sure that the last value is greater than 1 right now let's take it out and here we can see we have this bouncy effect and we can also add a little bit of uh transition delay so let's tap transition delay and let's set it to 100 milliseconds.
And now you can see everything looks all right all right this is the dashboard of my blogger website and let's open this blog right here so let's click on view blog and this is how it looks right now we can see that we have these posts over here but on the right hand side over here we can see that we have this menu icon now if i click on this by default we have these menu items displayed over here now we don't want to display these things over here we want to display these menu items right here so for that we have to make some changes.
In the code of our theme and what we will do is we'll just replace this menu icon with this icon right here so the first thing we will do is we'll just locate this menu icon in the theme code so if you right click over here and click on inspect here we can see we have the markup of our website displayed over here if we scroll up we can see that we have this division with a class of hamburger section and container and above that we have the main header which contains.
The heading and also the search icon now what we are interested is in this hamburger section so let's go ahead and find this class in our theme code so we'll just search for class equals and hamburger section so let's go back to the dashboard and let's go to theme and by the way i'm using this theme called notable light which comes by defaulted blogger so here you can see this theme right here right now let's click on this arrow and click on edit html.
Right now let's search for this class over here called hamburger section so let's go back and let's press ctrl f or command f and let's type class equals hamburger section and let's press enter and here we can see we have this division with the class of hamburger section and in this we have this line of code which displays this button right here so what we're going to do is we'll just delete this or let me just comment this so i'll just press.
Less than exclamation hyphen hyphen and let's close the comment over here let's press hyphen hyphen greater than right now let's add some text over here so that we know that we are in the correct place so let's just type menu here and let's press save now let's go to our website and let's refresh this page and now here we can see instead of the menu icon we have the text displayed over here so now we can go ahead and add.
Any code over here and it will be displayed over here now before adding the html css and javascript to our theme let's make some changes in this menu icon over here so let's go to the source code and if you go to the style.css file here we can see we have the css of the menu items and if you take a look at the css of the menu container we can see that we are setting the position to absolute now in our blogger website we don't want to have an absolute position we want to have the icon displayed over here.
In place of this menu here text so what we're going to do is we're going to just delete these three lines of code and now if you go back to the browser here we can see that we have the menu displayed at the default position and we are not forcing any position on this right now let's click on this menu icon and we can see that the menu items are displayed over here but they are on the right side now we want to set the position of these menu items relative to this menu icon over here so what we're going to do is let's go back and let's go to the html.
And we're going to add everything inside a container so let's create a division with a class of menu main container and let's just cut this end tag from here and let's paste it down here and now we can see the menu container which has this menu icon and also the menu items container which has all these menu items over here both of them are inside this mini main container division now.
What we're going to do is we're going to set a position of relative to this menu main container and we're going to set this menu items container position to absolute so that it will be positioned relative to this menu main container so let's go to our style.css file and here let's type menu main container and let's set the position to relative and let's see what is the width of this division right here so let's type background red.
And now we can see that the width of this division is 100 of the screen so let's change the width let's change it to 40 pixels and now we can see we have the correct width and now if you click on this icon we can see that the menu items are displayed over here relative to this icon let's go back to our css and let's go to the menu items container and here let's set the position so right now we have set the right position to 40 pixels let's change it to 0.
And we'll change the top position to 50 pixels right now let's go back and let's click on this icon and we have the menu items displayed in the correct place let's just add a margin left to this icon so that we can see it clearly so let's go back and here let's remove this background color and let's type margin left and let's just add 200 pixels and now if we click on this icon we have the menu items displayed over here so everything works all right.