Original subtitles

1 1

Hi. In this lecture we'll start to get our 2

2

hands dirty with jQuery. 3

3

We're going to build 4

4

a very simple so called sticky navigation. 5

5

And this is great to show you the very basics of jQuery. 6

6

So I will start off by showing you what we want to achieve. 7

7

So here in the normal state we want the navigation to show 8

8

in a normal way so here in the header. 9

9

But then as we go down here we don't want this to happen. 10

10

So we want our navigation to show up here. 11

11

With this little effect. 12

12

So that we can see the navigation always 13

13

and not just when we're in the header. 14

14

And then as we go back to the header, 15

15

then the navigation disappears. 16

16

So I'll show you again. 17

17

So navigation comes in once we get passed the header. 18

18

So we will use jQuery to add a class to the north element 19

19

every time we leave the header. 20

20

So at this point here. 21

21

So the first thing we need to do in order to do that 22

22

is to actually format this navigation in the sticky state. 23

23

Let's say so. 24

24

So this is the sticky navigation. 25

25

So, here is the north element 26

26

and this is where we will use jQuery 27

27

to add the sticky class. 28

28

So lets go to our CSS file and start by defining that class. 29

29

So where's the navigation, okay here it is. 30

30

Let me just leave some comment here. 31

31

So in fact your going to learn some more CSS here. 32

32

Maybe more CSS than jQuery, 33

33

but you know we always use a mixture of both languages. 34

34

So this is the main navi. 35

35

And down here we will now do the sticky navi. 36

36

So just a simple class. 37

37

In fact I will now just for testing purposes 38

38

add this class here so that we can see 39

39

what we're styling actually. 40

40

And the first thing we need to do is define this position. 41

41

So far we've had absolute and relative positioning, right? 42

42

And now you get to learn a new one which is fixed. 43

43

And with this property the navigation stays always 44

44

at the same point irrespective of our scrolling. 45

45

And we want this to start at the top, 46

46

and on the left corner. 47

47

So the top left corner. 48

48

So we have to define top zero, and left zero. 49

49

And we want it to be 100 percent wide. 50

50

So as you saw in that image I showed you before. 51

51

We want it to occupy the whole browser width. 52

52

And we want it to be wide. 53

53

So background color... 54

54

color... 55

55

white, 56

56

but with a little transparency. 57

57

So that we can see the content beneath it. 58

58

I'll start with 098. 59

59

This is almost no opacity. 60

60

Now let's have a look at this. 61

61

Have to open our live connection here. 62

62

Alright, this is how it looks like so far. 63

63

And we can barely see these links here, 64

64

but they are there. 65

65

But of course with the white color we defined before. 66

66

And the logo is here, so everything is here. 67

67

But now we need to style this. 68

68

But in fact it's already a sticky, right? 69

69

So let's change a couple of things here. 70

70

And I will start off by changing those things here. 71

71

So the first thing is we want to change 72

72

some of these things. 73

73

So I will copy everything then delete things I don't want. 74

74

And now I have to say... 75

75

sticky and here the same thing. 76

76

Because I want these styles to apply only 77

77

if this class is inside of the sticky class. 78

78

Right, so this is then the sticky class. 79

79

And then we have the main nav inside of the sticky class. 80

80

Alright, so the first thing we should 81

81

definitely change is the color. 82

82

Lets set it to 555 , such as the rest of the webpage. 83

83

And we don't need any of this. 84

84

And depending I will leave this for now. 85

85

We can take a look at that later. 86

86

Alright, so it is now at least it's visible now. 87

87

And now we have a problem here with the image, the logo. 88

88

Because it is the white logo, 89

89

and we want the black logo here. 90

90

So what can we do about that? 91

91

The simplest way would be to go back to the HTML file 92

92

and include the black logo in the exact same place. 93

93

And I will duplicate this line. 94

94

And I will explain you what I am doing here in a second. 95

95

So now I want this.. 96

96

class to call logo black. 97

