Original subtitles

1 1

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.