Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,410 --> 00:00:05,610
Now it's time to finally make the mobile navigation work
2
00:00:07,450 --> 00:00:09,500
and let's start by remembering how
3
00:00:09,500 --> 00:00:11,793
the mobile navigation actually works.
4
00:00:12,790 --> 00:00:16,230
So this one we don't need for now.
5
00:00:16,230 --> 00:00:17,903
So it's here at the queries.
6
00:00:20,370 --> 00:00:21,203
Alright.
7
00:00:21,203 --> 00:00:24,110
Let's actually open this here on another side
8
00:00:25,030 --> 00:00:26,593
and the same with the script.
9
00:00:29,490 --> 00:00:33,520
Removing some space there and now down here,
10
00:00:33,520 --> 00:00:35,620
I think it was in this media query
11
00:00:35,620 --> 00:00:37,433
where we have the mobile navigation.
12
00:00:38,960 --> 00:00:39,793
Right.
13
00:00:39,793 --> 00:00:42,660
And so that mobile navigation is displayed
14
00:00:42,660 --> 00:00:46,780
whenever the header has this nav-open class.
15
00:00:46,780 --> 00:00:47,623
Remember that?
16
00:00:48,460 --> 00:00:49,773
So let me copy this.
17
00:00:51,050 --> 00:00:52,730
And then here we need to go back
18
00:00:52,730 --> 00:00:56,403
to our responsive view basically.
19
00:00:58,330 --> 00:01:02,543
So double clicking on inspect and now the header.
20
00:01:03,520 --> 00:01:08,520
So I'm gonna paste now this class name hit enter
21
00:01:08,810 --> 00:01:11,780
and then there is our navigation.
22
00:01:11,780 --> 00:01:14,550
Now then when we want to close the navigation
23
00:01:14,550 --> 00:01:16,713
we want to remove the class.
24
00:01:17,890 --> 00:01:18,723
Alright.
25
00:01:18,723 --> 00:01:20,800
And so now we will use JavaScript
26
00:01:20,800 --> 00:01:23,070
to basically do this automatically.
27
00:01:23,070 --> 00:01:25,313
Whenever this button here is clicked.
28
00:01:26,620 --> 00:01:28,100
Alright.
29
00:01:28,100 --> 00:01:30,243
And that's actually not that hard.
30
00:01:33,070 --> 00:01:34,923
So let's add some comments here.
31
00:01:39,410 --> 00:01:40,910
So set current year
32
00:01:46,350 --> 00:01:51,053
and make mobile navigation work.
33
00:01:52,490 --> 00:01:55,360
We already pasted that here
34
00:01:55,360 --> 00:01:58,610
so that I can now copy paste this comment
35
00:01:58,610 --> 00:02:03,063
just to give this file some easier to understand structure.
36
00:02:04,010 --> 00:02:04,870
Okay.
37
00:02:04,870 --> 00:02:07,330
And so just like before let's start
38
00:02:07,330 --> 00:02:10,223
by selecting the elements that are relevant here.
39
00:02:11,420 --> 00:02:14,343
So in our HTML let's move up here.
40
00:02:17,090 --> 00:02:18,440
So to the navigation
41
00:02:20,780 --> 00:02:21,613
so right here.
42
00:02:22,920 --> 00:02:26,520
So when do we want a certain action to happen?
43
00:02:26,520 --> 00:02:29,280
So in this case adding this class here,
44
00:02:29,280 --> 00:02:32,030
so we always need to start by thinking about that.
45
00:02:32,030 --> 00:02:34,160
So where we actually need to click
46
00:02:34,160 --> 00:02:36,610
in order for something to happen.
47
00:02:36,610 --> 00:02:41,430
And in this case that is this button right here, right?
48
00:02:41,430 --> 00:02:44,170
So let's grab this class name here
49
00:02:44,170 --> 00:02:45,860
and then select that
50
00:02:48,090 --> 00:02:50,573
and again creating a new variable for that.
51
00:02:51,700 --> 00:02:56,700
So let's call it a button for navigation
52
00:02:56,830 --> 00:03:00,550
and then document dot query selector.
53
00:03:00,550 --> 00:03:03,900
And then again our selector between these quotes
54
00:03:03,900 --> 00:03:07,123
and it doesn't matter if single quotes or double quotes.
55
00:03:08,150 --> 00:03:10,590
So the dot as always.
56
00:03:10,590 --> 00:03:15,590
And yeah, so that is our button here.
57
00:03:16,620 --> 00:03:19,920
And the lines always need to end here with the semi colon.
58
00:03:19,920 --> 00:03:22,830
But I haven't been writing that because Prettier,
59
00:03:22,830 --> 00:03:26,150
which is the extension that formats our HTML code
60
00:03:26,150 --> 00:03:30,330
and or CSS does also format JavaScript.
61
00:03:30,330 --> 00:03:31,163
Alright.
62
00:03:32,000 --> 00:03:36,070
So this is one of our HTML elements that is relevant.
63
00:03:36,070 --> 00:03:39,290
And the second one is the header, right?
64
00:03:39,290 --> 00:03:42,683
Because that is where we will want to add this class.
65
00:03:43,680 --> 00:03:47,210
And so let's go select that one as well.
66
00:03:47,210 --> 00:03:49,053
So this one has the class of header.
67
00:03:52,170 --> 00:03:54,400
So header let's again
68
00:03:54,400 --> 00:03:57,690
actually call this L and this one as well
69
00:03:57,690 --> 00:03:59,813
just to follow that same convention.
70
00:04:01,300 --> 00:04:03,840
So document dot query selector
71
00:04:05,620 --> 00:04:08,110
and then with the header class.
72
00:04:08,110 --> 00:04:09,310
Okay.
73
00:04:09,310 --> 00:04:11,453
And now we do just as we did before
74
00:04:11,453 --> 00:04:16,163
right here using this function called add event listener.
75
00:04:17,200 --> 00:04:19,590
So we want to listen for the click event now
76
00:04:19,590 --> 00:04:22,730
on this button, right?
77
00:04:22,730 --> 00:04:27,220
So button nav L dot add event listener
78
00:04:28,240 --> 00:04:30,430
and then click.
79
00:04:30,430 --> 00:04:33,180
And there are of course other events than clicking.
80
00:04:33,180 --> 00:04:36,500
For example hovering or typing some key
81
00:04:36,500 --> 00:04:38,993
on the keyboard or something like that.
82
00:04:41,190 --> 00:04:42,023
Okay.
83
00:04:42,023 --> 00:04:43,470
And then the second part here
84
00:04:43,470 --> 00:04:45,890
of this advent listener function
85
00:04:45,890 --> 00:04:48,723
is that we pass in our own function.
86
00:04:51,830 --> 00:04:54,274
And so remember that here now goes the code
87
00:04:54,274 --> 00:04:57,390
that we actually want to execute whenever
88
00:04:57,390 --> 00:04:59,823
this click event happens on the button.
89
00:05:01,030 --> 00:05:04,223
So what is that action that we want to take?
90
00:05:05,090 --> 00:05:08,180
Well, we basically want to add this class here
91
00:05:08,180 --> 00:05:10,830
to the header when it is not there
92
00:05:10,830 --> 00:05:14,630
but if it is already there then we want to remove that.
93
00:05:14,630 --> 00:05:17,430
And in JavaScript we can do that very easily
94
00:05:17,430 --> 00:05:19,073
with just one line of code.
95
00:05:20,090 --> 00:05:23,960
So we take our header and then since we want to work
96
00:05:23,960 --> 00:05:26,290
with classes there is something called
97
00:05:26,290 --> 00:05:28,730
the class list property.
98
00:05:28,730 --> 00:05:33,560
So class list then dot again
99
00:05:33,560 --> 00:05:35,900
and here from the vs code suggestions
100
00:05:35,900 --> 00:05:39,680
you can see that we can use this one here to add classes.
101
00:05:39,680 --> 00:05:42,870
We can use this one here to remove classes
102
00:05:42,870 --> 00:05:45,730
but what we want to do actually is toggle.
103
00:05:45,730 --> 00:05:49,053
Which is kind of adding and removing all at the same time.
104
00:05:51,820 --> 00:05:55,270
So toggle and here now we're going to use
105
00:05:55,270 --> 00:05:59,660
that nav-open class and that's it.
106
00:05:59,660 --> 00:06:02,020
That's actually all we need.
107
00:06:02,020 --> 00:06:06,560
So what toggle will do is it will look at this element here.
108
00:06:06,560 --> 00:06:09,860
And if it does have this nav-open class
109
00:06:09,860 --> 00:06:12,360
it will then not add it.
110
00:06:12,360 --> 00:06:15,390
So if it's already there it will remove it.
111
00:06:15,390 --> 00:06:18,233
But if it's not there then it will add it.
112
00:06:19,130 --> 00:06:20,700
Okay.
113
00:06:20,700 --> 00:06:23,410
And here I make sure to really just write
114
00:06:23,410 --> 00:06:26,620
the name of the class but without the dot.
115
00:06:26,620 --> 00:06:30,853
So not like this but really just the name of the class.
116
00:06:31,810 --> 00:06:33,963
Okay, and that's actually it.
117
00:06:35,440 --> 00:06:38,963
So let's check that and clicking here.
118
00:06:39,820 --> 00:06:43,533
And indeed you see that now here is nav-open.
119
00:06:44,850 --> 00:06:46,450
Beautiful.
120
00:06:46,450 --> 00:06:50,920
Now I'm just seeing that the focus effect is here behind.
121
00:06:50,920 --> 00:06:52,740
So we need to fix that a little bit
122
00:06:52,740 --> 00:06:57,560
but the functionality here is already working so beautiful.
123
00:06:57,560 --> 00:07:00,000
Really, really nice with just a couple
124
00:07:00,000 --> 00:07:01,600
of lines of JavaScript.
125
00:07:01,600 --> 00:07:05,820
We just made this happen so we can click here as many times
126
00:07:05,820 --> 00:07:08,503
as we want and it will always just work.
127
00:07:09,640 --> 00:07:13,110
But now what I was mentioning about the focus dates is
128
00:07:13,110 --> 00:07:16,280
that maybe you can very faintly see it here
129
00:07:16,280 --> 00:07:19,380
so that orange border here in the background.
130
00:07:19,380 --> 00:07:21,980
And so the problem here is that we need to
131
00:07:21,980 --> 00:07:23,950
actually make sure that this button here
132
00:07:23,950 --> 00:07:28,610
is always on top of this navigation right here.
133
00:07:28,610 --> 00:07:32,170
So of this element with the white background.
134
00:07:32,170 --> 00:07:36,430
So let's do that and remember that exactly for that purpose
135
00:07:36,430 --> 00:07:38,563
we have the Z index property.
136
00:07:40,090 --> 00:07:42,330
So let's see where that is.
137
00:07:42,330 --> 00:07:43,163
Ah right here.
138
00:07:44,430 --> 00:07:48,610
So let's just set some very high value here.
139
00:07:48,610 --> 00:07:51,193
Z index, let's say 1000.
140
00:07:52,040 --> 00:07:53,893
So it doesn't really matter here.
141
00:07:53,893 --> 00:07:56,720
Sometimes we even use something like this
142
00:07:56,720 --> 00:07:59,310
just to show that we want to really use
143
00:07:59,310 --> 00:08:02,390
some really, really high value here.
144
00:08:02,390 --> 00:08:05,210
So let's, well, let's actually keep that here.
145
00:08:05,210 --> 00:08:09,530
So that's kind of a convention that many people do and yeah.
146
00:08:09,530 --> 00:08:13,010
And so there's no problem of us also using that.
147
00:08:13,010 --> 00:08:14,470
But anyway now you see that
148
00:08:14,470 --> 00:08:17,600
the focus date always stays on top,
149
00:08:17,600 --> 00:08:20,310
which means that this button here is now
150
00:08:20,310 --> 00:08:23,063
in fact also on top of all of this here.
151
00:08:24,630 --> 00:08:25,520
Okay.
152
00:08:25,520 --> 00:08:27,790
And just like this we made it work.
153
00:08:27,790 --> 00:08:29,723
And so mission accomplished.
10989
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.