1
00:00:02,060 --> 00:00:04,170
Let's work on the hamburger button.

2
00:00:04,170 --> 00:00:06,340
And as we don't have such a button at the moment

3
00:00:06,340 --> 00:00:07,640
on our website,

4
00:00:07,640 --> 00:00:10,873
we have to go back to the index HTML file once again.

5
00:00:11,720 --> 00:00:14,640
The question now is, where do we add our button?

6
00:00:14,640 --> 00:00:17,510
Well, at the moment we have our header here,

7
00:00:17,510 --> 00:00:18,790
that's the total header.

8
00:00:18,790 --> 00:00:21,260
And this header consists of the anchor tag,

9
00:00:21,260 --> 00:00:23,360
which is our WebFood logo.

10
00:00:23,360 --> 00:00:26,400
And then we have the navigation element down here.

11
00:00:26,400 --> 00:00:28,230
As you know, in the mobile view,

12
00:00:28,230 --> 00:00:30,703
which we currently have here on our page,

13
00:00:31,630 --> 00:00:35,340
if we quickly go into the header and onto nav element,

14
00:00:35,340 --> 00:00:37,410
then you see here in the styles tab

15
00:00:37,410 --> 00:00:39,770
that currently due to our media query,

16
00:00:39,770 --> 00:00:42,770
the nav element is set to display none,

17
00:00:42,770 --> 00:00:45,590
therefore, it's not visible at the moment

18
00:00:45,590 --> 00:00:48,510
Instead of this nav element here,

19
00:00:48,510 --> 00:00:50,950
we want to display this hamburger button,

20
00:00:50,950 --> 00:00:53,560
but it should, of course, also be part of the header.

21
00:00:53,560 --> 00:00:55,710
Therefore, it definitely makes sense

22
00:00:55,710 --> 00:01:00,030
to add this hamburger icon below our nav element here.

23
00:01:00,030 --> 00:01:02,860
We'll of course then control that the hamburger button

24
00:01:02,860 --> 00:01:05,269
should not be displayed in the desktop view,

25
00:01:05,269 --> 00:01:07,210
but that's something we can easily handle

26
00:01:07,210 --> 00:01:10,100
with media queries, as we learned.

27
00:01:10,100 --> 00:01:12,100
So let's add this button now.

28
00:01:12,100 --> 00:01:13,300
And as I said,

29
00:01:13,300 --> 00:01:16,400
the button or the icon should be clickable.

30
00:01:16,400 --> 00:01:19,610
Therefore, we'll use an anchor tag for this purpose

31
00:01:19,610 --> 00:01:20,600
because with anchor tags,

32
00:01:20,600 --> 00:01:24,910
we can create references to internal or external pages.

33
00:01:24,910 --> 00:01:26,300
As you saw on the slide,

34
00:01:26,300 --> 00:01:29,410
we will indeed create a link on the existing page

35
00:01:29,410 --> 00:01:30,410
of the website,

36
00:01:30,410 --> 00:01:33,050
but that's something a bit more advanced.

37
00:01:33,050 --> 00:01:36,410
Therefore, we'll keep the reference empty at the moment

38
00:01:36,410 --> 00:01:38,800
and just focus on the button itself,

39
00:01:38,800 --> 00:01:40,130
so where it should be positioned

40
00:01:40,130 --> 00:01:41,580
and what it should look like.

41
00:01:42,420 --> 00:01:45,680
What I'll still add besides the hyper reference here

42
00:01:45,680 --> 00:01:49,050
is a class though to be able to style it appropriately.

43
00:01:49,050 --> 00:01:51,860
And for the class, we could choose a name like

44
00:01:52,820 --> 00:01:54,790
menu button maybe

45
00:01:54,790 --> 00:01:56,940
because this button will open the menu

46
00:01:56,940 --> 00:01:58,810
with the navigation items.

47
00:01:58,810 --> 00:02:00,950
And inside this anchor text,

48
00:02:00,950 --> 00:02:02,630
so in here as content,

49
00:02:02,630 --> 00:02:05,120
we won't have any texts or something like this.

50
00:02:05,120 --> 00:02:08,580
We just want to have these three white lines.

51
00:02:08,580 --> 00:02:12,540
There are different ways to style or create such lines.

52
00:02:12,540 --> 00:02:16,090
I'll go for a pretty straightforward and common one.

53
00:02:16,090 --> 00:02:19,500
We'll just use three empty inline elements,

54
00:02:19,500 --> 00:02:21,110
spans in this case,

55
00:02:21,110 --> 00:02:22,630
and then style these accordingly

56
00:02:22,630 --> 00:02:25,160
to make it look like these three lines.