97

And this one will be the black logo. 98

98

Let me see how this is called, 99

99

so this is just logo. 100

100

Alright, so remember this is logo black. 101

101

I need now to format that. 102

102

Easiest way is to make control F or command F, 103

103

and then search for logo simply. 104

104

And let me style logo black in the exact same way. 105

105

But with one difference. 106

106

I want logo black to be hidden. 107

107

And so I say display none. 108

108

So this image will then be not displayed. 109

109

So I Incorporated, but it is not visible 110

110

in the normal state. 111

111

And what I am going to do now, is to go back to our 112

112

navigation and define that if the logo black is inside 113

113

of the sticky navigation then it shall display as a block. 114

114

So it will no longer be hidden. 115

115

Let's see if it works. 116

116

Okay here it is, 117

117

and all we have to do is to hide the white logo, right? 118

118

So again now if the logo is inside of the sticky navigation 119

119

then this one will be hidden by saying display none. 120

120

Pretty easy right? 121

121

So let's see how this works, 122

122

and yeah great. 123

123

So what can be change now? 124

124

Now we want to reduce this space here. 125

125

Between all of this and make the image smaller 126

126

so that we can reduce this. 127

127

So let me see the original version, 128

128

and okay here we have it. 129

129

So the margin top is 55 pixels, which is way too much. 130

130

So I'm going to copy this again, 131

131

and just change what I want to change. 132

132

And I will say maybe 15 pixels to start with. 133

133

Okay much better now. 134

134

Yeah this is much better. 135

135

Now I also want to decrease this logo here right. 136

136

Again I'm gonna search for it. 137

137

Logo black. 138

138

Actually we shouldn't put this here 139

139

because those styles are very different. 140

140

So let me define it like this. 141

141

And here I will say 50 pixels should be enough. 142

142

And here I want just five pixels to the top. 143

143

So let me take a look at this, and here we go. 144

144

So much smaller now, 145

145

and now we maybe need some margin to the bottom as well. 146

146

And then what we want to change here 147

147

is to make this little line here to be all the way down here 148

148

to the white border. 149

149

To the border of this white container. 150

150

And then I also want some shadow here so that we can 151

151

differentiate between this section 152

152

and the rest of the website. 153

153

Okay now, three things to do. 154

154

So here I want the margin top 155

155

and the margin bottom to be five. 156

156

So I just say margin, and five, and zero. 157

157

So as you remember this means five at the top 158

158

and five at the bottom. 159

159

Now let's go back to the navigation here. 160

160

Alright, and in order to increase the spacing between 161

161

that orange line and the text of the navigation links, 162

162

is to increase this painting. 163

163

Start by setting it to 15 pixels. 164

164

And now as I said I want some shadow here on this container. 165

165

So let's say box shadow and we already used that. 166

166

So it's zero on the X axis, 167

167

so in the horizontal. 168

168

Then two pixels in the Y axis, 169

169

so in the vertical. 170

170

And I want two pixels blur. 171

171

And now the color again. 172

172

Let's say we want a very subtle gray here. 173

173

So let's start with white here again, 174

174

and then use the color picker to choose something else. 175

175

This for instance. 176

176

Alright, so this looks good here. 177

177

The image. 178

178

Now we need some more margin between this and the top 179

179

in order to make it centered. 180

180

Right? 181

181

So how do we do that? 182

182

We need some more margin here, let's say 18. 183

183

And then we can increase the painting here to, let's say 16. 184

184

Now it's just you know testing how it works. 185

185

Get rid of those blue boxes here. 186

186

Alright, I think that we already have here what we want. 187

187

And this is cool, right? 188

188

So we have styled this whole thing, 189

189

and now we can use J Query 190

190

to have that effect that I described before. 191

191

And I will actually leave that for the next lecture, 192

192

so that you can take a break if you want. 193

193

And review the code that we written so far. 194

194

So you can do that or you can just come with me, 195

195

and start to write some jQuery.