Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,050 --> 00:00:04,505 Welcome to the last video about jQuery. 2 2 00:00:04,505 --> 00:00:08,417 In this lecture we'll create the responsive navigation. 3 3 00:00:08,417 --> 00:00:11,002 When we made our website responsive, 4 4 00:00:11,002 --> 00:00:12,682 we simply hid the navigation 5 5 00:00:12,682 --> 00:00:15,265 for width less than 768 pixels. 6 6 00:00:16,877 --> 00:00:18,673 Now, it's time to bring it back 7 7 00:00:18,673 --> 00:00:21,673 and make it responsive using jQuery. 8 8 00:00:23,099 --> 00:00:26,452 So, what do I mean by responsive navigation? 9 9 00:00:26,452 --> 00:00:29,999 Well this is the normal navigation that we styled before. 10 10 00:00:29,999 --> 00:00:33,126 Now as I reduce the browser width, 11 11 00:00:33,126 --> 00:00:35,391 I want this to happen. 12 12 00:00:35,391 --> 00:00:36,396 You see that? 13 13 00:00:36,396 --> 00:00:39,104 Now we have this icon here, 14 14 00:00:39,104 --> 00:00:40,687 and when we hit it, 15 15 00:00:41,726 --> 00:00:44,220 our navigation comes down here. 16 16 00:00:44,220 --> 00:00:45,183 Right? 17 17 00:00:45,183 --> 00:00:48,516 So you're probably are quite used to this 18 18 00:00:48,516 --> 00:00:50,421 type of navigation 19 19 00:00:50,421 --> 00:00:55,118 because all kinds of responsive websites use it these days. 20 20 00:00:55,118 --> 00:00:56,784 And we can see it down here as well, 21 21 00:00:56,784 --> 00:01:00,910 so we click here and then all of this comes down. 22 22 00:01:00,910 --> 00:01:03,731 And we can close and open it 23 23 00:01:03,731 --> 00:01:05,428 as we want. 24 24 00:01:05,428 --> 00:01:07,896 So, how do we do this? 25 25 00:01:07,896 --> 00:01:11,041 First, we need to, of course, 26 26 00:01:11,041 --> 00:01:14,440 put this button here inside our HTML file. 27 27 00:01:14,440 --> 00:01:17,763 And then we need to style all of this here 28 28 00:01:17,763 --> 00:01:20,415 in a CSS file, in the media query. 29 29 00:01:20,415 --> 00:01:23,115 And in the end, we will use jQuery 30 30 00:01:23,115 --> 00:01:25,544 to add this animation here. 31 31 00:01:25,544 --> 00:01:28,023 And also to change this button style here 32 32 00:01:28,023 --> 00:01:30,728 whenever we click on it. 33 33 00:01:30,728 --> 00:01:32,395 So let's go do that. 34 34 00:01:37,930 --> 00:01:40,735 So first as I said in the HTML file, 35 35 00:01:40,735 --> 00:01:43,318 we're going to add that button, 36 36 00:01:44,376 --> 00:01:45,295 in the navigation. 37 37 00:01:45,295 --> 00:01:46,545 So it is, okay, 38 38 00:01:47,860 --> 00:01:48,989 right here. 39 39 00:01:48,989 --> 00:01:51,944 So we have the images, then we have the navigation, 40 40 00:01:51,944 --> 00:01:55,509 and then in the end we want that button. 41 41 00:01:55,509 --> 00:01:57,009 It will be a link. 42 42 00:01:59,048 --> 00:02:02,798 And a class that I will call mobile nav icon. 43 43 00:02:06,638 --> 00:02:10,805 Alright, and now we need that icon that we saw before. 44 44 00:02:13,267 --> 00:02:14,347 Just close this. 45 45 00:02:14,347 --> 00:02:17,670 So the icon, as before, we will get it from 46 46 00:02:17,670 --> 00:02:18,753 our Ionicons. 47 47 00:02:22,185 --> 00:02:25,017 And we have these three here, 48 48 00:02:25,017 --> 00:02:27,881 and I am going to choose this one. 49 49 00:02:27,881 --> 00:02:32,048 You can of course use one of the other ones if you like to. 50 50 00:02:33,203 --> 00:02:35,817 So I will put this right here. 51 51 00:02:35,817 --> 00:02:38,400 And next I am gonna style this. 52 52 00:02:39,358 --> 00:02:41,525 So I grab this class name, 53 53 00:02:42,759 --> 00:02:45,759 and where do we have our navigation. 54 54 00:02:47,809 --> 00:02:48,642 Alright. 55 55 00:02:52,578 --> 00:02:54,681 So we already have the main navi, 56 56 00:02:54,681 --> 00:02:56,094 and the sticky navi, 57 57 00:02:56,094 --> 00:02:59,094 and I'm gonna call this mobile navi. 58 58 00:03:04,792 --> 00:03:08,959 First thing is to float this to the right side, right? 59 59 00:03:10,548 --> 00:03:14,005 And, we can set some margin to the top 60 60 00:03:14,005 --> 00:03:15,338 of three pixels. 61 61 00:03:17,753 --> 00:03:19,561 And then I want the cursor 62 62 00:03:19,561 --> 00:03:22,165 to show up as a pointer. 63 63 00:03:22,165 --> 00:03:24,969 And let me show you why I'm going to do this. 64 64 00:03:24,969 --> 00:03:26,739 So this is an a class, 65 65 00:03:26,739 --> 00:03:30,318 but if we do not specify the href attribute, 66 66 00:03:30,318 --> 00:03:32,262 which I will not do here. 67 67 00:03:32,262 --> 00:03:35,954 Then we will not have that pointer. 68 68 00:03:35,954 --> 00:03:38,007 Let me show it to you. 69 69 00:03:38,007 --> 00:03:41,090 So I mean this pointer, so this hand. 70 70 00:03:42,773 --> 00:03:46,948 So in that case, I need to specify that to know, 71 71 00:03:46,948 --> 00:03:48,027 and I will say 72 72 00:03:48,027 --> 00:03:49,277 cursor pointer. 73 73 00:03:53,554 --> 00:03:56,304 Alright, so let's check this out. 74 74 00:04:01,607 --> 00:04:03,993 It's here right now, 75 75 00:04:03,993 --> 00:04:08,160 and that is because this navigation here is still visible. 76 76 00:04:08,995 --> 00:04:11,780 So I of course don't want to see it, 77 77 00:04:11,780 --> 00:04:14,875 for now, so I will make this display none. 78 78 00:04:14,875 --> 00:04:17,411 Such as we did many times before, 79 79 00:04:17,411 --> 00:04:18,744 so display none. 80 80 00:04:22,402 --> 00:04:26,152 And I also need to style the actual icon, so, 81 81 00:04:29,916 --> 00:04:31,839 this element is i element. 82 82 00:04:31,839 --> 00:04:34,474 So in the other icons we always define their class 83 83 00:04:34,474 --> 00:04:36,365 like icon big, 84 84 00:04:36,365 --> 00:04:39,039 but in this case, it's not necessary. 85 85 00:04:39,039 --> 00:04:41,856 'Cause we only use it in this place, 86 86 00:04:41,856 --> 00:04:44,356 so I just say mobile nav icon, 87 87 00:04:47,208 --> 00:04:50,301 and then the i element inside of it. 88 88 00:04:50,301 --> 00:04:51,884 So I say font size, 89 89 00:04:53,943 --> 00:04:56,253 let's say 200%, 90 90 00:04:56,253 --> 00:04:58,086 and then color, white. 91 91 00:05:03,391 --> 00:05:04,224 Okay. 92 92 00:05:05,666 --> 00:05:08,833 And now, let's go to our queries, CSS, 93 93 00:05:11,018 --> 00:05:13,185 and style that navigation. 94 94 00:05:16,214 --> 00:05:17,381 So right here. 95 95 00:05:19,392 --> 00:05:20,786 So this is what we had, 96 96 00:05:20,786 --> 00:05:24,119 but this is no longer what we want here. 97 97 00:05:25,315 --> 00:05:27,956 Let me just, instead of deleting it just now, 98 98 00:05:27,956 --> 00:05:29,956 I want to leave it here. 99 99 00:05:31,074 --> 00:05:33,692 So again, this is the code that will 100 100 00:05:33,692 --> 00:05:37,109 apply once the width is below 767 pixels. 101 101 00:05:39,009 --> 00:05:42,243 So now I want that icon to show up actually, 102 102 00:05:42,243 --> 00:05:43,826 so mobile nav icon, 103 103 00:05:48,990 --> 00:05:52,490 and I wanna display it as an inline-block. 104 104 00:05:53,737 --> 00:05:56,237 Alright, so let me check that. 105 105 00:06:03,306 --> 00:06:04,223 Here it is. 106 106 00:06:05,079 --> 00:06:07,829 But I actually want this on the right side, 107 107 00:06:07,829 --> 00:06:10,993 and the navigation more on the left side. 108 108 00:06:10,993 --> 00:06:12,076 So I will say 109 109 00:06:14,064 --> 00:06:17,647 that the main nav should float to the left. 110 110 00:06:21,617 --> 00:06:23,867 Float to the left, alright. 111 111 00:06:25,136 --> 00:06:27,131 And now we want those elements 112 112 00:06:27,131 --> 00:06:29,485 no longer to be side by side, 113 113 00:06:29,485 --> 00:06:31,485 but one under the other. 114 114 00:06:33,741 --> 00:06:36,077 So that is quite easy as well. 115 115 00:06:36,077 --> 00:06:40,077 Main nav and all the li elements inside of them. 116 116 00:06:41,161 --> 00:06:43,114 What I do with them now is to 117 117 00:06:43,114 --> 00:06:45,364 say display them as blocks, 118 118 00:06:46,335 --> 00:06:49,822 and no longer as inline-blocks, as they were before. 119 119 00:06:49,822 --> 00:06:51,929 So they will now force a line break, 120 120 00:06:51,929 --> 00:06:54,999 and so we have all those links stacked 121 121 00:06:54,999 --> 00:06:56,249 on one another. 122 122 00:06:58,018 --> 00:07:02,539 And let me also style the actual link elements 123 123 00:07:02,539 --> 00:07:03,996 inside of them. 124 124 00:07:03,996 --> 00:07:05,579 So a and then link. 125 125 00:07:10,084 --> 00:07:11,667 And visited, right? 126 126 00:07:15,015 --> 00:07:18,598 So I want them to display as block as well. 127 127 00:07:19,932 --> 00:07:22,637 And you know, they should have no border now 128 128 00:07:22,637 --> 00:07:25,304 because on a mobile phone 129 129 00:07:25,304 --> 00:07:27,437 we cannot hover anything, 130 130 00:07:27,437 --> 00:07:30,126 so we don't need any border. 131 131 00:07:30,126 --> 00:07:32,543 So we can just do this, okay. 132 132 00:07:34,497 --> 00:07:35,330 So. 133 133 00:07:42,169 --> 00:07:45,680 Alright, so this looks quite as we want it so far. 134 134 00:07:45,680 --> 00:07:47,702 Now we just need to reduce 135 135 00:07:47,702 --> 00:07:50,231 the margin to the top a little bit, 136 136 00:07:50,231 --> 00:07:53,787 and then maybe we can also increase 137 137 00:07:53,787 --> 00:07:55,381 maybe the font size here, 138 138 00:07:55,381 --> 00:07:57,342 looks a little too small, I think. 139 139 00:07:57,342 --> 00:08:00,779 We had it set to 90% and we can 140 140 00:08:00,779 --> 00:08:02,362 set it back to 100. 141 141 00:08:04,105 --> 00:08:07,938 We just look, how it looks down here, alright. 142 142 00:08:10,678 --> 00:08:13,540 So, reduce the margin here 143 143 00:08:13,540 --> 00:08:18,245 and maybe add some padding between those links as well. 144 144 00:08:18,245 --> 00:08:20,035 So let me actually see 145 145 00:08:20,035 --> 00:08:22,285 how the main nav is styled. 146 146 00:08:25,876 --> 00:08:29,959 Alright, so we have a margin-top of currently 55. 147 147 00:08:36,842 --> 00:08:40,426 But I want it to be, I don't know, 25 for now, 148 148 00:08:40,426 --> 00:08:43,633 and also some margin on the left side, 149 149 00:08:43,633 --> 00:08:45,466 of also 25, let's say. 150 150 00:08:49,043 --> 00:08:50,919 Okay, and now the links, 151 151 00:08:50,919 --> 00:08:53,836 they may have a padding of 5 pixels 152 152 00:08:56,302 --> 00:08:58,385 on top and on the bottom, 153 153 00:08:59,770 --> 00:09:01,658 and then zero left and right. 154 154 00:09:01,658 --> 00:09:03,325 So let's check this. 155 155 00:09:06,229 --> 00:09:07,655 Okay, great. 156 156 00:09:07,655 --> 00:09:10,901 Maybe we can even say 10 pixels, 157 157 00:09:10,901 --> 00:09:11,901 and 25 here, 158 158 00:09:13,296 --> 00:09:15,212 that doesn't look enough. 159 159 00:09:15,212 --> 00:09:16,879 So, on top maybe 35, 160 160 00:09:21,853 --> 00:09:23,211 and here 10. 161 161 00:09:23,211 --> 00:09:24,709 And as I said before, 162 162 00:09:24,709 --> 00:09:27,688 I will increase the font size as well, 163 163 00:09:27,688 --> 00:09:28,771 to 100%. 164 164 00:09:30,249 --> 00:09:32,732 And now this should do the job. 165 165 00:09:32,732 --> 00:09:33,565 Alright. 166 166 00:09:38,770 --> 00:09:41,240 So what we also need to do, of course, 167 167 00:09:41,240 --> 00:09:44,073 is to style the sticky navigation. 168 168 00:09:47,715 --> 00:09:50,147 Let me just copy all of this, 169 169 00:09:50,147 --> 00:09:52,328 and I will then later 170 170 00:09:52,328 --> 00:09:55,388 delete the stuff that I don't want. 171 171 00:09:55,388 --> 00:09:59,364 So you see this is a lot of work to do, 172 172 00:09:59,364 --> 00:10:02,116 and it's quite confused, 173 173 00:10:02,116 --> 00:10:04,949 but well, you still need to do it. 174 174 00:10:07,077 --> 00:10:10,470 Let me set it to 10 pixels here as well, 175 175 00:10:10,470 --> 00:10:14,637 and the color, doesn't really matter here for now. 176 176 00:10:20,506 --> 00:10:22,506 And this also, the same. 177 177 00:10:26,816 --> 00:10:28,983 And we can say this to 10. 178 178 00:10:31,383 --> 00:10:33,837 So let's check this out. 179 179 00:10:33,837 --> 00:10:35,515 Alright, great. 180 180 00:10:35,515 --> 00:10:37,792 Now only one more thing which is 181 181 00:10:37,792 --> 00:10:40,209 to make this icon here black. 182 182 00:10:41,684 --> 00:10:44,994 In the sticky navigation, right? 183 183 00:10:44,994 --> 00:10:48,327 Otherwise we will not be able to see it. 184 184 00:10:49,230 --> 00:10:50,213 So it's simple, 185 185 00:10:50,213 --> 00:10:52,130 sticky mobile nav icon, 186 186 00:10:56,617 --> 00:10:58,450 and then i, and color, 187 187 00:11:01,319 --> 00:11:03,069 555, such as the rest 188 188 00:11:04,657 --> 00:11:05,846 of the webpage. 189 189 00:11:05,846 --> 00:11:09,596 And now this will look exactly as we want it. 190 190 00:11:11,039 --> 00:11:14,480 Actually not, actually we want less space now. 191 191 00:11:14,480 --> 00:11:16,480 Let me check this again. 192 192 00:11:18,396 --> 00:11:21,214 So we have 30 pixels now and, 193 193 00:11:21,214 --> 00:11:23,797 that's way too much, of course. 194 194 00:11:25,219 --> 00:11:26,719 So duplicate this, 195 195 00:11:27,876 --> 00:11:30,043 and margin-top, 10 pixels. 196 196 00:11:37,026 --> 00:11:38,359 Okay now, great. 197 197 00:11:39,487 --> 00:11:41,987 So, now comes the jQuery part. 198 198 00:11:43,716 --> 00:11:47,254 We need to start by hiding this again. 199 199 00:11:47,254 --> 00:11:50,106 Because, of course, when we open the webpage, 200 200 00:11:50,106 --> 00:11:52,189 this will not be visible. 201 201 00:11:53,768 --> 00:11:55,881 And then, when we hit this button here, 202 202 00:11:55,881 --> 00:11:57,798 it will become visible. 203 203 00:11:58,717 --> 00:11:59,967 Okay, so let me 204 204 00:12:02,953 --> 00:12:05,689 take those comments away. 205 205 00:12:05,689 --> 00:12:09,010 Because then the display will be none again, 206 206 00:12:09,010 --> 00:12:10,927 so this will be hidden. 207 207 00:12:12,685 --> 00:12:14,323 And now let's define 208 208 00:12:14,323 --> 00:12:17,823 what happens when we click on that button. 209 209 00:12:21,159 --> 00:12:22,409 Back to jQuery. 210 210 00:12:26,898 --> 00:12:28,398 Mobile navigation. 211 211 00:12:31,575 --> 00:12:34,702 So let's define a class for JavaScript 212 212 00:12:34,702 --> 00:12:36,702 when we hit this button. 213 213 00:12:38,734 --> 00:12:40,371 Such as we always do, 214 214 00:12:40,371 --> 00:12:43,602 and this will be nav icon, very simple, 215 215 00:12:43,602 --> 00:12:45,990 so we just copy this 216 216 00:12:45,990 --> 00:12:48,247 because now we need to select it 217 217 00:12:48,247 --> 00:12:49,830 here in the jQuery. 218 218 00:12:52,437 --> 00:12:53,354 So, and now 219 219 00:12:56,631 --> 00:12:59,746 if you can imagine this, this is click, 220 220 00:12:59,746 --> 00:13:00,829 and function. 221 221 00:13:05,247 --> 00:13:07,771 And now let's use something new, 222 222 00:13:07,771 --> 00:13:09,516 which is called variables. 223 223 00:13:09,516 --> 00:13:13,460 So in programming we have something called variables, 224 224 00:13:13,460 --> 00:13:15,790 where we can store things. 225 225 00:13:15,790 --> 00:13:17,457 And here I will simply create 226 226 00:13:17,457 --> 00:13:19,290 a variable called nav, 227 227 00:13:21,336 --> 00:13:23,919 and what this variable will be, 228 228 00:13:24,962 --> 00:13:28,871 is the result of selecting the navigation. 229 229 00:13:28,871 --> 00:13:31,371 So let me just show it to you. 230 230 00:13:32,812 --> 00:13:33,895 So, main nav. 231 231 00:13:37,341 --> 00:13:39,562 And actually we should create 232 232 00:13:39,562 --> 00:13:41,642 the class for that as well. 233 233 00:13:41,642 --> 00:13:43,392 So here, js main nav. 234 234 00:13:51,609 --> 00:13:54,534 So, and I did this because 235 235 00:13:54,534 --> 00:13:58,069 I will have to use this many times now, 236 236 00:13:58,069 --> 00:14:00,178 and I don't want to repeat 237 237 00:14:00,178 --> 00:14:03,137 this code here all over again, and again, and again. 238 238 00:14:03,137 --> 00:14:05,054 So I define a variable, 239 239 00:14:05,972 --> 00:14:08,288 and then I can use that variable instead of 240 240 00:14:08,288 --> 00:14:10,705 always writing the same code. 241 241 00:14:12,398 --> 00:14:14,847 So now what are we gonna do with this? 242 242 00:14:14,847 --> 00:14:16,597 There's a very simple 243 243 00:14:18,834 --> 00:14:20,051 jQuery method, 244 244 00:14:20,051 --> 00:14:22,992 which is just called slide toggle. 245 245 00:14:22,992 --> 00:14:24,464 And all this does 246 246 00:14:24,464 --> 00:14:26,714 is to open and close a box. 247 247 00:14:27,649 --> 00:14:29,711 And we will see that in a minute. 248 248 00:14:29,711 --> 00:14:32,907 And here, in this method we have to 249 249 00:14:32,907 --> 00:14:36,372 just say how many time the animation shall take. 250 250 00:14:36,372 --> 00:14:39,269 And we will say 0.2 seconds, 251 251 00:14:39,269 --> 00:14:41,436 which is 200 milliseconds. 252 252 00:14:43,201 --> 00:14:44,368 Such as here, 253 253 00:14:44,368 --> 00:14:46,587 where we said we wanted 254 254 00:14:46,587 --> 00:14:50,562 a thousand milliseconds, here we want 200. 255 255 00:14:50,562 --> 00:14:53,070 And this is actually all it takes 256 256 00:14:53,070 --> 00:14:56,153 to create that open and close effect. 257 257 00:14:58,628 --> 00:15:01,720 So we click here and it opens, and it closes, and it opens, 258 258 00:15:01,720 --> 00:15:02,887 and it closes. 259 259 00:15:05,859 --> 00:15:09,764 This creates exactly what we want, right? 260 260 00:15:09,764 --> 00:15:12,909 So now there's only one thing left to do, 261 261 00:15:12,909 --> 00:15:16,580 which is to change the icon of this, 262 262 00:15:16,580 --> 00:15:18,346 each time we click it. 263 263 00:15:18,346 --> 00:15:20,763 So, if this is the menu icon, 264 264 00:15:22,698 --> 00:15:23,900 we want it to be like 265 265 00:15:23,900 --> 00:15:25,453 cross to close it, 266 266 00:15:25,453 --> 00:15:27,080 and when it's a cross, 267 267 00:15:27,080 --> 00:15:29,747 we want it to be the close icon. 268 268 00:15:30,706 --> 00:15:33,146 Really straight forward, right? 269 269 00:15:33,146 --> 00:15:35,979 So first of all let's grab an icon 270 270 00:15:38,315 --> 00:15:41,898 for that, and it will be this one, I think. 271 271 00:15:44,016 --> 00:15:46,933 So make this a little bigger again. 272 272 00:15:48,368 --> 00:15:49,951 So this looks good. 273 273 00:15:53,997 --> 00:15:56,554 So this was the first part of the code, 274 274 00:15:56,554 --> 00:15:59,299 let me just copy this here, I'll use it now. 275 275 00:15:59,299 --> 00:16:02,299 And so, how can we change that icon? 276 276 00:16:03,902 --> 00:16:05,438 It's easier to explain here. 277 277 00:16:05,438 --> 00:16:09,521 So, the icon is essentially defined by the class. 278 278 00:16:10,804 --> 00:16:13,160 So, if we want to change the icon, 279 279 00:16:13,160 --> 00:16:16,335 we can simply change the class. 280 280 00:16:16,335 --> 00:16:19,076 And we already did that before, 281 281 00:16:19,076 --> 00:16:22,740 with the add class and the remove class. 282 282 00:16:22,740 --> 00:16:25,323 So we will now do exactly that. 283 283 00:16:27,053 --> 00:16:29,530 And I will in fact create a new variable here 284 284 00:16:29,530 --> 00:16:30,530 called icon. 285 285 00:16:33,753 --> 00:16:38,675 So that I don't have to repeat that code later again. 286 286 00:16:38,675 --> 00:16:41,092 And this is now js nav icon i 287 287 00:16:43,764 --> 00:16:45,764 because that is in fact, 288 288 00:16:48,269 --> 00:16:51,895 the class or the element which has 289 289 00:16:51,895 --> 00:16:54,110 the class with the icon. 290 290 00:16:54,110 --> 00:16:57,661 So now I can make a simple if again, 291 291 00:16:57,661 --> 00:16:59,911 which is to take decisions. 292 292 00:17:00,929 --> 00:17:02,346 So I say, if icon 293 293 00:17:05,167 --> 00:17:09,885 has class, so this is something new we didn't see before. 294 294 00:17:09,885 --> 00:17:11,135 And I will say, 295 295 00:17:17,072 --> 00:17:20,822 ion nav icon round so this is the class name. 296 296 00:17:25,352 --> 00:17:27,799 Well then do something, 297 297 00:17:27,799 --> 00:17:28,716 and if not, 298 298 00:17:29,661 --> 00:17:31,578 then do something else. 299 299 00:17:34,072 --> 00:17:36,155 So again, so if the icon, 300 300 00:17:37,347 --> 00:17:40,707 which means if the element we select here 301 301 00:17:40,707 --> 00:17:43,457 has the class ion nav icon round, 302 302 00:17:44,507 --> 00:17:46,257 then we want the icon 303 303 00:17:48,981 --> 00:17:50,814 to have another class. 304 304 00:17:51,814 --> 00:17:53,314 Which is this one. 305 305 00:17:57,898 --> 00:17:59,401 So we want to add this one 306 306 00:17:59,401 --> 00:18:02,234 and we want to remove the old one. 307 307 00:18:03,682 --> 00:18:05,015 So remove class, 308 308 00:18:07,358 --> 00:18:08,858 and then this one. 309 309 00:18:10,228 --> 00:18:13,478 So this will simply exchange the icons. 310 310 00:18:15,155 --> 00:18:18,105 So when it is the navigation icon, 311 311 00:18:18,105 --> 00:18:19,838 take that navigation icon away 312 312 00:18:19,838 --> 00:18:22,804 and put the close icon instead. 313 313 00:18:22,804 --> 00:18:25,138 And if it's the other way around, 314 314 00:18:25,138 --> 00:18:26,055 then, well, 315 315 00:18:28,208 --> 00:18:29,958 then add the nav icon 316 316 00:18:31,197 --> 00:18:32,947 and remove the close. 317 317 00:18:36,990 --> 00:18:40,240 And now we have all situations covered. 318 318 00:18:42,857 --> 00:18:45,445 So this should work now. 319 319 00:18:45,445 --> 00:18:49,297 I just need to correct this one here. 320 320 00:18:49,297 --> 00:18:52,047 And now we should be ready to go. 321 321 00:18:54,185 --> 00:18:55,339 And here we go. 322 322 00:18:55,339 --> 00:18:58,006 This works exactly as we wanted. 323 323 00:18:59,665 --> 00:19:01,915 And up here as well, great. 324 324 00:19:02,893 --> 00:19:03,726 Very good. 325 325 00:19:04,817 --> 00:19:08,725 So we have all kinds of effects now here on our webpage, 326 326 00:19:08,725 --> 00:19:11,308 even if the responsive version, 327 327 00:19:12,564 --> 00:19:14,397 it all works the same. 328 328 00:19:15,848 --> 00:19:17,462 Fantastic. 329 329 00:19:17,462 --> 00:19:21,379 So, this is all I had to show you about jQuery. 330 330 00:19:22,659 --> 00:19:25,397 jQuery has endless possibilities, 331 331 00:19:25,397 --> 00:19:28,371 and there is still so much to learn. 332 332 00:19:28,371 --> 00:19:30,511 And there are in fact entire books 333 333 00:19:30,511 --> 00:19:34,109 and online courses devoted to teach you jQuery. 334 334 00:19:34,109 --> 00:19:38,128 So you see, this is a really huge topic, 335 335 00:19:38,128 --> 00:19:41,290 but I think you know some of the basics now. 336 336 00:19:41,290 --> 00:19:43,731 And that actually enables you to write some simple code 337 337 00:19:43,731 --> 00:19:46,262 on your own, or to include 338 338 00:19:46,262 --> 00:19:48,543 one of the many, many jQuery plugins 339 339 00:19:48,543 --> 00:19:50,597 into your project. 340 340 00:19:50,597 --> 00:19:53,514 And that is already quite powerful. 341 341 00:19:54,581 --> 00:19:56,977 Now as before, you can find a link, 342 342 00:19:56,977 --> 00:19:58,609 where you can download the entire project 343 343 00:19:58,609 --> 00:20:00,173 we've built so far, 344 344 00:20:00,173 --> 00:20:03,650 in the description of this video. 345 345 00:20:03,650 --> 00:20:05,636 Now in the next couple of lectures, 346 346 00:20:05,636 --> 00:20:07,298 we'll optimize this webpage, 347 347 00:20:07,298 --> 00:20:09,965 and then learn how to launch it. 27293