Over here and if i click on that we have it change into a close button so we have this animation over here just like in the apple website 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 gonna design in this video let's get started.
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.
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 all 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 Wesdigital
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 i will 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 sanserif 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 1 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 padding 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.
Ease and now let's hover over this and we can see that we have the horror effect 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 dot query selector 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 one 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 alright so that's basically it for this video i.
Will leave the link of the source code in the description and if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this.