Hey, everyone, let's get started with our project, and the first thing we are going to do is the
mobile menu.
So let's go to the inspector to see what I'm talking about.
You can go to this device simulator and you can choose any phone.
So in this case, I'm using iPhone six, seven, eight plus, and now I'm seeing this hamburger icon.
You might be familiar with this in any website.
This hamburger icon serves to open a menu.
So if we select it, we can see that it has an idea of hamburger icon.
So when we collect this, we need to open the menu.
So should we design the menu?
Actually, I already have a menu here, so if you just go down.
You're going to see an element called sliding header menu, so this is how I normally do this.
I have this element.
That has a whiff of three hundred and twenty pixels and I'm setting the right property to minus three
hundred and twenty.
So when I want to show this element, I just need to set the right property to zero and as you can see
now will be able to view and use the menu.
So this is what we need to do in JavaScript.
All right, so let's start the unclick event for this Hamberger icon element.
So going to Visual Studio Code, I already left a few comments so you can organize the code.
So here we are going to write the code for the mobile menu.
So let's start with document dot, get element by ID did of this element is Hamberger icon and we are
going to set the unclick event.
Then we are going to start a function, an inside here, we're going to write the code that we want
to be executed when this button is clicked.
So what we want to do is just getting another element.
So this time is not going to be hamburger icon, let's go back there to see that sliding menu again.
So here we have it.
This is the idea of the element, it's a bit long, but that's fine.
Let's just copy this.
So this element.
We're going to get its style property, then the right property inside the style, and we are just going
to set it to zero.
With CSX, we always work with strength, so even though this is zero, we just need to pass it as a
strength.
So if we do this, let's save this and let's refresh the page.
Now, when we click the button, we can see that now we are applying that style to the sliding had their
menu, which makes it appear on screen.
Now, how do we close it?
Well, we have a close button here, so let's see the ID of this element.
Here it is sliding, had their menu, close button.
So now, in any time we open this menu, we just need to set an event to this button so now you can
do it here.
But the problem is that every time you click on the menu, you are going to be setting this event.
And in this case, since the element is already there, we are not creating an element when we click
the button.
If that was the case, we would need to place the event inside here because any time we create the whole
menu, then we need to set the event again.
But in this case, the element is just hidden there.
It exists in the dome, so we can just put it outside here, so document doesn't get element by ID.
This is the idea of that close button.
So unclick.
Let's copy the rest of it, because it's going to be similar.
Now, when we do it, we just need to set the right property to minus three hundred and twenty again,
so minus three hundred and twenty pixels.
Saving this refreshing the page now we can open the menu and we can close the menu, so this part is
done in the next video.
We are going to work in this about us section.
I'll see you then.