Voiceover: Welcome to the last video about jQuery. 2 2
In this lecture we'll create the responsive navigation. 3 3
When we made our website responsive, 4 4
we simply hid the navigation 5 5
for width less than 768 pixels. 6 6
Now, it's time to bring it back 7 7
and make it responsive using jQuery. 8 8
So, what do I mean by responsive navigation? 9 9
Well this is the normal navigation that we styled before. 10 10
Now as I reduce the browser width, 11 11
I want this to happen. 12 12
You see that? 13 13
Now we have this icon here, 14 14
and when we hit it, 15 15
our navigation comes down here. 16 16
Right? 17 17
So you're probably are quite used to this 18 18
type of navigation 19 19
because all kinds of responsive websites use it these days. 20 20
And we can see it down here as well, 21 21
so we click here and then all of this comes down. 22 22
And we can close and open it 23 23
as we want. 24 24
So, how do we do this? 25 25
First, we need to, of course, 26 26
put this button here inside our HTML file. 27 27
And then we need to style all of this here 28 28
in a CSS file, in the media query. 29 29
And in the end, we will use jQuery 30 30
to add this animation here. 31 31
And also to change this button style here 32 32
whenever we click on it. 33 33
So let's go do that. 34 34
So first as I said in the HTML file, 35 35
we're going to add that button, 36 36
in the navigation. 37 37
So it is, okay, 38 38
right here. 39 39
So we have the images, then we have the navigation, 40 40
and then in the end we want that button. 41 41
It will be a link. 42 42
And a class that I will call mobile nav icon. 43 43
Alright, and now we need that icon that we saw before. 44 44
Just close this. 45 45
So the icon, as before, we will get it from 46 46
our Ionicons. 47 47
And we have these three here, 48 48
and I am going to choose this one. 49 49
You can of course use one of the other ones if you like to. 50 50
So I will put this right here. 51 51
And next I am gonna style this. 52 52
So I grab this class name, 53 53
and where do we have our navigation. 54 54
Alright. 55 55
So we already have the main navi, 56 56
and the sticky navi, 57 57
and I'm gonna call this mobile navi. 58 58
First thing is to float this to the right side, right? 59 59
And, we can set some margin to the top 60 60
of three pixels. 61 61
And then I want the cursor 62 62
to show up as a pointer. 63 63
And let me show you why I'm going to do this. 64 64
So this is an a class, 65 65
but if we do not specify the href attribute, 66 66
which I will not do here. 67 67
Then we will not have that pointer. 68 68
Let me show it to you. 69 69
So I mean this pointer, so this hand. 70 70
So in that case, I need to specify that to know, 71 71
and I will say 72 72
cursor pointer. 73 73
Alright, so let's check this out. 74 74
It's here right now, 75 75
and that is because this navigation here is still visible. 76 76
So I of course don't want to see it, 77 77
for now, so I will make this display none. 78 78
Such as we did many times before, 79 79
so display none. 80 80
And I also need to style the actual icon, so, 81 81
this element is i element. 82 82
So in the other icons we always define their class 83 83
like icon big, 84 84
but in this case, it's not necessary. 85 85
'Cause we only use it in this place, 86 86
so I just say mobile nav icon, 87 87
and then the i element inside of it. 88 88
So I say font size, 89 89
let's say 200%, 90 90
and then color, white. 91 91
Okay. 92 92
And now, let's go to our queries, CSS, 93 93
and style that navigation. 94 94
So right here. 95 95
So this is what we had, 96 96
but this is no longer what we want here. 97 97
Let me just, instead of deleting it just now, 98 98
I want to leave it here. 99 99
So again, this is the code that will 100 100
apply once the width is below 767 pixels. 101 101
So now I want that icon to show up actually, 102 102
so mobile nav icon, 103 103
and I wanna display it as an inline-block. 104 104
Alright, so let me check that. 105 105
Here it is. 106 106
But I actually want this on the right side, 107 107
and the navigation more on the left side. 108 108
So I will say 109 109
that the main nav should float to the left. 110 110
Float to the left, alright. 111 111
And now we want those elements 112 112
no longer to be side by side, 113 113
but one under the other. 114 114
So that is quite easy as well. 115 115
Main nav and all the li elements inside of them. 116 116
What I do with them now is to 117 117
say display them as blocks, 118 118
and no longer as inline-blocks, as they were before. 119 119
So they will now force a line break, 120 120
and so we have all those links stacked 121 121
on one another. 122 122
And let me also style the actual link elements 123 123
inside of them. 124 124
So a and then link. 125 125
And visited, right? 126 126
So I want them to display as block as well. 127 127
And you know, they should have no border now 128 128
because on a mobile phone 129 129
we cannot hover anything, 130 130
so we don't need any border. 131 131
So we can just do this, okay. 132 132
So. 133 133
Alright, so this looks quite as we want it so far. 134 134
Now we just need to reduce 135 135
the margin to the top a little bit, 136 136
and then maybe we can also increase 137 137
maybe the font size here, 138 138
looks a little too small, I think. 139 139
We had it set to 90% and we can 140 140
set it back to 100. 141 141
We just look, how it looks down here, alright. 142 142
So, reduce the margin here 143 143
and maybe add some padding between those links as well. 144 144
So let me actually see 145 145
how the main nav is styled. 146 146
Alright, so we have a margin-top of currently 55. 147 147
But I want it to be, I don't know, 25 for now, 148 148
and also some margin on the left side, 149 149
of also 25, let's say. 150 150
Okay, and now the links, 151 151
they may have a padding of 5 pixels 152 152
on top and on the bottom, 153 153
and then zero left and right. 154 154
So let's check this. 155 155
Okay, great. 156 156
Maybe we can even say 10 pixels, 157 157
and 25 here, 158 158
that doesn't look enough. 159 159
So, on top maybe 35, 160 160
and here 10. 161 161
And as I said before, 162 162
I will increase the font size as well, 163 163
to 100%. 164 164
And now this should do the job. 165 165
Alright. 166 166
So what we also need to do, of course, 167 167
is to style the sticky navigation. 168 168
Let me just copy all of this, 169 169
and I will then later 170 170
delete the stuff that I don't want. 171 171
So you see this is a lot of work to do, 172 172
and it's quite confused, 173 173
but well, you still need to do it. 174 174
Let me set it to 10 pixels here as well, 175 175
and the color, doesn't really matter here for now. 176 176
And this also, the same. 177 177
And we can say this to 10. 178 178
So let's check this out. 179 179
Alright, great. 180 180
Now only one more thing which is 181 181
to make this icon here black. 182 182
In the sticky navigation, right? 183 183
Otherwise we will not be able to see it. 184 184
So it's simple, 185 185
sticky mobile nav icon, 186 186
and then i, and color, 187 187
555, such as the rest 188 188
of the webpage. 189 189
And now this will look exactly as we want it. 190 190
Actually not, actually we want less space now. 191 191
Let me check this again. 192 192
So we have 30 pixels now and, 193 193
that's way too much, of course. 194 194
So duplicate this, 195 195
and margin-top, 10 pixels. 196 196
Okay now, great. 197 197
So, now comes the jQuery part. 198 198
We need to start by hiding this again. 199 199
Because, of course, when we open the webpage, 200 200
this will not be visible. 201 201
And then, when we hit this button here, 202 202
it will become visible. 203 203
Okay, so let me 204 204
take those comments away. 205 205
Because then the display will be none again, 206 206
so this will be hidden. 207 207
And now let's define 208 208
what happens when we click on that button. 209 209
Back to jQuery. 210 210
Mobile navigation. 211 211
So let's define a class for JavaScript 212 212
when we hit this button. 213 213
Such as we always do, 214 214
and this will be nav icon, very simple, 215 215
so we just copy this 216 216
because now we need to select it 217 217
here in the jQuery. 218 218
So, and now 219 219
if you can imagine this, this is click, 220 220
and function. 221 221
And now let's use something new, 222 222
which is called variables. 223 223
So in programming we have something called variables, 224 224
where we can store things. 225 225
And here I will simply create 226 226
a variable called nav, 227 227
and what this variable will be, 228 228
is the result of selecting the navigation. 229 229
So let me just show it to you. 230 230
So, main nav. 231 231
And actually we should create 232 232
the class for that as well. 233 233
So here, js main nav. 234 234
So, and I did this because 235 235
I will have to use this many times now, 236 236
and I don't want to repeat 237 237
this code here all over again, and again, and again. 238 238
So I define a variable, 239 239
and then I can use that variable instead of 240 240
always writing the same code. 241 241
So now what are we gonna do with this? 242 242
There's a very simple 243 243
jQuery method, 244 244
which is just called slide toggle. 245 245
And all this does 246 246
is to open and close a box. 247 247
And we will see that in a minute. 248 248
And here, in this method we have to 249 249
just say how many time the animation shall take. 250 250
And we will say 0.2 seconds, 251 251
which is 200 milliseconds. 252 252
Such as here, 253 253
where we said we wanted 254 254
a thousand milliseconds, here we want 200. 255 255
And this is actually all it takes 256 256
to create that open and close effect. 257 257
So we click here and it opens, and it closes, and it opens, 258 258
and it closes. 259 259
This creates exactly what we want, right? 260 260
So now there's only one thing left to do, 261 261
which is to change the icon of this, 262 262
each time we click it. 263 263
So, if this is the menu icon, 264 264
we want it to be like 265 265
cross to close it, 266 266
and when it's a cross, 267 267
we want it to be the close icon. 268 268
Really straight forward, right? 269 269
So first of all let's grab an icon 270 270
for that, and it will be this one, I think. 271 271
So make this a little bigger again. 272 272
So this looks good. 273 273
So this was the first part of the code, 274 274
let me just copy this here, I'll use it now. 275 275
And so, how can we change that icon? 276 276
It's easier to explain here. 277 277
So, the icon is essentially defined by the class. 278 278
So, if we want to change the icon, 279 279
we can simply change the class. 280 280
And we already did that before, 281 281
with the add class and the remove class. 282 282
So we will now do exactly that. 283 283
And I will in fact create a new variable here 284 284
called icon. 285 285
So that I don't have to repeat that code later again. 286 286
And this is now js nav icon i 287 287
because that is in fact, 288 288
the class or the element which has 289 289
the class with the icon. 290 290
So now I can make a simple if again, 291 291
which is to take decisions. 292 292
So I say, if icon 293 293
has class, so this is something new we didn't see before. 294 294
And I will say, 295 295
ion nav icon round so this is the class name. 296 296
Well then do something, 297 297
and if not, 298 298
then do something else. 299 299
So again, so if the icon, 300 300
which means if the element we select here 301 301
has the class ion nav icon round, 302 302
then we want the icon 303 303
to have another class. 304 304
Which is this one. 305 305
So we want to add this one 306 306
and we want to remove the old one. 307 307
So remove class, 308 308
and then this one. 309 309
So this will simply exchange the icons. 310 310
So when it is the navigation icon, 311 311
take that navigation icon away 312 312
and put the close icon instead. 313 313
And if it's the other way around, 314 314
then, well, 315 315
then add the nav icon 316 316
and remove the close. 317 317
And now we have all situations covered. 318 318
So this should work now. 319 319
I just need to correct this one here. 320 320
And now we should be ready to go. 321 321
And here we go. 322 322
This works exactly as we wanted. 323 323
And up here as well, great. 324 324
Very good. 325 325
So we have all kinds of effects now here on our webpage, 326 326
even if the responsive version, 327 327
it all works the same. 328 328
Fantastic. 329 329
So, this is all I had to show you about jQuery. 330 330
jQuery has endless possibilities, 331 331
and there is still so much to learn. 332 332
And there are in fact entire books 333 333
and online courses devoted to teach you jQuery. 334 334
So you see, this is a really huge topic, 335 335
but I think you know some of the basics now. 336 336
And that actually enables you to write some simple code 337 337
on your own, or to include 338 338
one of the many, many jQuery plugins 339 339
into your project. 340 340
And that is already quite powerful. 341 341
Now as before, you can find a link, 342 342
where you can download the entire project 343 343
we've built so far, 344 344
in the description of this video. 345 345
Now in the next couple of lectures, 346 346
we'll optimize this webpage, 347 347
and then learn how to launch it.