1
00:00:09,220 --> 00:00:14,110
Hey, everyone, let's get started with our project, and the first thing we are going to do is the

2
00:00:14,110 --> 00:00:15,240
mobile menu.

3
00:00:15,490 --> 00:00:18,990
So let's go to the inspector to see what I'm talking about.

4
00:00:19,270 --> 00:00:23,580
You can go to this device simulator and you can choose any phone.

5
00:00:23,860 --> 00:00:31,060
So in this case, I'm using iPhone six, seven, eight plus, and now I'm seeing this hamburger icon.

6
00:00:31,240 --> 00:00:34,860
You might be familiar with this in any website.

7
00:00:34,870 --> 00:00:38,200
This hamburger icon serves to open a menu.

8
00:00:38,620 --> 00:00:45,660
So if we select it, we can see that it has an idea of hamburger icon.

9
00:00:45,880 --> 00:00:49,620
So when we collect this, we need to open the menu.

10
00:00:49,630 --> 00:00:51,710
So should we design the menu?

11
00:00:51,730 --> 00:00:55,750
Actually, I already have a menu here, so if you just go down.

12
00:00:57,450 --> 00:01:04,170
You're going to see an element called sliding header menu, so this is how I normally do this.

13
00:01:04,380 --> 00:01:05,700
I have this element.

14
00:01:10,030 --> 00:01:18,220
That has a whiff of three hundred and twenty pixels and I'm setting the right property to minus three

15
00:01:18,220 --> 00:01:19,180
hundred and twenty.

16
00:01:20,250 --> 00:01:27,870
So when I want to show this element, I just need to set the right property to zero and as you can see

17
00:01:27,870 --> 00:01:30,700
now will be able to view and use the menu.

18
00:01:30,960 --> 00:01:34,170
So this is what we need to do in JavaScript.

19
00:01:36,000 --> 00:01:43,470
All right, so let's start the unclick event for this Hamberger icon element.

20
00:01:44,610 --> 00:01:50,390
So going to Visual Studio Code, I already left a few comments so you can organize the code.

21
00:01:50,670 --> 00:01:53,880
So here we are going to write the code for the mobile menu.

22
00:01:55,640 --> 00:02:05,630
So let's start with document dot, get element by ID did of this element is Hamberger icon and we are

23
00:02:05,630 --> 00:02:08,540
going to set the unclick event.

24
00:02:12,990 --> 00:02:19,800
Then we are going to start a function, an inside here, we're going to write the code that we want

25
00:02:19,800 --> 00:02:22,480
to be executed when this button is clicked.

26
00:02:22,650 --> 00:02:26,460
So what we want to do is just getting another element.

27
00:02:27,710 --> 00:02:34,870
So this time is not going to be hamburger icon, let's go back there to see that sliding menu again.

28
00:02:36,180 --> 00:02:37,560
So here we have it.

29
00:02:37,890 --> 00:02:41,340
This is the idea of the element, it's a bit long, but that's fine.

30
00:02:41,730 --> 00:02:43,110
Let's just copy this.

31
00:02:45,940 --> 00:02:47,410
So this element.

32
00:02:52,840 --> 00:03:01,510
We're going to get its style property, then the right property inside the style, and we are just going

33
00:03:01,510 --> 00:03:02,860
to set it to zero.

34
00:03:04,540 --> 00:03:12,040
With CSX, we always work with strength, so even though this is zero, we just need to pass it as a

35
00:03:12,040 --> 00:03:12,510
strength.

36
00:03:12,820 --> 00:03:17,020
So if we do this, let's save this and let's refresh the page.

37
00:03:18,560 --> 00:03:25,430
Now, when we click the button, we can see that now we are applying that style to the sliding had their

38
00:03:25,430 --> 00:03:28,700
menu, which makes it appear on screen.

39
00:03:28,950 --> 00:03:30,620
Now, how do we close it?

40
00:03:30,980 --> 00:03:36,500
Well, we have a close button here, so let's see the ID of this element.

41
00:03:38,790 --> 00:03:41,940
Here it is sliding, had their menu, close button.

42
00:03:44,440 --> 00:03:53,920
So now, in any time we open this menu, we just need to set an event to this button so now you can

43
00:03:53,920 --> 00:03:54,730
do it here.

44
00:03:54,970 --> 00:04:00,630
But the problem is that every time you click on the menu, you are going to be setting this event.

45
00:04:00,910 --> 00:04:06,250
And in this case, since the element is already there, we are not creating an element when we click

46
00:04:06,250 --> 00:04:06,910
the button.

47
00:04:07,090 --> 00:04:13,780
If that was the case, we would need to place the event inside here because any time we create the whole

48
00:04:13,780 --> 00:04:16,740
menu, then we need to set the event again.

49
00:04:17,140 --> 00:04:20,170
But in this case, the element is just hidden there.

50
00:04:21,690 --> 00:04:30,720
It exists in the dome, so we can just put it outside here, so document doesn't get element by ID.

51
00:04:32,660 --> 00:04:35,180
This is the idea of that close button.

52
00:04:36,340 --> 00:04:37,570
So unclick.

53
00:04:39,260 --> 00:04:42,710
Let's copy the rest of it, because it's going to be similar.

54
00:04:44,810 --> 00:04:52,400
Now, when we do it, we just need to set the right property to minus three hundred and twenty again,

55
00:04:53,240 --> 00:04:55,760
so minus three hundred and twenty pixels.

56
00:04:58,150 --> 00:05:08,110
Saving this refreshing the page now we can open the menu and we can close the menu, so this part is

57
00:05:08,110 --> 00:05:09,690
done in the next video.

58
00:05:09,730 --> 00:05:13,010
We are going to work in this about us section.

59
00:05:13,060 --> 00:05:13,900
I'll see you then.