1 00:00:00,884 --> 00:00:03,740 line:15% Hi. In this lecture we'll start to get our 2 00:00:03,740 --> 00:00:06,434 line:15% hands dirty with jQuery. 3 00:00:06,434 --> 00:00:07,267 line:15% We're going to build 4 00:00:07,267 --> 00:00:10,985 line:15% a very simple so called sticky navigation. 5 00:00:10,985 --> 00:00:15,152 line:15% And this is great to show you the very basics of jQuery. 6 00:00:16,650 --> 00:00:21,380 So I will start off by showing you what we want to achieve. 7 00:00:21,380 --> 00:00:25,745 So here in the normal state we want the navigation to show 8 00:00:25,745 --> 00:00:28,544 in a normal way so here in the header. 9 00:00:28,544 --> 00:00:33,347 But then as we go down here we don't want this to happen. 10 00:00:33,347 --> 00:00:36,598 So we want our navigation to show up here. 11 00:00:36,598 --> 00:00:39,291 With this little effect. 12 00:00:39,291 --> 00:00:42,356 So that we can see the navigation always 13 00:00:42,356 --> 00:00:44,609 and not just when we're in the header. 14 00:00:44,609 --> 00:00:47,395 And then as we go back to the header, 15 00:00:47,395 --> 00:00:50,437 then the navigation disappears. 16 00:00:50,437 --> 00:00:52,829 So I'll show you again. 17 00:00:52,829 --> 00:00:56,996 So navigation comes in once we get passed the header. 18 00:00:59,330 --> 00:01:03,603 So we will use jQuery to add a class to the north element 19 00:01:03,603 --> 00:01:06,134 every time we leave the header. 20 00:01:06,134 --> 00:01:07,967 So at this point here. 21 00:01:09,663 --> 00:01:12,774 So the first thing we need to do in order to do that 22 00:01:12,774 --> 00:01:16,941 is to actually format this navigation in the sticky state. 23 00:01:19,206 --> 00:01:20,289 Let's say so. 24 00:01:21,319 --> 00:01:24,069 So this is the sticky navigation. 25 00:01:25,197 --> 00:01:27,612 So, here is the north element 26 00:01:27,612 --> 00:01:29,622 and this is where we will use jQuery 27 00:01:29,622 --> 00:01:31,622 to add the sticky class. 28 00:01:32,776 --> 00:01:36,943 So lets go to our CSS file and start by defining that class. 29 00:01:38,698 --> 00:01:42,281 So where's the navigation, okay here it is. 30 00:01:43,519 --> 00:01:46,269 Let me just leave some comment here. 31 00:01:46,269 --> 00:01:50,403 So in fact your going to learn some more CSS here. 32 00:01:50,403 --> 00:01:53,096 Maybe more CSS than jQuery, 33 00:01:53,096 --> 00:01:57,263 but you know we always use a mixture of both languages. 34 00:01:58,878 --> 00:02:00,961 So this is the main navi. 35 00:02:02,291 --> 00:02:06,041 And down here we will now do the sticky navi. 36 00:02:12,415 --> 00:02:14,332 So just a simple class. 37 00:02:15,596 --> 00:02:20,054 In fact I will now just for testing purposes 38 00:02:20,054 --> 00:02:23,221 add this class here so that we can see 39 00:02:25,227 --> 00:02:27,560 what we're styling actually. 40 00:02:29,064 --> 00:02:33,231 And the first thing we need to do is define this position. 41 00:02:34,335 --> 00:02:37,864 So far we've had absolute and relative positioning, right? 42 00:02:37,864 --> 00:02:41,626 And now you get to learn a new one which is fixed. 43 00:02:41,626 --> 00:02:44,877 And with this property the navigation stays always 44 00:02:44,877 --> 00:02:48,877 at the same point irrespective of our scrolling. 45 00:02:51,657 --> 00:02:54,740 And we want this to start at the top, 46 00:02:56,589 --> 00:02:58,049 and on the left corner. 47 00:02:58,049 --> 00:02:59,182 So the top left corner. 48 00:02:59,182 --> 00:03:02,976 So we have to define top zero, and left zero. 49 00:03:02,976 --> 00:03:06,877 And we want it to be 100 percent wide. 50 00:03:06,877 --> 00:03:10,894 So as you saw in that image I showed you before. 51 00:03:10,894 --> 00:03:14,795 We want it to occupy the whole browser width. 52 00:03:14,795 --> 00:03:17,070 And we want it to be wide. 53 00:03:17,070 --> 00:03:18,903 So background color... 54 00:03:22,341 --> 00:03:23,174 color... 55 00:03:24,335 --> 00:03:25,168 white, 56 00:03:26,054 --> 00:03:28,956 but with a little transparency. 57 00:03:28,956 --> 00:03:32,764 So that we can see the content beneath it. 58 00:03:32,764 --> 00:03:34,431 I'll start with 098. 59 00:03:35,829 --> 00:03:37,996 This is almost no opacity. 60 00:03:39,484 --> 00:03:41,597 Now let's have a look at this. 61 00:03:41,597 --> 00:03:44,764 Have to open our live connection here. 62 00:03:48,948 --> 00:03:51,488 Alright, this is how it looks like so far. 63 00:03:51,488 --> 00:03:55,528 And we can barely see these links here, 64 00:03:55,528 --> 00:03:56,596 but they are there. 65 00:03:56,596 --> 00:03:59,535 But of course with the white color we defined before. 66 00:03:59,535 --> 00:04:02,948 And the logo is here, so everything is here. 67 00:04:02,948 --> 00:04:06,106 But now we need to style this. 68 00:04:06,106 --> 00:04:09,523 But in fact it's already a sticky, right? 69 00:04:11,029 --> 00:04:13,639 So let's change a couple of things here. 70 00:04:13,639 --> 00:04:17,806 And I will start off by changing those things here. 71 00:04:20,118 --> 00:04:21,668 So the first thing is we want to change 72 00:04:21,668 --> 00:04:23,763 some of these things. 73 00:04:23,763 --> 00:04:27,930 So I will copy everything then delete things I don't want. 74 00:04:30,095 --> 00:04:32,095 And now I have to say... 75 00:04:33,903 --> 00:04:37,061 sticky and here the same thing. 76 00:04:37,061 --> 00:04:40,478 Because I want these styles to apply only 77 00:04:44,561 --> 00:04:48,648 if this class is inside of the sticky class. 78 00:04:48,648 --> 00:04:51,550 Right, so this is then the sticky class. 79 00:04:51,550 --> 00:04:55,717 And then we have the main nav inside of the sticky class. 80 00:04:59,283 --> 00:05:01,605 Alright, so the first thing we should 81 00:05:01,605 --> 00:05:04,188 definitely change is the color. 82 00:05:06,388 --> 00:05:10,555 Lets set it to 555 , such as the rest of the webpage. 83 00:05:12,077 --> 00:05:14,577 And we don't need any of this. 84 00:05:16,651 --> 00:05:18,486 And depending I will leave this for now. 85 00:05:18,486 --> 00:05:21,236 We can take a look at that later. 86 00:05:23,756 --> 00:05:27,756 Alright, so it is now at least it's visible now. 87 00:05:30,026 --> 00:05:33,197 And now we have a problem here with the image, the logo. 88 00:05:33,197 --> 00:05:34,973 Because it is the white logo, 89 00:05:34,973 --> 00:05:37,481 and we want the black logo here. 90 00:05:37,481 --> 00:05:40,244 So what can we do about that? 91 00:05:40,244 --> 00:05:45,051 The simplest way would be to go back to the HTML file 92 00:05:45,051 --> 00:05:49,218 and include the black logo in the exact same place. 93 00:05:50,275 --> 00:05:52,099 And I will duplicate this line. 94 00:05:52,099 --> 00:05:55,025 And I will explain you what I am doing here in a second. 95 00:05:55,025 --> 00:05:56,692 So now I want this.. 96 00:05:59,458 --> 00:06:01,541 class to call logo black. 97 00:06:04,754 --> 00:06:08,148 And this one will be the black logo. 98 00:06:08,148 --> 00:06:10,648 Let me see how this is called, 99 00:06:12,438 --> 00:06:14,188 so this is just logo. 100 00:06:15,108 --> 00:06:18,441 Alright, so remember this is logo black. 101 00:06:22,213 --> 00:06:24,380 I need now to format that. 102 00:06:27,786 --> 00:06:30,712 Easiest way is to make control F or command F, 103 00:06:30,712 --> 00:06:33,379 and then search for logo simply. 104 00:06:35,634 --> 00:06:39,801 And let me style logo black in the exact same way. 105 00:06:43,436 --> 00:06:45,573 But with one difference. 106 00:06:45,573 --> 00:06:48,156 I want logo black to be hidden. 107 00:06:51,006 --> 00:06:53,173 And so I say display none. 108 00:06:57,531 --> 00:07:00,948 So this image will then be not displayed. 109 00:07:01,791 --> 00:07:05,124 So I Incorporated, but it is not visible 110 00:07:07,652 --> 00:07:09,319 in the normal state. 111 00:07:11,832 --> 00:07:15,999 And what I am going to do now, is to go back to our 112 00:07:18,496 --> 00:07:22,663 navigation and define that if the logo black is inside 113 00:07:27,436 --> 00:07:31,603 of the sticky navigation then it shall display as a block. 114 00:07:34,750 --> 00:07:36,569 So it will no longer be hidden. 115 00:07:36,569 --> 00:07:38,148 Let's see if it works. 116 00:07:38,148 --> 00:07:39,378 Okay here it is, 117 00:07:39,378 --> 00:07:43,545 and all we have to do is to hide the white logo, right? 118 00:07:46,391 --> 00:07:50,558 So again now if the logo is inside of the sticky navigation 119 00:07:54,053 --> 00:07:58,349 then this one will be hidden by saying display none. 120 00:07:58,349 --> 00:07:59,849 Pretty easy right? 121 00:08:01,934 --> 00:08:04,267 So let's see how this works, 122 00:08:06,323 --> 00:08:07,716 and yeah great. 123 00:08:07,716 --> 00:08:09,204 So what can be change now? 124 00:08:09,204 --> 00:08:12,117 Now we want to reduce this space here. 125 00:08:12,117 --> 00:08:15,693 Between all of this and make the image smaller 126 00:08:15,693 --> 00:08:17,943 so that we can reduce this. 127 00:08:21,405 --> 00:08:24,748 So let me see the original version, 128 00:08:24,748 --> 00:08:26,165 and okay here we have it. 129 00:08:26,165 --> 00:08:30,332 So the margin top is 55 pixels, which is way too much. 130 00:08:31,575 --> 00:08:34,242 So I'm going to copy this again, 131 00:08:35,778 --> 00:08:38,945 and just change what I want to change. 132 00:08:40,724 --> 00:08:44,474 And I will say maybe 15 pixels to start with. 133 00:08:53,286 --> 00:08:55,036 Okay much better now. 134 00:08:57,233 --> 00:08:58,626 Yeah this is much better. 135 00:08:58,626 --> 00:09:02,709 Now I also want to decrease this logo here right. 136 00:09:06,614 --> 00:09:08,584 Again I'm gonna search for it. 137 00:09:08,584 --> 00:09:09,501 Logo black. 138 00:09:14,621 --> 00:09:17,802 Actually we shouldn't put this here 139 00:09:17,802 --> 00:09:21,135 because those styles are very different. 140 00:09:23,445 --> 00:09:25,945 So let me define it like this. 141 00:09:33,777 --> 00:09:37,111 And here I will say 50 pixels should be enough. 142 00:09:37,111 --> 00:09:40,778 And here I want just five pixels to the top. 143 00:09:42,149 --> 00:09:46,213 So let me take a look at this, and here we go. 144 00:09:46,213 --> 00:09:48,326 So much smaller now, 145 00:09:48,326 --> 00:09:52,493 and now we maybe need some margin to the bottom as well. 146 00:09:53,365 --> 00:09:55,501 And then what we want to change here 147 00:09:55,501 --> 00:09:59,668 is to make this little line here to be all the way down here 148 00:10:00,901 --> 00:10:02,977 to the white border. 149 00:10:02,977 --> 00:10:06,144 To the border of this white container. 150 00:10:07,017 --> 00:10:11,684 And then I also want some shadow here so that we can 151 00:10:11,684 --> 00:10:14,540 differentiate between this section 152 00:10:14,540 --> 00:10:16,873 and the rest of the website. 153 00:10:19,254 --> 00:10:21,529 Okay now, three things to do. 154 00:10:21,529 --> 00:10:22,992 So here I want the margin top 155 00:10:22,992 --> 00:10:25,291 and the margin bottom to be five. 156 00:10:25,291 --> 00:10:28,708 So I just say margin, and five, and zero. 157 00:10:29,656 --> 00:10:31,689 So as you remember this means five at the top 158 00:10:31,689 --> 00:10:34,058 and five at the bottom. 159 00:10:34,058 --> 00:10:37,475 Now let's go back to the navigation here. 160 00:10:40,350 --> 00:10:44,809 Alright, and in order to increase the spacing between 161 00:10:44,809 --> 00:10:49,581 that orange line and the text of the navigation links, 162 00:10:49,581 --> 00:10:52,298 is to increase this painting. 163 00:10:52,298 --> 00:10:55,048 Start by setting it to 15 pixels. 164 00:10:56,988 --> 00:11:01,155 And now as I said I want some shadow here on this container. 165 00:11:02,213 --> 00:11:06,296 So let's say box shadow and we already used that. 166 00:11:07,414 --> 00:11:09,664 So it's zero on the X axis, 167 00:11:12,675 --> 00:11:15,182 so in the horizontal. 168 00:11:15,182 --> 00:11:17,876 Then two pixels in the Y axis, 169 00:11:17,876 --> 00:11:19,459 so in the vertical. 170 00:11:20,500 --> 00:11:22,961 And I want two pixels blur. 171 00:11:22,961 --> 00:11:24,889 And now the color again. 172 00:11:24,889 --> 00:11:28,255 Let's say we want a very subtle gray here. 173 00:11:28,255 --> 00:11:30,693 So let's start with white here again, 174 00:11:30,693 --> 00:11:34,860 and then use the color picker to choose something else. 175 00:11:37,056 --> 00:11:38,556 This for instance. 176 00:11:41,235 --> 00:11:44,579 Alright, so this looks good here. 177 00:11:44,579 --> 00:11:45,412 The image. 178 00:11:46,553 --> 00:11:49,571 Now we need some more margin between this and the top 179 00:11:49,571 --> 00:11:51,777 in order to make it centered. 180 00:11:51,777 --> 00:11:52,610 Right? 181 00:11:55,167 --> 00:11:57,048 So how do we do that? 182 00:11:57,048 --> 00:12:00,368 We need some more margin here, let's say 18. 183 00:12:00,368 --> 00:12:05,184 And then we can increase the painting here to, let's say 16. 184 00:12:05,184 --> 00:12:08,851 Now it's just you know testing how it works. 185 00:12:11,375 --> 00:12:14,125 Get rid of those blue boxes here. 186 00:12:15,345 --> 00:12:19,512 Alright, I think that we already have here what we want. 187 00:12:21,545 --> 00:12:23,545 And this is cool, right? 188 00:12:24,424 --> 00:12:27,025 So we have styled this whole thing, 189 00:12:27,025 --> 00:12:29,115 and now we can use J Query 190 00:12:29,115 --> 00:12:33,039 to have that effect that I described before. 191 00:12:33,039 --> 00:12:35,663 And I will actually leave that for the next lecture, 192 00:12:35,663 --> 00:12:37,845 so that you can take a break if you want. 193 00:12:37,845 --> 00:12:41,909 And review the code that we written so far. 194 00:12:41,909 --> 00:12:45,044 So you can do that or you can just come with me, 195 00:12:45,044 --> 00:12:47,627 and start to write some jQuery.