57
00:02:25,160 --> 00:02:27,023
So we'll just add a first span,

58
00:02:28,520 --> 00:02:29,663
a second span,

59
00:02:31,420 --> 00:02:33,570
and a third span,

60
00:02:33,570 --> 00:02:34,403
like this.

61
00:02:35,530 --> 00:02:39,160
That's already the button from an HTML perspective.

62
00:02:39,160 --> 00:02:40,960
Of course, if we now go back to the page,

63
00:02:40,960 --> 00:02:42,480
well, we cannot see a lot.

64
00:02:42,480 --> 00:02:44,450
The button is actually not visible

65
00:02:44,450 --> 00:02:47,020
because it doesn't contain anything besides, well,

66
00:02:47,020 --> 00:02:48,710
empty span elements.

67
00:02:48,710 --> 00:02:51,430
Therefore, to make it visible,

68
00:02:51,430 --> 00:02:54,073
we should go to the CSS file now.

69
00:02:55,310 --> 00:02:57,550
And in here, I'll scroll up.

70
00:02:57,550 --> 00:03:01,260
Maybe, let's see, maybe below our logo here.

71
00:03:01,260 --> 00:03:04,350
Here we could implement the styles for the button

72
00:03:04,350 --> 00:03:08,390
and we have to refer to two different parts of the button.

73
00:03:08,390 --> 00:03:11,170
So to say, first the container,

74
00:03:11,170 --> 00:03:13,510
which is the menu button class,

75
00:03:13,510 --> 00:03:16,750
so the actual anchor text so to say,

76
00:03:16,750 --> 00:03:17,690
and below that,

77
00:03:17,690 --> 00:03:19,700
let me also add this immediately,

78
00:03:19,700 --> 00:03:22,180
will again refer to the container,

79
00:03:22,180 --> 00:03:27,180
but specifically will style the items inside our container,

80
00:03:27,980 --> 00:03:30,290
which are our span elements,

81
00:03:30,290 --> 00:03:33,050
which will become the actual hamburger item,

82
00:03:33,050 --> 00:03:35,033
so these three different lines.

83
00:03:35,910 --> 00:03:38,730
And actually, I would like to get started with styling

84
00:03:38,730 --> 00:03:41,060
these three span elements here,

85
00:03:41,060 --> 00:03:42,690
because without styling these,

86
00:03:42,690 --> 00:03:45,810
we will hardly see anything inside our button

87
00:03:45,810 --> 00:03:47,460
because the button just consists of

88
00:03:47,460 --> 00:03:49,330
these empty span elements.

89
00:03:49,330 --> 00:03:50,163
Therefore,

90
00:03:50,163 --> 00:03:54,580
I'll just add a width to each of these elements of 100%.

91
00:03:54,580 --> 00:03:58,840
So these elements should use 100% of the space available

92
00:03:58,840 --> 00:04:00,173
inside this button.

93
00:04:02,220 --> 00:04:04,770
We'll then add a height to these.

94
00:04:04,770 --> 00:04:09,770
Here, I'll just add a height of maybe three pixels.

95
00:04:10,510 --> 00:04:12,890
We could also use REM here once again,

96
00:04:12,890 --> 00:04:15,110
but to make it scalable with the font size,

97
00:04:15,110 --> 00:04:18,180
but I think three pixels height are a good choice here

98
00:04:18,180 --> 00:04:21,329
to make it look good on any device widths.

99
00:04:21,329 --> 00:04:22,200
And finally,

100
00:04:22,200 --> 00:04:24,270
we of course need some background color here

101
00:04:24,270 --> 00:04:27,910
because otherwise we cannot see our lines

102
00:04:27,910 --> 00:04:31,970
and here I'll just go for white lines here.

103
00:04:31,970 --> 00:04:35,630
So this will be our three horizontal lines.

104
00:04:35,630 --> 00:04:39,010
We added a width of 100% here though.

105
00:04:39,010 --> 00:04:41,790
So we should also add some width and height

106
00:04:41,790 --> 00:04:43,740
for the actual container.

107
00:04:43,740 --> 00:04:46,220
And for this, we'll go to the menu button,

108
00:04:46,220 --> 00:04:47,910
so to the actual container.

109
00:04:47,910 --> 00:04:50,230
And there we'll add a width

110
00:04:51,451 --> 00:04:53,250
of

111
00:04:53,250 --> 00:04:55,490
maybe three REM.

112
00:04:55,490 --> 00:04:58,850
So three REM, let's see if that's too much or not.

113
00:04:58,850 --> 00:05:00,890
Why am I using REM right here?

114
00:05:00,890 --> 00:05:03,380
Well, above in our header right there,

