Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,520 --> 00:00:04,900
Let's now transform our simple navigation bar
2
00:00:04,900 --> 00:00:06,770
into a mobile navigation.
3
00:00:06,770 --> 00:00:10,040
And this is gonna be no easy task
4
00:00:10,040 --> 00:00:12,570
and it's gonna require a lot of code,
5
00:00:12,570 --> 00:00:15,043
and so let's get started right away.
6
00:00:16,550 --> 00:00:19,070
So basically what we want to happen
7
00:00:19,070 --> 00:00:22,600
is that once we reach our break point here,
8
00:00:22,600 --> 00:00:24,980
so this one right here,
9
00:00:24,980 --> 00:00:27,540
we want all of this menu here to disappear
10
00:00:27,540 --> 00:00:32,540
and instead we want a menu button to show up right here.
11
00:00:32,580 --> 00:00:34,640
So just as I said before,
12
00:00:34,640 --> 00:00:36,740
this is something that I'm sure you have seen
13
00:00:36,740 --> 00:00:41,740
on other webpages and also on mobile applications, right?
14
00:00:41,800 --> 00:00:44,090
And so let's actually start with that.
15
00:00:44,090 --> 00:00:46,693
So adding that menu button right here.
16
00:00:48,280 --> 00:00:50,723
So, let's go to our HTML,
17
00:00:52,350 --> 00:00:55,640
so this button of course needs to be in our HTML
18
00:00:55,640 --> 00:00:56,863
from the very beginning.
19
00:00:57,790 --> 00:01:00,520
So that's here in the header
20
00:01:00,520 --> 00:01:04,690
and let's put that after this navigation.
21
00:01:04,690 --> 00:01:07,630
So we have this logo, then the navigation
22
00:01:11,344 --> 00:01:14,143
and then a button, which I'm gonna call
23
00:01:15,000 --> 00:01:19,980
button for the mobile-nav,
24
00:01:19,980 --> 00:01:21,890
so mobile navigation.
25
00:01:21,890 --> 00:01:26,883
And now here insight, we simply want an icon with the menu.
26
00:01:28,240 --> 00:01:30,643
So let's come here again to our I and icons.
27
00:01:32,730 --> 00:01:37,063
And so this here is kind of the standard icon for menus.
28
00:01:38,390 --> 00:01:39,713
So copying that.
29
00:01:43,218 --> 00:01:44,207
All right..
30
00:01:45,370 --> 00:01:47,113
Let's add a class,
31
00:01:49,180 --> 00:01:52,840
of icon mobile navigation.
32
00:01:54,860 --> 00:01:57,350
And actually we will also want an icon
33
00:01:57,350 --> 00:01:59,293
for closing the navigation.
34
00:02:00,140 --> 00:02:01,773
So let's quickly get that.
35
00:02:02,780 --> 00:02:03,873
So close.
36
00:02:07,820 --> 00:02:08,653
Okay.
37
00:02:10,330 --> 00:02:12,290
Let's duplicate this.
38
00:02:12,290 --> 00:02:16,823
And, and actually, I remember it was just close here.
39
00:02:17,910 --> 00:02:21,500
So we're adding these two icons here because basically what
40
00:02:21,500 --> 00:02:25,670
we will do is that the default icon is going to be this one
41
00:02:25,670 --> 00:02:29,640
with the menu. And then when the user hits this button,
42
00:02:29,640 --> 00:02:32,270
then the mobile navigation will show,
43
00:02:32,270 --> 00:02:35,060
and then we will hide this first icon,
44
00:02:35,060 --> 00:02:37,470
and display the close icon.
45
00:02:37,470 --> 00:02:40,350
All right. So when the navigation is hidden,
46
00:02:40,350 --> 00:02:43,640
we show the menu icon. And then when it's visible,
47
00:02:43,640 --> 00:02:46,820
we show the close icon to give the user the option to
48
00:02:46,820 --> 00:02:47,653
close it.
49
00:02:49,210 --> 00:02:50,380
Okay.
50
00:02:50,380 --> 00:02:52,490
Let's copy this here
51
00:02:52,490 --> 00:02:55,160
because of course we will need to style it.
52
00:02:55,160 --> 00:02:57,793
And the other one is icon mobile nav.
53
00:03:00,770 --> 00:03:03,503
So that's at the very top of the file here.
54
00:03:06,180 --> 00:03:08,063
So yeah, right here.
55
00:03:10,570 --> 00:03:12,553
Let's just add a small comment here.
56
00:03:18,650 --> 00:03:20,380
So this one
57
00:03:20,380 --> 00:03:21,213
and
58
00:03:22,950 --> 00:03:24,460
icon.
59
00:03:24,460 --> 00:03:27,123
And let's see what it looks like by default.
60
00:03:29,520 --> 00:03:34,520
So we have this button here, let's make it at 100%.
61
00:03:34,860 --> 00:03:36,940
And of course, thanks to flexbox.
62
00:03:36,940 --> 00:03:39,300
it is also vertically aligned.
63
00:03:39,300 --> 00:03:42,980
And since we have justified content set to space between
64
00:03:42,980 --> 00:03:46,243
now this part here is centered between these two.
65
00:03:47,230 --> 00:03:50,110
Right. But of course we will then make this part here
66
00:03:50,110 --> 00:03:53,073
invisible and only show our button.
67
00:03:54,010 --> 00:03:56,583
But anyway, that's now format this button here.
68
00:03:58,350 --> 00:03:59,363
That's right here.
69
00:04:01,180 --> 00:04:03,140
So we need to get rid of the border
70
00:04:06,500 --> 00:04:08,880
and also have the background color.
71
00:04:08,880 --> 00:04:12,220
So we usually set simply background to none.
72
00:04:12,220 --> 00:04:15,453
And we also wanted to have this pointer cursor.
73
00:04:17,070 --> 00:04:20,433
Okay. And then quickly also the icon here.
74
00:04:23,280 --> 00:04:25,303
So let's see what we have here.
75
00:04:26,470 --> 00:04:30,200
So let's make it a 4.8 REM
76
00:04:31,040 --> 00:04:33,300
of height and also
77
00:04:33,300 --> 00:04:34,133
of width,
78
00:04:37,490 --> 00:04:41,263
and the color let's use our darkest gray.
79
00:04:43,340 --> 00:04:44,310
Now okay.
80
00:04:44,310 --> 00:04:47,400
So that looks nice. But of course, by default,
81
00:04:47,400 --> 00:04:50,290
we want one of them here to be hidden.
82
00:04:50,290 --> 00:04:54,080
All right. So we want to now select this one here.
83
00:04:54,080 --> 00:04:56,773
So the closing one and then hide that.
84
00:04:58,030 --> 00:05:00,113
So how are we going to do that?
85
00:05:01,690 --> 00:05:04,840
So here in our HTML, we could now of course,
86
00:05:04,840 --> 00:05:07,870
add another class here and call this one here,
87
00:05:07,870 --> 00:05:11,500
like the menu button and this one, the close button.
88
00:05:11,500 --> 00:05:15,150
However, here, I want to show you another selector.
89
00:05:15,150 --> 00:05:16,023
So let me,
90
00:05:17,980 --> 00:05:20,900
so just because now we don't have it here side-by-side,
91
00:05:20,900 --> 00:05:23,353
I'm copying all this, but you don't have to.
92
00:05:25,720 --> 00:05:30,350
And I'm going to paste that here into a comment just so we
93
00:05:30,350 --> 00:05:31,453
can see the code.
94
00:05:32,970 --> 00:05:33,960
Okay.
95
00:05:33,960 --> 00:05:37,757
And so I will now use this selector here again.
96
00:05:37,757 --> 00:05:41,570
And then what I want to do is to select this element
97
00:05:41,570 --> 00:05:45,680
based on this name attribute that is here.
98
00:05:45,680 --> 00:05:49,260
So that's what's distinguishing these two icons here.
99
00:05:49,260 --> 00:05:53,330
So this one has menu outline and this one has a close
100
00:05:53,330 --> 00:05:54,470
outline.
101
00:05:54,470 --> 00:05:55,450
Right?
102
00:05:55,450 --> 00:06:00,450
And so we can actually select in CSS based on attributes.
103
00:06:00,680 --> 00:06:03,363
So for example, like this name one here,
104
00:06:05,110 --> 00:06:09,800
so the way we do that is with these square brackets.
105
00:06:09,800 --> 00:06:14,100
And then we simply write this so we can simply write
106
00:06:14,100 --> 00:06:16,290
name equal
107
00:06:16,290 --> 00:06:19,333
menu outline.
108
00:06:21,690 --> 00:06:22,640
Right.
109
00:06:22,640 --> 00:06:27,070
And actually the one that we want to hide here now is the
110
00:06:27,070 --> 00:06:28,640
close one.
111
00:06:28,640 --> 00:06:32,703
So the second one, so we don't need this anymore.
112
00:06:34,930 --> 00:06:37,253
So display none.
113
00:06:38,270 --> 00:06:41,450
So now this is turned off.
114
00:06:41,450 --> 00:06:44,210
So that close icon is gone. But then later,
115
00:06:44,210 --> 00:06:46,510
once the user clicks on this button,
116
00:06:46,510 --> 00:06:50,710
we will switch from the menu icon to the close icon.
117
00:06:50,710 --> 00:06:52,070
All right?
118
00:06:52,070 --> 00:06:53,170
Now, of course,
119
00:06:53,170 --> 00:06:57,100
by default this should here be completely hidden.
120
00:06:57,100 --> 00:06:57,933
Right?
121
00:06:57,933 --> 00:06:59,230
This should not exist.
122
00:06:59,230 --> 00:07:03,910
And so by default, of course, we need to turn this off.
123
00:07:03,910 --> 00:07:05,820
So make it hidden.
124
00:07:05,820 --> 00:07:08,193
Right? So this entire button right now,
125
00:07:09,050 --> 00:07:13,560
so display none once again.
126
00:07:13,560 --> 00:07:15,593
And so then of course it is gone.
127
00:07:18,210 --> 00:07:22,830
Okay. So by default for normal width, we want it to be gone.
128
00:07:22,830 --> 00:07:23,830
But then of course,
129
00:07:23,830 --> 00:07:27,080
once we reach this media query here that we have been
130
00:07:27,080 --> 00:07:30,313
working on, we now want to show that button.
131
00:07:33,090 --> 00:07:36,393
So mobile navigation,
132
00:07:39,600 --> 00:07:44,600
so display and let's display it as a block level element.
133
00:07:47,610 --> 00:07:50,023
So let's wait for it.
134
00:07:51,580 --> 00:07:55,930
And there it is great. So that part was easy,
135
00:07:55,930 --> 00:07:59,150
but now it comes the harder part of actually styling
136
00:07:59,150 --> 00:08:01,333
and creating a mobile navigation.
137
00:08:02,240 --> 00:08:06,540
So this mobile navigation will need to work for this width,
138
00:08:06,540 --> 00:08:09,990
and for all the other, width that will come later.
139
00:08:09,990 --> 00:08:12,373
So for example, even on a small phone,
140
00:08:13,840 --> 00:08:15,300
so something like this,
141
00:08:15,300 --> 00:08:18,180
which right now doesn't really work because of this white
142
00:08:18,180 --> 00:08:19,520
space here.
143
00:08:19,520 --> 00:08:21,653
So let's just go with this one here.
144
00:08:22,860 --> 00:08:26,310
So what I want to do now is to basically overlay the
145
00:08:26,310 --> 00:08:29,870
navigation over this entire screen here.
146
00:08:29,870 --> 00:08:33,960
So creating like an overlay and then having these menu items
147
00:08:33,960 --> 00:08:38,290
here, one after another displayed here vertically.
148
00:08:38,290 --> 00:08:40,910
So first how it works then below the meals,
149
00:08:40,910 --> 00:08:45,003
testimonials, pricing, and then that call to action button.
150
00:08:45,860 --> 00:08:50,160
And again, having all of that on top, basically on the page.
151
00:08:50,160 --> 00:08:51,520
All right.
152
00:08:51,520 --> 00:08:55,320
So the way we are going to do that is to basically remove
153
00:08:55,320 --> 00:08:59,900
this element from here, using CSS with absolute positioning.
154
00:08:59,900 --> 00:09:02,293
So let me show you how we could do that.
155
00:09:03,950 --> 00:09:06,770
First of all, we need to of course, take a look,
156
00:09:06,770 --> 00:09:08,943
what elements we're actually talking about.
157
00:09:15,411 --> 00:09:18,920
So it's this main nav here, right?
158
00:09:18,920 --> 00:09:21,760
So this is the one that we basically want to now position
159
00:09:21,760 --> 00:09:23,120
absolutely.
160
00:09:23,120 --> 00:09:26,653
And make it so that it basically occupies the entire screen.
161
00:09:27,800 --> 00:09:30,303
So main nav, let's copy that.
162
00:09:33,350 --> 00:09:35,930
Let's first, I give it a background color.
163
00:09:35,930 --> 00:09:38,003
So we see what we're doing here.
164
00:09:39,670 --> 00:09:40,653
Let's say blue,
165
00:09:43,760 --> 00:09:46,913
and now we want to position it absolutely.
166
00:09:47,780 --> 00:09:52,780
Let's put it at the top and a left of zero for now.
167
00:09:54,110 --> 00:09:58,420
And now as always, when we position an element, absolutely,
168
00:09:58,420 --> 00:10:02,100
we first need to make the parent element positioned
169
00:10:02,100 --> 00:10:03,370
relative.
170
00:10:03,370 --> 00:10:04,290
Right?
171
00:10:04,290 --> 00:10:07,160
However that might not really be necessary
172
00:10:07,160 --> 00:10:08,770
because actually we don't
173
00:10:08,770 --> 00:10:11,690
want to position this in relation to the header.
174
00:10:11,690 --> 00:10:14,540
But really to the entire view port.
175
00:10:14,540 --> 00:10:18,500
And so we can simply leave it as it is for now and just
176
00:10:18,500 --> 00:10:19,353
test it out.
177
00:10:21,660 --> 00:10:22,493
Okay.
178
00:10:22,493 --> 00:10:25,500
And so this element has already been taken out of the flow
179
00:10:25,500 --> 00:10:26,370
here.
180
00:10:26,370 --> 00:10:30,510
So it's basically no longer a flex item like it used to be.
181
00:10:30,510 --> 00:10:33,813
And instead it is indeed here in the corner.
182
00:10:35,460 --> 00:10:38,710
Let's actually give it a white background so we can see it a
183
00:10:38,710 --> 00:10:40,460
bit better.
184
00:10:40,460 --> 00:10:43,513
And so now let's make it occupy the entire screen.
185
00:10:44,780 --> 00:10:48,570
So first of all, with 100%,
186
00:10:48,570 --> 00:10:50,820
and then the height,
187
00:10:50,820 --> 00:10:54,160
remember how we can make it stretch all the way from top to
188
00:10:54,160 --> 00:10:55,440
bottom.
189
00:10:55,440 --> 00:10:56,273
Well,
190
00:10:56,273 --> 00:11:01,060
we can give it a height of exactly 100% off the view port.
191
00:11:02,710 --> 00:11:06,180
So 100 view port height units.
192
00:11:06,180 --> 00:11:07,570
Remember that?
193
00:11:07,570 --> 00:11:10,690
So let's see what that's going to look like.
194
00:11:10,690 --> 00:11:14,163
And indeed, that's already looking quite nice.
195
00:11:15,160 --> 00:11:19,510
Okay. And now let's make the text bigger here,
196
00:11:19,510 --> 00:11:22,700
center everything here inside of this container.
197
00:11:22,700 --> 00:11:26,190
So putting it here in the middle and also stack these
198
00:11:26,190 --> 00:11:29,980
navigation items. So having one after the other,
199
00:11:29,980 --> 00:11:32,220
as I mentioned in the beginning .
200
00:11:32,220 --> 00:11:33,053
Now,
201
00:11:33,053 --> 00:11:35,090
in case you're wondering why we are doing the design like
202
00:11:35,090 --> 00:11:40,090
this and covering up here almost all of the hero section.
203
00:11:40,240 --> 00:11:43,860
This is of course just temporary what we're doing here.
204
00:11:43,860 --> 00:11:44,930
So by default,
205
00:11:44,930 --> 00:11:47,970
this navigation here will of course be hidden and it will
206
00:11:47,970 --> 00:11:51,750
only be shown once the user clicks this button.
207
00:11:51,750 --> 00:11:52,820
Okay?
208
00:11:52,820 --> 00:11:53,653
So again,
209
00:11:53,653 --> 00:11:56,890
this is just going to be the open state, but by default,
210
00:11:56,890 --> 00:11:57,723
of course,
211
00:11:57,723 --> 00:12:00,863
we will be able to see the hero section that is underneath.
212
00:12:02,540 --> 00:12:04,170
Okay?
213
00:12:04,170 --> 00:12:08,060
And to demonstrate that let's actually change the color here
214
00:12:08,060 --> 00:12:09,643
to something transparent.
215
00:12:10,610 --> 00:12:14,650
So clicking here and let's do something
216
00:12:14,650 --> 00:12:18,480
really small or really big.
217
00:12:18,480 --> 00:12:21,360
So actually a very little transparency here,
218
00:12:21,360 --> 00:12:23,713
but it's going to be enough to see the effect.
219
00:12:24,780 --> 00:12:29,320
And so now let's, as I was saying, center, everything.
220
00:12:29,320 --> 00:12:30,153
And for that,
221
00:12:30,153 --> 00:12:35,080
we're going to use display set to flex because I think that
222
00:12:35,080 --> 00:12:38,523
right now, this navigation is not a flex container,
223
00:12:39,620 --> 00:12:41,023
but let's check that out.
224
00:12:42,320 --> 00:12:43,203
Main nav.
225
00:12:44,210 --> 00:12:47,233
Oh and actually we hadn't yet done anything on it.
226
00:12:48,400 --> 00:12:51,473
And so it was not a flex container yet.
227
00:12:52,480 --> 00:12:57,480
So align items center and justify content center.
228
00:12:57,730 --> 00:13:01,540
So as always centering both horizontally and vertically
229
00:13:01,540 --> 00:13:03,423
using this flex box trick.
230
00:13:04,500 --> 00:13:07,290
Okay. But now this main nav list,
231
00:13:07,290 --> 00:13:09,563
which is the actual UL element.
232
00:13:11,030 --> 00:13:12,530
So this one here,
233
00:13:12,530 --> 00:13:16,320
now this is already a flex element because we used it to put
234
00:13:16,320 --> 00:13:18,683
these list items here side-by-side.
235
00:13:21,554 --> 00:13:22,387
Right.
236
00:13:22,387 --> 00:13:23,543
So right here.
237
00:13:24,830 --> 00:13:29,120
But now what we want to do is to change the flex direction.
238
00:13:29,120 --> 00:13:32,560
But now what we want to do is to simply change the flex
239
00:13:32,560 --> 00:13:33,613
direction there.
240
00:13:34,520 --> 00:13:37,093
So to have them stacked on top of each other,
241
00:13:38,533 --> 00:13:42,263
so flex direction and set it to column.
242
00:13:43,820 --> 00:13:47,500
Now let's maybe increase the gap back.
243
00:13:47,500 --> 00:13:51,803
So we reduced it, I think here before too.
244
00:13:54,380 --> 00:13:59,380
Well, maybe we didn't, but I do think that we did.
245
00:13:59,560 --> 00:14:01,920
Yeah. So here we changed it to 3.2.
246
00:14:01,920 --> 00:14:04,313
Let's put it back to 4.8 now.
247
00:14:07,330 --> 00:14:08,813
4.8 REM.
248
00:14:09,960 --> 00:14:13,610
Let's give it a save and nice.
249
00:14:13,610 --> 00:14:16,890
So that's looking a lot better than before already.
250
00:14:16,890 --> 00:14:20,193
And of course it is nicely centered and well,
251
00:14:21,160 --> 00:14:24,360
now we still have some elements here,
252
00:14:24,360 --> 00:14:26,113
which are giving us too much space.
253
00:14:27,370 --> 00:14:29,240
So that's this here.
254
00:14:29,240 --> 00:14:31,610
So that's why we cannot go this low,
255
00:14:31,610 --> 00:14:34,993
but it will work also later once we can do that.
256
00:14:36,380 --> 00:14:39,413
All right. Now let's just increase this text here a lot.
257
00:14:40,830 --> 00:14:42,683
And that should then be enough.
258
00:14:44,290 --> 00:14:47,003
So that's this code right here.
259
00:14:52,870 --> 00:14:55,523
So font size three REM.
260
00:14:59,120 --> 00:15:01,450
Okay, beautiful.
261
00:15:01,450 --> 00:15:04,250
Now this might appear to be way too big here,
262
00:15:04,250 --> 00:15:07,460
but if you actually see this on a mobile device,
263
00:15:07,460 --> 00:15:10,333
like a phone, then it will look just right.
264
00:15:11,220 --> 00:15:14,550
All right. So this was the easiest part.
265
00:15:14,550 --> 00:15:18,270
So hopefully you were able to follow up until this point
266
00:15:18,270 --> 00:15:21,130
because now we actually need to hide this here.
267
00:15:21,130 --> 00:15:24,430
So all of this container in a correct way,
268
00:15:24,430 --> 00:15:28,000
and also come up with basically a mechanism that
269
00:15:28,000 --> 00:15:31,330
we can use later in JavaScript to create the effect of
270
00:15:31,330 --> 00:15:34,540
showing and displaying this navigation.
271
00:15:34,540 --> 00:15:37,890
So we will not be able to do that functionality.
272
00:15:37,890 --> 00:15:42,200
So when we click here that the navigation actually show with
273
00:15:42,200 --> 00:15:43,930
CSS alone.
274
00:15:43,930 --> 00:15:47,531
But what we can do is to already prepare everything and
275
00:15:47,531 --> 00:15:50,970
basically do that manually.
276
00:15:50,970 --> 00:15:53,263
So let me show you what I mean with that.
277
00:15:54,590 --> 00:15:58,890
So first of all, we need a way of hiding this navigation.
278
00:15:58,890 --> 00:16:03,890
So because by default, of course it should be hidden, right?
279
00:16:05,500 --> 00:16:07,363
So hide the navigation.
280
00:16:09,500 --> 00:16:14,500
Now we have used this before, so doing display none.
281
00:16:15,030 --> 00:16:15,960
Right?
282
00:16:15,960 --> 00:16:19,423
And so if you take a look, then of course it has gone.
283
00:16:20,420 --> 00:16:24,170
Now the problem with display none is that when we use this
284
00:16:24,170 --> 00:16:27,590
on an element, we can do no animations.
285
00:16:27,590 --> 00:16:31,710
So transitions will not work when we have display set to
286
00:16:31,710 --> 00:16:32,820
none.
287
00:16:32,820 --> 00:16:34,860
So that's really, really annoying.
288
00:16:34,860 --> 00:16:37,493
And so we will need to find a way around this.
289
00:16:38,920 --> 00:16:43,920
So let me write that here allows no transitions at all.
290
00:16:46,850 --> 00:16:49,853
Now, we move down here.
291
00:16:50,890 --> 00:16:54,880
So I wanted to actually comment it just like this.
292
00:16:54,880 --> 00:16:57,720
And so the first thing that we will do here is to set your
293
00:16:57,720 --> 00:16:59,053
opacity to zero.
294
00:17:00,120 --> 00:17:00,953
So this,
295
00:17:00,953 --> 00:17:03,230
I think we have also done before in order to hide an
296
00:17:03,230 --> 00:17:06,900
element, but this does not exactly hide it.
297
00:17:06,900 --> 00:17:10,570
So this is not enough to just set opacity to zero,
298
00:17:10,570 --> 00:17:12,520
but more about that in a bit later,
299
00:17:12,520 --> 00:17:15,820
because let's now actually animate this value here,
300
00:17:15,820 --> 00:17:19,230
because this is a value that we can indeed animate,
301
00:17:19,230 --> 00:17:22,110
while display none, we cannot animate.
302
00:17:22,110 --> 00:17:25,630
So as I just said before, right.
303
00:17:25,630 --> 00:17:30,400
So if we check out then the element is still gone, right.
304
00:17:30,400 --> 00:17:34,180
And that's because it has the opacity of zero.
305
00:17:34,180 --> 00:17:38,587
If it had like 20%, then it would be a little bit visible,
306
00:17:38,587 --> 00:17:40,480
right?
307
00:17:40,480 --> 00:17:43,960
So it's barely visible now here on top, but again,
308
00:17:43,960 --> 00:17:45,583
let's set it to zero.
309
00:17:46,600 --> 00:17:48,890
Okay. But anyway,
310
00:17:48,890 --> 00:17:52,530
now it's time to actually start thinking about the mechanism
311
00:17:52,530 --> 00:17:56,550
that we're going to use to show and hide the navigation.
312
00:17:56,550 --> 00:18:00,307
And so what we're going to do now is exactly what we did in
313
00:18:00,307 --> 00:18:02,460
the component section.
314
00:18:02,460 --> 00:18:07,460
So in section number six, where we built that accordion.
315
00:18:07,520 --> 00:18:08,860
So back then,
316
00:18:08,860 --> 00:18:13,300
remember we added a class to the element that we wanted to
317
00:18:13,300 --> 00:18:16,430
be open. And so then based on that class,
318
00:18:16,430 --> 00:18:18,580
we applied to different styles.
319
00:18:18,580 --> 00:18:21,550
So we style to the element to then be open.
320
00:18:21,550 --> 00:18:25,810
And show a small box beneath the main part.
321
00:18:25,810 --> 00:18:30,750
So remember that, and if not, then that's not a big problem.
322
00:18:30,750 --> 00:18:33,963
So let me just show it to you here in our code.
323
00:18:35,280 --> 00:18:36,360
So here,
324
00:18:36,360 --> 00:18:39,507
we're going to do the same thing and we will add a class to
325
00:18:39,507 --> 00:18:42,543
the header whenever the navigation is open.
326
00:18:45,730 --> 00:18:48,580
So let's call that class nav open here.
327
00:18:48,580 --> 00:18:51,810
And so this is the class that will be added and removed
328
00:18:51,810 --> 00:18:53,450
using JavaScript.
329
00:18:53,450 --> 00:18:57,110
And so whenever the navigation is open, nav open
330
00:18:57,110 --> 00:19:00,003
will be present here on this header element.
331
00:19:00,940 --> 00:19:02,950
All right? So that's a very,
332
00:19:02,950 --> 00:19:06,350
very common technique when we build components like this,
333
00:19:06,350 --> 00:19:09,980
which need to change their state a little bit based on
334
00:19:09,980 --> 00:19:11,770
JavaScript later.
335
00:19:11,770 --> 00:19:13,963
So we're gonna be able to write some very,
336
00:19:14,921 --> 00:19:16,257
very simple JavaScript,
337
00:19:16,257 --> 00:19:18,960
which we'll simply add and remove this class here,
338
00:19:18,960 --> 00:19:22,140
depending on whether the user has clicked the navigation
339
00:19:22,140 --> 00:19:24,230
button or not.
340
00:19:24,230 --> 00:19:25,080
But anyway,
341
00:19:25,080 --> 00:19:29,150
let's not pretend that the navigation is currently open.
342
00:19:29,150 --> 00:19:32,720
And so then we can apply styles based on that.
343
00:19:32,720 --> 00:19:37,720
So see how this nav open here is now a parent of main nav,
344
00:19:38,070 --> 00:19:42,003
right? And so we can use that in our CSS like this,
345
00:19:46,100 --> 00:19:49,670
so nav open and then main nav
346
00:19:52,160 --> 00:19:55,593
then the opacity should be back to one.
347
00:19:57,270 --> 00:20:00,400
All right. And so if we check this out now,
348
00:20:00,400 --> 00:20:04,460
then here it goes. So now it's back.
349
00:20:04,460 --> 00:20:06,783
So let's see that indie inspector here.
350
00:20:10,040 --> 00:20:12,543
So indeed here is the nav open class.
351
00:20:13,610 --> 00:20:17,930
And so therefore we now have this code that we just written.
352
00:20:17,930 --> 00:20:20,500
So basically when the nav open exists,
353
00:20:20,500 --> 00:20:24,190
then this main nav style here can be applied.
354
00:20:24,190 --> 00:20:27,550
But of course, if we were to remove this class from here,
355
00:20:27,550 --> 00:20:30,880
then the selector here would no longer apply.
356
00:20:30,880 --> 00:20:35,060
We can actually simulate that here by simply deleting
357
00:20:35,060 --> 00:20:37,690
it, hitting enter,
358
00:20:37,690 --> 00:20:40,730
and then that style is gone, right.
359
00:20:40,730 --> 00:20:43,713
Simply because that selector now does no longer apply.
360
00:20:45,210 --> 00:20:46,090
So this one here,
361
00:20:46,090 --> 00:20:50,870
it cannot apply if this class is not on the page. Right.
362
00:20:50,870 --> 00:20:54,590
And so that is the whole idea behind this trick.
363
00:20:54,590 --> 00:20:56,120
Okay.
364
00:20:56,120 --> 00:20:58,203
Now let's add an animation here.
365
00:20:59,920 --> 00:21:01,063
Let's do that before.
366
00:21:02,410 --> 00:21:07,410
So transition all and 0.5 seconds.
367
00:21:08,710 --> 00:21:10,190
Okay.
368
00:21:10,190 --> 00:21:14,620
And to show you that we actually need to reload to make that
369
00:21:14,620 --> 00:21:15,653
class back.
370
00:21:17,700 --> 00:21:19,510
And now if I remove it here,
371
00:21:19,510 --> 00:21:22,210
then actually the animation should already be showing.
372
00:21:23,630 --> 00:21:26,710
So you saw that it faded out here a little bit
373
00:21:26,710 --> 00:21:28,193
over that half second.
374
00:21:29,820 --> 00:21:32,023
So that part, we already have it working.
375
00:21:32,931 --> 00:21:34,400
All right.
376
00:21:34,400 --> 00:21:38,060
But now remember how I said that this is actually not enough
377
00:21:38,060 --> 00:21:39,633
to hide the navigation.
378
00:21:40,950 --> 00:21:44,893
So to hide a navigation properly without using display none
379
00:21:44,893 --> 00:21:47,793
we need to do a couple of steps.
380
00:21:48,900 --> 00:21:52,940
So this one is the first one, which is to hide it.
381
00:21:52,940 --> 00:21:55,503
So hide the element visually.
382
00:21:57,840 --> 00:22:00,420
Then second we need to make it
383
00:22:03,870 --> 00:22:07,550
and accessible to mouse and to keyboards
384
00:22:09,960 --> 00:22:12,610
because otherwise, if we do not this,
385
00:22:12,610 --> 00:22:15,290
then if we hit the tab key, for example,
386
00:22:15,290 --> 00:22:18,630
it will still go to the links that are in that hidden
387
00:22:18,630 --> 00:22:19,950
element.
388
00:22:19,950 --> 00:22:23,273
So, because that element is really still on the page.
389
00:22:24,140 --> 00:22:27,320
So display none does really remove the element from the
390
00:22:27,320 --> 00:22:31,230
pages flow. It is as if the element does not exist,
391
00:22:31,230 --> 00:22:33,370
but with opacity set to zero,
392
00:22:33,370 --> 00:22:36,163
all that happens is that it becomes invisible.
393
00:22:37,170 --> 00:22:40,490
Right. But things like keyboard taps,
394
00:22:40,490 --> 00:22:42,720
they can still then end up there.
395
00:22:42,720 --> 00:22:45,570
So even if it's visually hidden.
396
00:22:45,570 --> 00:22:47,680
And so in order to prevent that,
397
00:22:47,680 --> 00:22:52,000
we need to set pointer events to none.
398
00:22:55,643 --> 00:22:56,660
All right.
399
00:22:56,660 --> 00:23:00,980
And then finally the third step is to also hide it from
400
00:23:00,980 --> 00:23:02,003
screen readers.
401
00:23:05,330 --> 00:23:09,020
So basically telling screen readers that this element is
402
00:23:09,020 --> 00:23:09,853
really hidden.
403
00:23:11,030 --> 00:23:14,530
So we do that by setting visibility to hidden.
404
00:23:14,530 --> 00:23:17,381
And so this is the correct way of hiding an element without
405
00:23:17,381 --> 00:23:19,343
using display none.
406
00:23:20,690 --> 00:23:22,380
Okay. But then of course,
407
00:23:22,380 --> 00:23:25,330
when we want to open the navigation,
408
00:23:25,330 --> 00:23:27,773
we need to set all of that back to normal.
409
00:23:29,350 --> 00:23:32,450
So 0.3 events to auto
410
00:23:35,840 --> 00:23:38,893
and visibility to visible.
411
00:23:40,760 --> 00:23:42,860
Now these CSS properties here,
412
00:23:42,860 --> 00:23:46,320
they probably look a bit strange, like a bit obscure,
413
00:23:46,320 --> 00:23:48,320
like this one here especially
414
00:23:48,320 --> 00:23:50,730
because this is one of those that you will very
415
00:23:50,730 --> 00:23:52,300
rarely use.
416
00:23:52,300 --> 00:23:53,320
Right?
417
00:23:53,320 --> 00:23:55,800
So if you need to build something like this,
418
00:23:55,800 --> 00:23:59,670
you just come here and basically copy this line of code and
419
00:23:59,670 --> 00:24:00,503
that's it.
420
00:24:00,503 --> 00:24:04,480
This is one of those properties you will probably never like
421
00:24:04,480 --> 00:24:05,830
memorize.
422
00:24:05,830 --> 00:24:06,663
Right?
423
00:24:08,240 --> 00:24:09,740
Okay.
424
00:24:09,740 --> 00:24:12,030
So let's put it back here. And again,
425
00:24:12,030 --> 00:24:14,230
we could now remove to see or to test it,
426
00:24:14,230 --> 00:24:17,530
but that's not really necessary because what I want to do
427
00:24:17,530 --> 00:24:22,283
now is to actually change this menu here to the close.
428
00:24:23,130 --> 00:24:23,963
Right.
429
00:24:23,963 --> 00:24:26,500
So that's what we said in the beginning that whenever the
430
00:24:27,375 --> 00:24:29,170
navigation is actually open that, then here,
431
00:24:29,170 --> 00:24:32,673
we want to show that other icon that by default is hidden.
432
00:24:34,200 --> 00:24:35,440
Right?
433
00:24:35,440 --> 00:24:36,763
So that's right here.
434
00:24:38,220 --> 00:24:43,220
So remember how we did hide that closing icon, right?
435
00:24:44,500 --> 00:24:47,190
But now at the time has come where we want to actually make
436
00:24:47,190 --> 00:24:48,670
it visible.
437
00:24:48,670 --> 00:24:50,073
So let's copy this.
438
00:24:51,890 --> 00:24:53,163
Paste this here.
439
00:24:54,560 --> 00:24:57,560
Now here let's display block.
440
00:24:57,560 --> 00:25:00,860
And here we can use display because we don't need any
441
00:25:00,860 --> 00:25:02,993
animations here for this icon.
442
00:25:04,040 --> 00:25:05,200
All right.
443
00:25:05,200 --> 00:25:07,543
Now, when do we want this to happen?
444
00:25:08,530 --> 00:25:11,780
Well, only when the navigation is open.
445
00:25:11,780 --> 00:25:15,900
So only when this class here does actually exist in our
446
00:25:15,900 --> 00:25:17,240
HTML.
447
00:25:17,240 --> 00:25:19,380
So only if that class exists,
448
00:25:19,380 --> 00:25:23,370
then this selector here does apply and it will then show the
449
00:25:23,370 --> 00:25:24,343
close icon.
450
00:25:27,120 --> 00:25:29,630
So you'll see that now it is here,
451
00:25:29,630 --> 00:25:32,490
but of course then also that one is there.
452
00:25:32,490 --> 00:25:34,933
So let's quickly hide that.
453
00:25:37,580 --> 00:25:40,673
And that's very simple. We just copied the same code.
454
00:25:42,000 --> 00:25:46,103
This one is called probably menu or something.
455
00:25:47,080 --> 00:25:48,240
Yeah.
456
00:25:48,240 --> 00:25:53,240
So the menu outline this one should have display none.
457
00:25:55,170 --> 00:25:56,597
And again,
458
00:25:56,597 --> 00:25:59,397
here we can use it because animations are not necessary.
459
00:26:00,320 --> 00:26:02,530
Just to make sure, let's reload.
460
00:26:02,530 --> 00:26:06,003
And indeed that looks just like, we want it to be.
461
00:26:08,450 --> 00:26:12,110
So I'm cutting this here or copying and then removing
462
00:26:14,280 --> 00:26:17,727
and you see that it turned now into the menu and
463
00:26:17,727 --> 00:26:19,123
everything is gone.
464
00:26:20,070 --> 00:26:24,050
But now let's double click again at a space and
465
00:26:24,050 --> 00:26:25,420
edit back on.
466
00:26:25,420 --> 00:26:27,210
And then once I hit enter,
467
00:26:27,210 --> 00:26:31,050
see how the menu will appear back here and also how this
468
00:26:31,050 --> 00:26:32,543
icon here will change.
469
00:26:33,600 --> 00:26:35,180
So let's see.
470
00:26:35,180 --> 00:26:37,150
And there we go.
471
00:26:37,150 --> 00:26:38,560
Beautiful.
472
00:26:38,560 --> 00:26:41,830
So that's really amazing, right?
473
00:26:41,830 --> 00:26:43,740
So just the power of simple trick,
474
00:26:43,740 --> 00:26:48,010
like this of adding and removing this class here. And again,
475
00:26:48,010 --> 00:26:50,443
we will in the next section use JavaScript
476
00:26:50,443 --> 00:26:52,573
to very easily do that.
477
00:26:53,630 --> 00:26:54,780
Okay.
478
00:26:54,780 --> 00:26:57,520
So we could call it a day here and actually say that we are
479
00:26:57,520 --> 00:27:01,230
ready because this is already working quite nice.
480
00:27:01,230 --> 00:27:04,730
But actually I want to just add one more thing here,
481
00:27:04,730 --> 00:27:06,992
which is another really, really cool effect
482
00:27:06,992 --> 00:27:11,731
which is to basically have this whole navigation here,
483
00:27:11,731 --> 00:27:14,703
come sliding in from the right side.
484
00:27:15,570 --> 00:27:16,480
And again,
485
00:27:16,480 --> 00:27:19,740
I'm sure that you know exactly what that effect looks like
486
00:27:19,740 --> 00:27:23,283
from other web pages or other mobile applications.
487
00:27:24,370 --> 00:27:26,653
So let's think about how we could do that.
488
00:27:27,720 --> 00:27:31,957
Well, we could simply basically move this entire thing here
489
00:27:31,957 --> 00:27:34,640
completely out of the page.
490
00:27:34,640 --> 00:27:36,800
So basically here to the right side,
491
00:27:36,800 --> 00:27:40,480
and then once the navigation becomes visible,
492
00:27:40,480 --> 00:27:42,790
then we slide that back in here.
493
00:27:42,790 --> 00:27:46,590
So move it basically here with some animation.
494
00:27:46,590 --> 00:27:49,290
And the way we can do that is to once again,
495
00:27:49,290 --> 00:27:51,533
use the transform property.
496
00:27:54,424 --> 00:27:55,660
Okay.
497
00:27:55,660 --> 00:27:59,330
So let's do that on the default state,
498
00:27:59,330 --> 00:28:01,080
which is basically this one here,
499
00:28:01,080 --> 00:28:03,443
which is also the one that has the transition.
500
00:28:04,740 --> 00:28:06,293
So let's add that maybe here,
501
00:28:08,040 --> 00:28:12,230
so transform and then translate.
502
00:28:12,230 --> 00:28:13,400
And this one,
503
00:28:13,400 --> 00:28:17,650
do we want to translate it horizontally or vertically?
504
00:28:17,650 --> 00:28:20,770
Well, of course in this case here horizontally.
505
00:28:20,770 --> 00:28:23,920
And so that is the X axis.
506
00:28:23,920 --> 00:28:25,410
All right.
507
00:28:25,410 --> 00:28:27,900
So basically we want to move it out of the screen
508
00:28:27,900 --> 00:28:31,350
completely by exactly its own width.
509
00:28:31,350 --> 00:28:35,820
And so that is 100%, right.
510
00:28:35,820 --> 00:28:36,763
So let's see.
511
00:28:37,630 --> 00:28:40,460
That now the problem is that we can still see it by
512
00:28:40,460 --> 00:28:42,850
scrolling to the right.
513
00:28:42,850 --> 00:28:46,873
You see that? So I'm basically scrolling here to the right,
514
00:28:49,415 --> 00:28:51,800
but do that also by clicking here.
515
00:28:51,800 --> 00:28:54,810
And so of course that is not what we want.
516
00:28:54,810 --> 00:28:58,050
So this should be really hidden here on the side and then
517
00:28:58,050 --> 00:28:59,233
simply move in.
518
00:29:00,430 --> 00:29:01,760
Right?
519
00:29:01,760 --> 00:29:03,730
So let's do that.
520
00:29:03,730 --> 00:29:07,853
And for that, we need to use yet another new property.
521
00:29:09,040 --> 00:29:10,750
So let's come here to general
522
00:29:11,950 --> 00:29:14,300
and this is something we
523
00:29:14,300 --> 00:29:17,143
always do actually, when we build a page like this.
524
00:29:18,400 --> 00:29:23,400
And so what I mean is that here we will set the overflow,
525
00:29:23,670 --> 00:29:26,660
but not just overflow, but overflow X,
526
00:29:26,660 --> 00:29:29,500
so horizontally to hidden.
527
00:29:29,500 --> 00:29:32,410
And so what this means is that all the elements that
528
00:29:32,410 --> 00:29:35,540
overflow the view port in the X axis,
529
00:29:35,540 --> 00:29:38,373
so horizontally, will simply be hidden.
530
00:29:39,480 --> 00:29:40,470
All right.
531
00:29:40,470 --> 00:29:45,280
And so with this, well, it should be gone actually
532
00:29:48,280 --> 00:29:49,233
while it's not.
533
00:29:50,557 --> 00:29:54,270
And so let's also set it on the HTML so many times we need
534
00:29:54,270 --> 00:29:55,713
to set it on both.
535
00:29:57,000 --> 00:29:58,100
All right.
536
00:29:58,100 --> 00:30:02,603
So not just on body, but exactly on body and on HTML.
537
00:30:03,550 --> 00:30:04,600
So let's see that
538
00:30:05,690 --> 00:30:06,660
reload here
539
00:30:09,190 --> 00:30:10,510
but well,
540
00:30:10,510 --> 00:30:13,157
that is still not really fixed.
541
00:30:13,157 --> 00:30:18,157
Oh. But the reason for that is that this element here is
542
00:30:19,040 --> 00:30:24,040
positioned relatively to the, basically to the view port.
543
00:30:24,338 --> 00:30:25,970
Okay.
544
00:30:25,970 --> 00:30:30,110
So remember that we set this here with position absolute,
545
00:30:30,110 --> 00:30:33,460
but we didn't then declare the header to being positioned
546
00:30:33,460 --> 00:30:36,160
relative. Remember that?
547
00:30:36,160 --> 00:30:38,841
So I said that maybe it wasn't necessary,
548
00:30:38,841 --> 00:30:41,413
but actually it is necessary.
549
00:30:42,550 --> 00:30:46,363
So one more, a little bit strange thing about CSS.
550
00:30:47,580 --> 00:30:49,980
So basically this only works
551
00:30:52,780 --> 00:30:54,970
if there is nothing
552
00:30:58,670 --> 00:31:03,670
absolutely positioned in relation to body.
553
00:31:05,220 --> 00:31:08,823
And so that's what right now, our main navigation is.
554
00:31:10,100 --> 00:31:13,963
So instead we need to set it to its closest parent.
555
00:31:15,400 --> 00:31:18,323
So to header here, right?
556
00:31:21,970 --> 00:31:25,170
So back here in the top,
557
00:31:25,170 --> 00:31:27,770
let's set the position here
558
00:31:30,140 --> 00:31:32,070
to relative.
559
00:31:32,070 --> 00:31:34,320
And so that should now be fixed.
560
00:31:34,320 --> 00:31:37,400
So we should have done that right in the beginning.
561
00:31:37,400 --> 00:31:41,600
So as I said, whenever we position something absolutely,
562
00:31:41,600 --> 00:31:45,490
we should always put position relative on the parent element
563
00:31:45,490 --> 00:31:49,243
in relation to which we want to position this one here.
564
00:31:50,810 --> 00:31:54,040
So I skipped that. And so now that created this problem,
565
00:31:54,040 --> 00:31:56,910
but now you see, as I try to scroll vertically,
566
00:31:56,910 --> 00:31:57,963
it doesn't work.
567
00:32:00,040 --> 00:32:00,873
All right.
568
00:32:02,870 --> 00:32:05,320
And just wanted to show you something else,
569
00:32:05,320 --> 00:32:08,250
which is if we set this here actually to
570
00:32:08,250 --> 00:32:10,700
completely overflow,
571
00:32:10,700 --> 00:32:12,470
so not just X,
572
00:32:12,470 --> 00:32:15,220
then we wouldn't be able to scroll at all.
573
00:32:15,220 --> 00:32:17,070
So in no direction.
574
00:32:17,070 --> 00:32:20,400
So I'm trying to scroll right now, which you cannot see,
575
00:32:20,400 --> 00:32:24,683
but I am trying. And so the page is not moving at all.
576
00:32:26,290 --> 00:32:30,423
Of course, that's not what we want only in this X direction.
577
00:32:32,170 --> 00:32:34,400
All right, great.
578
00:32:34,400 --> 00:32:39,315
So we moved the whole navigation here to the right using
579
00:32:39,315 --> 00:32:44,020
and now let's set it back basically to the initial state,
580
00:32:44,020 --> 00:32:46,560
once the navigation is open.
581
00:32:46,560 --> 00:32:50,283
So we want to transform translate it to zero.
582
00:32:52,520 --> 00:32:53,610
Okay.
583
00:32:53,610 --> 00:32:56,850
And it's actually very important that we use the transform
584
00:32:56,850 --> 00:33:01,090
property to do this animation because this is way more
585
00:33:01,090 --> 00:33:03,130
performance, than for example,
586
00:33:03,130 --> 00:33:06,923
doing the same thing using the left property.
587
00:33:07,930 --> 00:33:11,660
So we could also have used the left property to create this
588
00:33:11,660 --> 00:33:12,600
animation,
589
00:33:12,600 --> 00:33:15,410
but then the animation would not be as smooth
590
00:33:15,410 --> 00:33:17,140
as it should be.
591
00:33:17,140 --> 00:33:19,680
So again, transform is a very,
592
00:33:19,680 --> 00:33:23,080
very common property that should be used for transitions
593
00:33:23,080 --> 00:33:25,800
because while these kinds of animations,
594
00:33:25,800 --> 00:33:30,410
they have been optimized by CSS for this property,
595
00:33:30,410 --> 00:33:33,483
and a couple of others, such as the opacity.
596
00:33:34,370 --> 00:33:35,580
Okay.
597
00:33:35,580 --> 00:33:38,030
So now let's try that.
598
00:33:38,030 --> 00:33:39,423
Just making sure here.
599
00:33:42,330 --> 00:33:43,470
Let's copy that,
600
00:33:43,470 --> 00:33:46,943
remove it and beautiful.
601
00:33:48,020 --> 00:33:50,493
So you saw how that moved out there.
602
00:33:51,546 --> 00:33:52,980
Let's put it back
603
00:33:54,180 --> 00:33:55,940
and there it is.
604
00:33:55,940 --> 00:33:58,450
Beautifully moved in here.
605
00:33:58,450 --> 00:33:59,283
Okay.
606
00:33:59,283 --> 00:34:02,020
And with this, we are done basically.
607
00:34:02,020 --> 00:34:04,360
I just want to show you here now finally,
608
00:34:04,360 --> 00:34:08,160
the third value that we can specify in transition.
609
00:34:08,160 --> 00:34:10,850
So I mentioned way back that I was going to tell you more
610
00:34:10,850 --> 00:34:13,220
about the transition property.
611
00:34:13,220 --> 00:34:14,773
So let's quickly do that now.
612
00:34:15,610 --> 00:34:19,450
So remember that the first value here is which property we
613
00:34:19,450 --> 00:34:22,350
want to animate, then it's the duration,
614
00:34:22,350 --> 00:34:25,820
and third is the type of the animation.
615
00:34:25,820 --> 00:34:28,000
So if we don't specify anything,
616
00:34:28,000 --> 00:34:30,870
then by default the transition is linear,
617
00:34:30,870 --> 00:34:34,740
but we can also specify like a transition curve,
618
00:34:34,740 --> 00:34:36,680
which is how we call it.
619
00:34:36,680 --> 00:34:38,304
So for example,
620
00:34:38,304 --> 00:34:43,304
we can choose ease or ease in or ease in out or this one.
621
00:34:44,150 --> 00:34:48,220
So let's try ease out and let's try it over two seconds to
622
00:34:48,220 --> 00:34:49,923
see the effect a bit better.
623
00:34:52,980 --> 00:34:55,560
And so again, I will now remove this here just so
624
00:34:55,560 --> 00:34:57,393
we can see it happening.
625
00:35:00,380 --> 00:35:03,170
And maybe you saw that the animation was a little bit faster
626
00:35:03,170 --> 00:35:04,033
in the beginning.
627
00:35:05,210 --> 00:35:07,320
So if I said, it's back here now,
628
00:35:07,320 --> 00:35:10,640
then see how it was a bit fast in the beginning and then it
629
00:35:10,640 --> 00:35:12,900
slowed down significantly.
630
00:35:12,900 --> 00:35:16,423
So let's do it again by hitting command or control Z.
631
00:35:18,440 --> 00:35:20,730
Right. And then put it back.
632
00:35:20,730 --> 00:35:23,380
So that's a trick that I actually just found out for the
633
00:35:23,380 --> 00:35:24,213
first time.
634
00:35:26,530 --> 00:35:27,510
Right.
635
00:35:27,510 --> 00:35:31,080
But now let's try it maybe a bit faster and let's try it
636
00:35:31,080 --> 00:35:32,373
with ease in.
637
00:35:38,600 --> 00:35:40,173
So reloading actually,
638
00:35:42,290 --> 00:35:43,943
and then I'm removing it.
639
00:35:46,320 --> 00:35:49,910
And so did you see that it was a bit slower this time in the
640
00:35:49,910 --> 00:35:53,280
beginning and then in the end, it speed it up.
641
00:35:53,280 --> 00:35:57,213
And so easing in basically means that it starts slow and
642
00:35:57,213 --> 00:35:59,323
then it moves faster in the end.
643
00:36:01,000 --> 00:36:04,940
So you saw that it was again slow in the beginning and then
644
00:36:04,940 --> 00:36:05,923
it speeded up.
645
00:36:08,560 --> 00:36:11,640
We can also use ease in out.
646
00:36:11,640 --> 00:36:14,810
And the best thing to do here would actually be for you to
647
00:36:14,810 --> 00:36:17,193
experiment with this on your own,
648
00:36:18,560 --> 00:36:22,200
because that would be the easiest way of seeing this than me
649
00:36:22,200 --> 00:36:24,913
just showing these different things here.
650
00:36:26,740 --> 00:36:29,610
So this one basically makes it fast in the beginning and in
651
00:36:29,610 --> 00:36:32,833
the end and slows down a little bit in the middle.
652
00:36:34,810 --> 00:36:37,473
And again, it's not so easy to see that,
653
00:36:38,920 --> 00:36:42,290
but I'm showing you this because here I actually want to use
654
00:36:42,290 --> 00:36:43,750
ease in.
655
00:36:43,750 --> 00:36:47,320
And then in fact, with half a second.
656
00:36:47,320 --> 00:36:49,173
And so,
657
00:36:51,940 --> 00:36:53,690
this is the effect I was going for.
658
00:36:56,070 --> 00:36:59,170
So having it move fast in the beginning and then slowing
659
00:36:59,170 --> 00:37:00,843
down at the end.
660
00:37:02,330 --> 00:37:03,780
Okay. And, with this,
661
00:37:03,780 --> 00:37:07,780
we actually finally finished this mobile navigation.
662
00:37:07,780 --> 00:37:09,960
So that was a lot of work,
663
00:37:09,960 --> 00:37:13,150
maybe some confusing things that we did here as well.
664
00:37:13,150 --> 00:37:16,350
And so please make sure to review everything that we did
665
00:37:16,350 --> 00:37:20,290
here in order to make sure that you understood what's going
666
00:37:20,290 --> 00:37:22,710
on here so that in the future,
667
00:37:22,710 --> 00:37:26,590
you can implement a mobile navigation like this on your own.
668
00:37:26,590 --> 00:37:30,320
And maybe you will even be able to customize this.
669
00:37:30,320 --> 00:37:32,860
So you don't have to create exactly the same kind of
670
00:37:32,860 --> 00:37:36,070
navigation for yourself in the future.
671
00:37:36,070 --> 00:37:40,470
Right. But the overall logic will be the same, for example,
672
00:37:40,470 --> 00:37:44,270
things like this additional class here and the way that you
673
00:37:44,270 --> 00:37:46,330
hide it in the beginning.
674
00:37:46,330 --> 00:37:47,163
So again,
675
00:37:47,163 --> 00:37:50,720
make sure to understand this and then let's move on to our
676
00:37:50,720 --> 00:37:55,510
next category of breakpoints and media queries in the next
677
00:37:55,510 --> 00:37:56,343
lecture.
49082
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.