1
00:00:00,300 --> 00:00:09,360
All right, and I think we're going to start somewhat slowly by just displaying of that submenu when

2
00:00:09,360 --> 00:00:14,850
we're hovering over the buttons and then we'll deal with the difficult part where, of course, we would

3
00:00:14,850 --> 00:00:17,990
need to place it exactly where the button is.

4
00:00:18,000 --> 00:00:24,410
And we also would want to display only the sublimates that belong to that page.

5
00:00:24,840 --> 00:00:28,260
So let's just start very simply where we have the submenu.

6
00:00:28,620 --> 00:00:35,250
I would want to import the EU's global context because we are going to be some things that will grab

7
00:00:35,250 --> 00:00:35,670
from there.

8
00:00:36,030 --> 00:00:42,960
So in submenu, copy and paste, we have used global context online for the time being.

9
00:00:43,320 --> 00:00:46,110
We're just going to go with one value.

10
00:00:46,410 --> 00:00:52,810
Is submenu open, which of course, we already know that it is true since we set it up by default.

11
00:00:53,130 --> 00:00:54,930
So is submenu.

12
00:00:55,710 --> 00:00:59,970
When you open is my value and it is coming from U.S. global context.

13
00:01:00,480 --> 00:01:06,320
And that as far as this return, which is going to go with aside and.

14
00:01:06,330 --> 00:01:06,710
All right.

15
00:01:06,730 --> 00:01:14,130
We set up our ternary operator, so class name and then of course we have templating and then I will

16
00:01:14,130 --> 00:01:16,020
say, is submenu open?

17
00:01:16,470 --> 00:01:20,180
If that is the case, then we would want to display to your classes.

18
00:01:20,520 --> 00:01:22,400
If not, then we'll just display one.

19
00:01:22,740 --> 00:01:27,340
So we have submenu class and then show class as well.

20
00:01:27,600 --> 00:01:33,780
And of course, if it is false, which of course we know is not by default at the moment, which is

21
00:01:33,780 --> 00:01:41,730
go with submenu class and then inside we can just write something because eventually, yes, we will

22
00:01:41,730 --> 00:01:46,000
iterate over the data coming from our data.

23
00:01:46,040 --> 00:01:46,370
Yes.

24
00:01:46,740 --> 00:01:50,970
But for the time being, we just need to deal with this submenu.

25
00:01:51,210 --> 00:01:53,160
That's the one that we're interested.

26
00:01:53,460 --> 00:01:58,730
And of course, what we notice is that it is displayed beautiful.

27
00:01:59,100 --> 00:02:06,030
And if we don't change that value in the global context, then of course we can do it and we can just

28
00:02:06,030 --> 00:02:06,970
say false.

29
00:02:07,250 --> 00:02:09,790
And of course, now it is going to be him.

30
00:02:10,350 --> 00:02:13,460
Now, there's a few things that we would need to fix.

31
00:02:13,710 --> 00:02:21,750
First of all, I only want to show submenu when I'm hovering over the buttons.

32
00:02:22,560 --> 00:02:31,200
So essentially when the mouse enters the buttons in the number, only then I would want to display the

33
00:02:31,200 --> 00:02:35,750
submenu, because at the moment, of course, it is shown by default.

34
00:02:35,910 --> 00:02:44,190
I mean, at least the words so I'm checking is submenu open and remember where we have the number,

35
00:02:44,520 --> 00:02:44,910
right.

36
00:02:45,180 --> 00:02:50,340
And that we had open submenu and the node set it up.

37
00:02:50,340 --> 00:02:58,170
We would need to add on mouseover eventless there and we would want to invoke a function.

38
00:02:58,530 --> 00:02:59,190
Not technically.

39
00:02:59,190 --> 00:03:05,580
You can make an argument that we could write away or on open submenu, but because there's going to

40
00:03:05,580 --> 00:03:10,250
be more functionality in there, I would want to set up a reference.

41
00:03:10,470 --> 00:03:18,540
So first of all, I'm going to create a function consed and I'll call this display sub menu and I'll

42
00:03:18,540 --> 00:03:21,560
definitely need my event target for sure.

43
00:03:21,990 --> 00:03:23,880
And then let's just go along.

44
00:03:23,880 --> 00:03:25,560
Hello World.

45
00:03:25,920 --> 00:03:30,290
And then I would want to go with open submenu.

46
00:03:30,570 --> 00:03:36,300
So yeah, there's going to be eventually more functionality, but for now we'll just say open submenu

47
00:03:36,540 --> 00:03:44,730
and these three buttons that I have for all of them, I'm not going to say unclick more say on mouseover.

48
00:03:45,090 --> 00:03:51,920
So that just means that once the mouse moves over the button and of course we display the submenu.

49
00:03:52,170 --> 00:03:56,190
So let's just say display submenu and I'm going to grab this volume.

50
00:03:57,260 --> 00:04:05,270
And we're going to copy and paste for all button, so one and two, and now what you'll notice is that

51
00:04:05,480 --> 00:04:11,240
once you hover over the button, then, of course, we can display.

52
00:04:11,600 --> 00:04:15,780
Now, the problem is, of course, the fact that we cannot close it.

53
00:04:15,950 --> 00:04:16,360
Correct.

54
00:04:16,910 --> 00:04:23,720
So essentially, the moment I hover over my first button that it is displayed and there's no way for

55
00:04:23,720 --> 00:04:27,860
me to hide it, which is OK, because we're going to fix that in a second.