115
00:05:03,380 --> 00:05:05,820
we are using REM for the height,

116
00:05:05,820 --> 00:05:07,980
so the button should also scale.

117
00:05:07,980 --> 00:05:09,790
Therefore, I'll go over with REM here.

118
00:05:09,790 --> 00:05:12,720
And besides that width, I'll also define a height.

119
00:05:12,720 --> 00:05:15,560
Here we'll go with an equal value of three REM

120
00:05:15,560 --> 00:05:19,500
to achieve this hamburger like look that we saw.

121
00:05:19,500 --> 00:05:20,793
If we now go back,

122
00:05:21,760 --> 00:05:23,810
we cannot see anything here though.

123
00:05:23,810 --> 00:05:26,450
Here if we select the spans or the button,

124
00:05:26,450 --> 00:05:28,220
nothing is displayed.

125
00:05:28,220 --> 00:05:29,930
Why is this the case?

126
00:05:29,930 --> 00:05:33,560
Well, if we select one of the span elements

127
00:05:33,560 --> 00:05:36,040
and go into the computer tab here.

128
00:05:36,040 --> 00:05:37,630
Let's scroll down a bit.

129
00:05:37,630 --> 00:05:39,560
Then you see, no big surprise,

130
00:05:39,560 --> 00:05:42,770
span elements are inline elements.

131
00:05:42,770 --> 00:05:44,930
Now that's not a big problem in general,

132
00:05:44,930 --> 00:05:47,000
but as you learn throughout this course,

133
00:05:47,000 --> 00:05:51,550
inline elements only occupy as much space as needed.

134
00:05:51,550 --> 00:05:55,330
And in case inline elements don't contain any content,

135
00:05:55,330 --> 00:05:56,720
text, for example,

136
00:05:56,720 --> 00:05:59,380
well, they basically are not displayed at all

137
00:05:59,380 --> 00:06:01,060
because what should be displayed?

138
00:06:01,060 --> 00:06:04,680
There is nothing there that we could show in the browser.

139
00:06:04,680 --> 00:06:05,890
How can we change this?

140
00:06:05,890 --> 00:06:07,730
Well, we have multiple options.

141
00:06:07,730 --> 00:06:10,510
One option would be to go back to the code,

142
00:06:10,510 --> 00:06:12,360
into the HTML file

143
00:06:12,360 --> 00:06:14,740
and go to the spans down here

144
00:06:14,740 --> 00:06:18,580
and add some texture, for example,

145
00:06:18,580 --> 00:06:20,950
if it would save this and go back

146
00:06:20,950 --> 00:06:24,030
and you could see at least this first span element,

147
00:06:24,030 --> 00:06:25,710
but of course that's not what we want

148
00:06:25,710 --> 00:06:27,670
because these should be empty,

149
00:06:27,670 --> 00:06:30,090
so not the correct solution for us.

150
00:06:30,090 --> 00:06:31,713
Therefore, let's delete this.

151
00:06:33,230 --> 00:06:35,940
Alternatively, we could go into the styles.

152
00:06:35,940 --> 00:06:38,060
Yes, sfa once again,

153
00:06:38,060 --> 00:06:40,070
into our spans

154
00:06:40,070 --> 00:06:44,750
and they'll turn the display property to block, right?

155
00:06:44,750 --> 00:06:46,610
We turn these into block elements

156
00:06:46,610 --> 00:06:48,320
and for block elements,

157
00:06:48,320 --> 00:06:50,480
which don't only occupy the space needed,

158
00:06:50,480 --> 00:06:53,170
but occupy the entire space available per line.

159
00:06:53,170 --> 00:06:56,730
So if you go back, you'll see this will also work,

160
00:06:56,730 --> 00:06:59,060
but there is a more elegant alternative

161
00:06:59,060 --> 00:07:01,743
instead of turning each element into a block element.

162
00:07:02,660 --> 00:07:04,670
Because we actually have to arrange

163
00:07:04,670 --> 00:07:07,320
our three elements here vertically, right?

164
00:07:07,320 --> 00:07:09,160
We want to have the first line,

165
00:07:09,160 --> 00:07:10,860
the second one, and the third one,

166
00:07:10,860 --> 00:07:13,430
and these should be equally distributed.

167
00:07:13,430 --> 00:07:15,703
Is there something that comes to your mind?

168
00:07:16,820 --> 00:07:19,870
Well, why don't we turn our menu button here,

169
00:07:19,870 --> 00:07:23,300
the container, into a flex container.

170
00:07:23,300 --> 00:07:26,110
This has the great advantage that the elements

