1
00:00:01,240 --> 00:00:09,830
Come back in this studio you would be adding some more JELAS glib in get given section in the studio.

2
00:00:09,840 --> 00:00:17,480
I will be adding some Della's script to make the menu item active on click event.

3
00:00:17,520 --> 00:00:25,080
For example if I click on screen it brings the user to the screen fiction but the screen menu item is

4
00:00:25,080 --> 00:00:29,490
not active there just make it active on the use of click event

5
00:00:38,330 --> 00:00:41,220
active menu icon on click

6
00:00:48,960 --> 00:00:52,410
document Cardellini function

7
00:00:58,150 --> 00:01:01,460
inside that ad.

8
00:01:02,030 --> 00:01:03,470
Use strict.

9
00:01:03,480 --> 00:01:03,940
Mark

10
00:01:06,870 --> 00:01:09,370
and I need to access

11
00:01:13,910 --> 00:01:18,730
the menu item like not bar.

12
00:01:18,780 --> 00:01:23,170
No and say deaded is a list item.

13
00:01:23,540 --> 00:01:27,850
And inside that there is the anchor desk when this anchor tag is clicked.

14
00:01:28,220 --> 00:01:32,900
It should add and active close to the list item.

15
00:01:32,900 --> 00:01:42,440
And if you remember I do the active glossy assess in the styled archdiocese and this is this will be

16
00:01:42,440 --> 00:01:51,230
applied when the user click on any item.

17
00:01:51,370 --> 00:02:07,400
So I need to access nav bar and say that I have a list item and then ANCHOR Thank You can for me nav

18
00:02:07,440 --> 00:02:09,780
bar can copy it from here.

19
00:02:09,780 --> 00:02:11,020
And then is just here.

20
00:02:11,040 --> 00:02:20,320
So I don't make any mistake not it will access the parent element.

21
00:02:20,760 --> 00:02:25,020
But I think I forget to add the On Click event

22
00:02:37,740 --> 00:02:39,260
on click event

23
00:02:46,820 --> 00:02:56,230
when the user click on the anchor desk which is inside the list I don't open that bar Dashon I have.

24
00:02:56,390 --> 00:03:04,800
I would also use strict more inside this and I need to add

25
00:03:07,860 --> 00:03:15,510
and remove some sucess from the parent element the parent element of anchor tag list elements.

26
00:03:15,720 --> 00:03:27,600
So here we are targeting the list element that an element remove glass and the active has already edged

27
00:03:27,600 --> 00:03:33,680
with the anchor element with the list element with anchor element vetted variant element which is list

28
00:03:33,690 --> 00:03:34,450
item.

29
00:03:34,460 --> 00:03:37,110
You should remove the active Bloss

30
00:03:40,010 --> 00:03:47,660
this line of code or remove the ective clause from any list item which is the parent of anchor element

31
00:03:47,720 --> 00:03:49,080
inside the car.

32
00:03:49,460 --> 00:03:56,030
And it will apply the active clause to the current.

33
00:03:56,100 --> 00:03:59,330
This this dark Beland

34
00:04:04,600 --> 00:04:06,810
dark and glass

35
00:04:11,660 --> 00:04:12,730
red class are

36
00:04:17,890 --> 00:04:24,300
going to show the results of this telescope in the Groser.

37
00:04:24,500 --> 00:04:35,300
To crush it and you know you'll see Oakey and they click on the feature section.

38
00:04:35,360 --> 00:04:39,320
Now you can see the feature the menu item is active.

39
00:04:39,890 --> 00:04:46,630
And if you click on the context menu item you can see the context menu item is active.

40
00:04:50,170 --> 00:04:56,610
You can see the list item the parent element of anchor take is getting the active class

41
00:05:10,220 --> 00:05:13,460
and this is the assist you played in the style narcissist's

42
00:05:19,060 --> 00:05:25,350
So all you can see if you click on any menu item you get the menu item said active

43
00:05:28,610 --> 00:05:33,820
OK let us add some more Javascript on the scroll.

44
00:05:33,900 --> 00:05:36,510
If you see the menu item is not active.

45
00:05:36,760 --> 00:05:43,800
If we want to make the menu item active on the school for example if we use it is on a feature section

46
00:05:44,310 --> 00:05:46,660
the menu item features should be active.

47
00:05:46,720 --> 00:05:48,170
And just good for this

48
00:06:03,140 --> 00:06:14,380
I load menu item on scrolling and document dog reading question

49
00:06:25,310 --> 00:06:30,700
and inside did I ever use trick more.

50
00:06:32,900 --> 00:06:36,470
And on the window

51
00:06:39,220 --> 00:06:42,980
object and Ohlins scroll.

52
00:06:44,170 --> 00:06:45,350
I mean I had a function

53
00:06:52,880 --> 00:07:03,970
and inside dead again I would use trick more and do Dalgard that each section

54
00:07:06,630 --> 00:07:20,030
like this about section the features testimonial properties no section all of the six section and it

55
00:07:20,110 --> 00:07:22,460
can look to each section

56
00:07:44,320 --> 00:07:50,910
and say that I access the id attribute of each section.

57
00:07:51,060 --> 00:07:52,020
For example

