1
00:00:00,150 --> 00:00:01,090
Not bad, not bad.

2
00:00:01,110 --> 00:00:08,670
We're almost there, and as far as hiding the submenu, I would want to hide it in two cases when we

3
00:00:08,670 --> 00:00:10,640
hover over the hero.

4
00:00:10,980 --> 00:00:14,340
So not when we're hovering over the submenu, then, of course, we were on display.

5
00:00:14,760 --> 00:00:22,590
And also when we're hovering over the number, not including the buttons, we need to keep in mind that

6
00:00:22,860 --> 00:00:30,840
if you check all the elements, of course, we know that buttons our buttons are in the nav.

7
00:00:31,290 --> 00:00:37,440
So I would want to check if I'm hovering over a number, but not over the buttons.

8
00:00:38,010 --> 00:00:41,100
So if the buttons, then, of course, I would still want to display the submenu.

9
00:00:41,400 --> 00:00:47,370
But then if it is a number so somewhere over here, then of course I would want to hide it and we can

10
00:00:47,370 --> 00:00:48,240
test start out over here.

11
00:00:49,050 --> 00:00:50,070
This is my submenu.

12
00:00:50,070 --> 00:00:52,650
If I have already here, of course I cannot see.

13
00:00:52,890 --> 00:01:00,900
And now if I move on to the number, then I also hide the submenu and we're going to start over here

14
00:01:01,740 --> 00:01:10,790
by navigating probably to a hero, because that is going to be the fastest one where we have the hero.

15
00:01:11,040 --> 00:01:13,320
We do have the clothes submenu.

16
00:01:13,620 --> 00:01:20,790
And I remember the event that we were listening for on the buttons, what it was, it was on mouseover.

17
00:01:21,150 --> 00:01:29,140
So the moment our mouse pointer moves on to the hero, what I would want to call no simple clothes,

18
00:01:29,570 --> 00:01:31,730
close submenu.

19
00:01:32,130 --> 00:01:36,110
So what we should see right now is, of course, I can put it nicely.

20
00:01:36,120 --> 00:01:37,200
Yep, there it is.

21
00:01:37,470 --> 00:01:43,080
But then the moment I move onto the hero, of course, I hide it now with a knife bar.

22
00:01:43,080 --> 00:01:50,340
It is going to be a bit trickier because essentially we'll have to implement that event target as well.

23
00:01:50,790 --> 00:01:55,170
So I'm going to navigate to my no, of course, I already have the function.

24
00:01:55,350 --> 00:01:58,380
I have closed submenu and then I have the knife.

25
00:01:58,650 --> 00:02:03,720
So again, I'll call my own mouse over, but I'll come up with my function.

26
00:02:03,900 --> 00:02:07,370
I say handle submenu work.

27
00:02:07,380 --> 00:02:09,870
So and in here I'll declare the function.

28
00:02:09,960 --> 00:02:15,630
I say handle sub menu and I'm looking for the event object.

29
00:02:15,840 --> 00:02:17,910
That is definitely something that I would want.

30
00:02:18,390 --> 00:02:24,060
And I can check whether the class list is dealing button.

31
00:02:24,370 --> 00:02:25,770
Now, why am I checking that?

32
00:02:26,310 --> 00:02:33,900
Because if I'm hovering over the button, remember buttons had that class of my button or linked button.

33
00:02:34,050 --> 00:02:34,450
Correct.

34
00:02:34,650 --> 00:02:35,400
One of two.

35
00:02:35,730 --> 00:02:36,360
It was linked.

36
00:02:36,360 --> 00:02:44,250
But there is so what I'm saying here is if the event target has the class of button, then I wouldn't

37
00:02:44,250 --> 00:02:46,320
want to call the closed submenu.

38
00:02:46,320 --> 00:02:53,010
But if it is anything else, if it is not center or nav or whatever, then of course I would want to

39
00:02:53,010 --> 00:03:00,780
close the sub menu because we need to understand, if we just say close submenu, what is going to happen,

40
00:03:00,780 --> 00:03:06,480
what will never open it, because now, of course, we're hovering over the number because the buttons

41
00:03:06,480 --> 00:03:07,470
are no.

42
00:03:07,680 --> 00:03:12,500
And there is now I cannot open and since I'm right about closing it as well.

43
00:03:12,900 --> 00:03:16,680
So essentially we avoid that if we set up condition.

44
00:03:17,070 --> 00:03:21,650
And I'm going to say, if I want Target, then class list.

45
00:03:21,660 --> 00:03:26,280
Class list again, we're going back to Vanilla JavaScript contains.

46
00:03:26,280 --> 00:03:29,910
And then the class that I'm looking for is a link between.

47
00:03:30,210 --> 00:03:34,040
If that is the case, then I would want to close it.

48
00:03:34,440 --> 00:03:41,010
So essentially, if the target that I'm hovering over does not have the link button, then I would want

49
00:03:41,010 --> 00:03:41,490
to close it.

50
00:03:41,880 --> 00:03:48,540
If it does contain button, which of course linked buttons, you can clearly see that, that I wouldn't

51
00:03:48,540 --> 00:03:50,670
want to close my submenu.

52
00:03:51,090 --> 00:03:54,840
So now, of course, as I'm hovering, everything is beautiful.

53
00:03:55,070 --> 00:04:02,700
And then once I move on to the actual number that I hated and that was exactly the reason why I lifted

54
00:04:02,700 --> 00:04:08,430
up the submenu three pixels, because now it is actually sitting on a button.

55
00:04:08,550 --> 00:04:09,820
So that was done on purpose.

56
00:04:09,840 --> 00:04:15,540
And that way once I move from button, I submenu everything still works.

57
00:04:16,020 --> 00:04:16,800
That's our project.

58
00:04:16,800 --> 00:04:20,970
Hopefully everyone enjoyed our project and I hope to see the next one.