171
00:07:26,110 --> 00:07:28,630
no longer behave as in the elements,

172
00:07:28,630 --> 00:07:30,380
but as block elements.

173
00:07:30,380 --> 00:07:33,580
And we can also use flex box great capabilities

174
00:07:33,580 --> 00:07:36,500
to easily style the hamburger icon.

175
00:07:36,500 --> 00:07:38,400
Therefore, let's go back

176
00:07:38,400 --> 00:07:42,690
and let's remove our display block code down here.

177
00:07:42,690 --> 00:07:45,510
And instead, we'll go to the container here

178
00:07:45,510 --> 00:07:50,440
and add the display flex property.

179
00:07:50,440 --> 00:07:53,600
With this in place, let's see if it worked.

180
00:07:53,600 --> 00:07:54,710
Yes, it did.

181
00:07:54,710 --> 00:07:57,520
Now we have, well, one horizontal line,

182
00:07:57,520 --> 00:08:01,250
but if we inspect this, you see we have one span,

183
00:08:01,250 --> 00:08:03,070
the second span,

184
00:08:03,070 --> 00:08:04,430
and the third span.

185
00:08:04,430 --> 00:08:06,450
And now you might say, well,

186
00:08:06,450 --> 00:08:10,470
I thought we have block elements now in our flex container.

187
00:08:10,470 --> 00:08:13,000
Well, in the computer tab,

188
00:08:13,000 --> 00:08:14,740
if we scroll down,

189
00:08:14,740 --> 00:08:16,140
you'll see that this is the case.

190
00:08:16,140 --> 00:08:18,820
We have this plate block right here.

191
00:08:18,820 --> 00:08:22,070
But remember, we are in a flex box context now.

192
00:08:22,070 --> 00:08:23,500
So we have the flex container

193
00:08:23,500 --> 00:08:26,680
and the flex items in there are now behaving

194
00:08:26,680 --> 00:08:28,690
well, like block elements,

195
00:08:28,690 --> 00:08:32,120
but with the flex direction property of row

196
00:08:32,120 --> 00:08:33,720
being applied by default,

197
00:08:33,720 --> 00:08:36,852
therefore, these are positioned next to each other now.

198
00:08:37,940 --> 00:08:39,919
That's not the desired look though.

199
00:08:39,919 --> 00:08:43,840
We want our elements to be displayed below each other.

200
00:08:43,840 --> 00:08:45,690
For this, in our code,

201
00:08:45,690 --> 00:08:50,210
we just have to change the flex direction property here

202
00:08:50,210 --> 00:08:51,283
to column.

203
00:08:53,050 --> 00:08:55,290
With this in place, if we check it again,

204
00:08:55,290 --> 00:08:57,170
well yeah, still not there,

205
00:08:57,170 --> 00:08:59,200
but we have the first span on top,

206
00:08:59,200 --> 00:09:00,470
the second one below,

207
00:09:00,470 --> 00:09:02,653
and the third one, well, at the bottom.

208
00:09:03,650 --> 00:09:06,330
What's missing here of course, is another property

209
00:09:06,330 --> 00:09:08,120
we've used a lot throughout this course,

210
00:09:08,120 --> 00:09:10,620
it's to justify content property,

211
00:09:10,620 --> 00:09:13,860
to define how the space between our elements

212
00:09:13,860 --> 00:09:16,080
inside our flex container,

213
00:09:16,080 --> 00:09:17,870
so inside this container here,

214
00:09:17,870 --> 00:09:19,220
should be used.

215
00:09:19,220 --> 00:09:21,210
There, I'll do this a bit faster now,

216
00:09:21,210 --> 00:09:22,320
as we know how this works,

217
00:09:22,320 --> 00:09:25,030
we can use to justify content property as I said,

218
00:09:25,030 --> 00:09:27,890
and this time I'll go with space around here

219
00:09:27,890 --> 00:09:32,410
so to distribute the space around each element evenly

220
00:09:32,410 --> 00:09:33,970
and with this in place.

221
00:09:33,970 --> 00:09:35,640
Yeah, I think this looks good now.

222
00:09:35,640 --> 00:09:39,200
This is our clickable hamburger icon,

223
00:09:39,200 --> 00:09:40,573
our hamburger button.

224
00:09:41,960 --> 00:09:44,480
So this is task one solved.

225
00:09:44,480 --> 00:09:46,740
The next tasks now are two and three.

226
00:09:46,740 --> 00:09:48,340
So if we click the button,

227
00:09:48,340 --> 00:09:49,780
the side drawer should open.

228
00:09:49,780 --> 00:09:50,920
If we click it again,

229
00:09:50,920 --> 00:09:52,023
it should disappear.