58
00:07:55,380 --> 00:08:02,280
this dark attributes and Alexis id attribute

59
00:08:05,020 --> 00:08:07,740
leg ID intruder's about

60
00:08:10,000 --> 00:08:11,720
screens features.

61
00:08:11,860 --> 00:08:21,400
Download and contact so it can be return likes some think about the.

62
00:08:21,560 --> 00:08:26,050
Don't load it.

63
00:08:33,370 --> 00:08:43,550
They just also get to alter the height of current element.

64
00:08:43,550 --> 00:08:53,900
This is the older height the outer returns the height including the padding and border.

65
00:08:54,230 --> 00:08:59,450
You can see this is the older height function

66
00:09:03,830 --> 00:09:09,730
if lower than the outer height of current section which include bedding and water

67
00:09:13,020 --> 00:09:21,460
that is added one another with even greater top and this would be

68
00:09:24,280 --> 00:09:25,120
offset

69
00:09:28,170 --> 00:09:29,770
and Vitt top position

70
00:09:35,710 --> 00:09:42,880
this offshoot will return the retrieve it will retube the current position and then we'll get the position

71
00:09:43,360 --> 00:09:44,140
of the client.

72
00:09:44,140 --> 00:09:51,650
Each section there just subtract some pixels like 50 pixels.

73
00:09:52,520 --> 00:10:00,390
This will allow to retrieve the conclusion using the offset functions and then you'll get the top position.

74
00:10:00,410 --> 00:10:02,980
It's a subtraction of 70 pixels.

75
00:10:03,500 --> 00:10:04,640
Now if

76
00:10:09,420 --> 00:10:13,820
window dog scroll

77
00:10:16,520 --> 00:10:23,930
clock is greater than the top

78
00:10:29,380 --> 00:10:29,830
and

79
00:10:34,340 --> 00:10:36,190
window dart

80
00:10:38,930 --> 00:10:39,390
score

81
00:10:44,380 --> 00:10:52,210
is less than greater top plus height

82
00:10:57,780 --> 00:11:08,070
it should add some C Ss this group of function will return the vertical scroll bar position of the window.

83
00:11:08,080 --> 00:11:15,430
If this is greater than the great top which is the offset which is the current position of the each

84
00:11:15,430 --> 00:11:21,630
section with subtraction of minus 70 which is if it is greater than and if the wounded are scored top

85
00:11:21,760 --> 00:11:25,350
is less then with greater topless height.

86
00:11:30,890 --> 00:11:34,160
Exists the current section like

87
00:11:36,860 --> 00:11:37,480
dot net

88
00:11:41,610 --> 00:11:50,430
net and say that is a list item and this is the anchor that can say list Hatim and you need to filter

89
00:11:50,440 --> 00:11:54,800
the anchor tag like him it should have

90
00:12:00,320 --> 00:12:07,520
and I need to add the B-B variable less

91
00:12:12,530 --> 00:12:13,420
closing backwards

92
00:12:17,500 --> 00:12:18,310
does not.

93
00:12:18,340 --> 00:12:18,980
It is.

94
00:12:19,970 --> 00:12:23,660
Plus.

95
00:12:30,200 --> 00:12:35,640
Anchorages should be this and this.

96
00:12:35,640 --> 00:12:40,140
So let me explain it or what it will return.

97
00:12:40,440 --> 00:12:52,020
It will look like what example if if place this is true if it is on a boat section it will look like

98
00:12:52,020 --> 00:12:53,280
this ball

99
00:13:00,640 --> 00:13:02,860
so it will access the current section.

100
00:13:02,860 --> 00:13:04,780
If they use it it's got a boat.

101
00:13:05,260 --> 00:13:07,470
They leave you a place to get the boat.

102
00:13:07,570 --> 00:13:12,520
And if they use it on them don't load on the content section including place with the contact or don't

103
00:13:12,520 --> 00:13:14,840
load sections.

104
00:13:16,510 --> 00:13:21,850
So a little sexist the parent element of Krant section PELLANT function

105
00:13:27,540 --> 00:13:31,930
docked at Glaus and gloves and gloss off active

106
00:13:35,620 --> 00:13:46,180
and in else we need to remove these statements because false bends.

107
00:13:47,710 --> 00:13:51,860
We need to remove the if clause.

108
00:13:52,200 --> 00:14:02,130
The move allows let me see it and let us see that isn't it because you refresh it.

109
00:14:02,770 --> 00:14:09,930
And if we use a score do you see these ladies on a boat section about menu item becomes active.

110
00:14:10,300 --> 00:14:16,950
And if they use it is on the features section the feature menu item become active and the same be for

111
00:14:16,960 --> 00:14:19,360
the screens and don't load and contact

112
00:14:24,260 --> 00:14:25,960
and the click you is also working

113
00:14:35,150 --> 00:14:36,330
everything looks fine.

114
00:14:44,170 --> 00:14:44,640
OK.

115
00:14:44,680 --> 00:14:46,460
That's it for the menubar.

116
00:14:46,530 --> 00:14:48,230
I think you're done with the menubar.

117
00:14:48,280 --> 00:14:49,640
And see you in the next video.

118
00:14:49,680 --> 00:14:50,190
Thanks.