1 00:00:00,180 --> 00:00:06,630 So our functionality somewhat works once we rendered the at the moment, we hover over one of the buttons, 2 00:00:06,940 --> 00:00:08,650 of course we can see the submenu. 3 00:00:09,090 --> 00:00:13,610 Now there are two or maybe I would say even three issues with that. 4 00:00:14,040 --> 00:00:20,640 So first, we would want to display only the links that belong to that page. 5 00:00:21,240 --> 00:00:22,150 That's number one. 6 00:00:22,590 --> 00:00:27,670 Now, second, also, we don't want to change the width depending on how many links we have. 7 00:00:28,020 --> 00:00:33,230 And third, notice how we're changing the location of the submenu. 8 00:00:33,870 --> 00:00:39,550 So at the moment, yeah, we hover, we show something, but it's not really dynamic. 9 00:00:39,930 --> 00:00:44,180 Now, I'll show you why it is not dynamic as far as the regular says. 10 00:00:44,640 --> 00:00:52,080 So in here, let's look for submenu and you'll notice that, yeah, it is displayed, it has position 11 00:00:52,080 --> 00:00:54,870 absolute and it has some kind of values. 12 00:00:55,350 --> 00:01:02,520 Now, what I would want is when I hover over the button, not only I would want to get which button 13 00:01:02,520 --> 00:01:05,190 there is, whether that is product developers and company. 14 00:01:05,400 --> 00:01:11,430 And then of course, I would want to get only the substance, but I also would want to get the position 15 00:01:11,760 --> 00:01:12,740 of the button. 16 00:01:13,370 --> 00:01:19,570 This is important because I want to place that submenu right in the center of that button. 17 00:01:19,740 --> 00:01:26,850 That's why, like I said, when we were setting up the function in the number, it was somewhat simple 18 00:01:26,850 --> 00:01:27,480 in the beginning. 19 00:01:27,690 --> 00:01:30,500 But of course, we're going to make it more complicated. 20 00:01:30,900 --> 00:01:35,450 And first, what I want is just to get that target. 21 00:01:35,880 --> 00:01:39,830 So in order to get that, I would want to go with a one target. 22 00:01:40,080 --> 00:01:46,740 So if we go with E and Target, you'll notice that in a console, by the way, of course, we need to 23 00:01:46,740 --> 00:01:49,620 do having a setup, otherwise it won't make sense. 24 00:01:50,010 --> 00:01:51,860 This will point to a button. 25 00:01:52,170 --> 00:01:55,950 So as I'm having notice, the value is changing. 26 00:01:56,250 --> 00:02:02,880 Now, submenu, of course, stays here the way it is, but every time my mouse moves on to a button, 27 00:02:03,540 --> 00:02:04,960 I can see a different value. 28 00:02:05,340 --> 00:02:09,840 And of course, this is the value that I'm looking for, because from here I would want to grab the 29 00:02:09,840 --> 00:02:14,540 text and I would want to grab also the coordinates for the button. 30 00:02:14,970 --> 00:02:21,840 And then once I've got those, then of course I'll dynamically change two values in the submenu. 31 00:02:22,110 --> 00:02:26,570 I'll change which links this plan and also the location. 32 00:02:26,970 --> 00:02:34,040 So what I would want here is the first set up text, so I'll get the page. 33 00:02:34,270 --> 00:02:37,110 So I'm going to go with const online page. 34 00:02:37,110 --> 00:02:40,530 So that is my variable name and I'm going to go with a random target. 35 00:02:40,800 --> 00:02:47,490 And then in order to get the text that is inside the button, I'm going to go back to Joske plant and 36 00:02:47,490 --> 00:02:49,520 I'm going to say text content. 37 00:02:49,830 --> 00:02:54,720 So this is going to give me a page, whether that is developers, product or company. 38 00:02:55,170 --> 00:02:58,350 And then also I would want to get that location. 39 00:02:58,830 --> 00:03:04,830 And then remember, in order to get that location, we need to run that, get Bohning client right. 40 00:03:05,130 --> 00:03:11,670 So we go with const and then temp and I'll call this PTM, and that is equal to one target. 41 00:03:12,930 --> 00:03:19,650 Target, and then we're looking for get this function name is somewhat annoying because it is really 42 00:03:19,650 --> 00:03:26,040 long and very hard for me to pronounce, so get bounding client direct. 43 00:03:26,460 --> 00:03:28,590 And now I want to get to things. 44 00:03:29,010 --> 00:03:35,490 I would want to get the center of the button and also the bottom of the button. 45 00:03:35,730 --> 00:03:40,170 And I'm going to start simply by logging the temp VPN. 46 00:03:40,170 --> 00:03:45,570 And of course you'll see in a console that again, once we have our notice, we're getting back these 47 00:03:45,570 --> 00:03:46,090 objects. 48 00:03:46,590 --> 00:03:52,450 So this tells me the left position, the right position, the bottom, as well as the. 49 00:03:53,070 --> 00:03:55,260 So what I would want is to get the middle. 50 00:03:55,410 --> 00:04:00,450 And in order to calculate that, I would need to sum up left and right and divide by two. 51 00:04:00,840 --> 00:04:07,710 And as far as the bottom, I would need to get the value, but since I would want to place my submenu 52 00:04:08,040 --> 00:04:12,030 three pixels on top of the button and that is done on purpose. 53 00:04:12,220 --> 00:04:16,640 And I'll show you at the very end once we're trying to hide the submenu. 54 00:04:16,920 --> 00:04:19,310 That's why I say minus three. 55 00:04:19,680 --> 00:04:27,720 So only two values that I'll pass eventually into the submenu want to center, so say center. 56 00:04:27,960 --> 00:04:35,250 And that one is equal to a button because this gives me that object that I'm looking for left then plus 57 00:04:35,640 --> 00:04:37,610 time button and then. 58 00:04:37,620 --> 00:04:38,190 Right. 59 00:04:38,550 --> 00:04:40,520 And I would want to divide that by two. 60 00:04:40,800 --> 00:04:47,120 So this is going to give me the center of the button so I'm not where I need to move my submenu. 61 00:04:47,340 --> 00:04:48,240 That's number one. 62 00:04:48,540 --> 00:04:53,760 And number two, I would want to get that bottom several seconds and then bottom. 63 00:04:54,090 --> 00:04:57,090 And that one is equal to a temp bottom. 64 00:04:57,690 --> 00:05:04,110 So the bottom value and then a minus three since I would want to lift my submenu three pixels up. 65 00:05:04,500 --> 00:05:10,050 And now instead of just calling the open submenu, I would want to pass these two values. 66 00:05:10,330 --> 00:05:13,760 I would want to pass in the page so I know which links to get. 67 00:05:13,950 --> 00:05:19,440 And the second thing is an object with two values with the center and then of the bottom. 68 00:05:19,830 --> 00:05:24,420 So once we call that push, we would need to navigate back to the context just. 69 00:05:25,320 --> 00:05:29,940 And we would need to fix our open submenu because at the moment we're not handling that. 70 00:05:30,240 --> 00:05:33,150 So we have open submenu, beautiful. 71 00:05:33,450 --> 00:05:36,090 And now I'm just going to say that it is looking for two things. 72 00:05:36,450 --> 00:05:40,760 It is looking for a text and it is looking for the coordinates. 73 00:05:41,040 --> 00:05:43,860 So we say here coordinates. 74 00:05:44,110 --> 00:05:47,520 So now none of these things we haven't set up yet. 75 00:05:48,000 --> 00:05:53,040 So I have text and I have the coordinates and I'll have to set up state value. 76 00:05:53,400 --> 00:05:56,760 And that's that value will be location. 77 00:05:57,150 --> 00:05:58,800 So I'll have contact. 78 00:05:59,190 --> 00:06:08,790 I'll start with location and then set the location and it is going to be an object, I'll say use state. 79 00:06:09,000 --> 00:06:13,710 And then since it is going to be an object by default, I will also set it up as object. 80 00:06:14,100 --> 00:06:17,460 So not once I get my text and coordinate. 81 00:06:17,760 --> 00:06:22,460 Not only I would want to open submenu, but I would want to pass in those coordinates. 82 00:06:22,710 --> 00:06:29,700 So say set a location and line whatever I'm passing in as far as the coordinates and the last thing, 83 00:06:29,700 --> 00:06:37,980 of course, in the submenu now I would want to grab those values and then I would want to add the inline 84 00:06:37,990 --> 00:06:44,060 success where of course I change the location of the submenu. 85 00:06:44,430 --> 00:06:45,630 So let's navigate back. 86 00:06:45,840 --> 00:06:54,380 That's the third missing piece in our setup where we say that not only I would want to have a IS submenu 87 00:06:54,390 --> 00:06:55,440 open, by the way. 88 00:06:56,540 --> 00:06:57,620 I need to pass the Senate. 89 00:06:58,130 --> 00:07:03,500 I need to say location, I want to pass it on and then of course I will destruction. 90 00:07:03,800 --> 00:07:05,150 So I'll say location. 91 00:07:05,570 --> 00:07:13,280 And then what I'm going to do here is every time that location value changes, I would want to run usufruct. 92 00:07:13,670 --> 00:07:18,110 So set up my usufruct over here and I'll have my dependancy. 93 00:07:18,110 --> 00:07:18,370 Right. 94 00:07:18,620 --> 00:07:22,340 I'll say every time location changes, I would want to run it. 95 00:07:22,670 --> 00:07:30,980 And then, of course, I would want to set up also a huge rep because I would want to access my submenu 96 00:07:30,980 --> 00:07:31,680 container. 97 00:07:32,090 --> 00:07:40,420 So let's call the container consed container is equal to my use, Merav, and I'll pass in A.. 98 00:07:40,790 --> 00:07:49,250 And of course where I have the aside, I'll need to add my roof and that one will be equal to my container. 99 00:07:49,670 --> 00:07:56,500 And then when I call the effect this is where I would want to get that container because I would want 100 00:07:56,870 --> 00:07:58,860 the inline success. 101 00:07:59,180 --> 00:08:03,870 So I'm going to go with some kind of variable or call this submenu. 102 00:08:03,890 --> 00:08:08,450 Now that is equal to my container and dot current. 103 00:08:08,690 --> 00:08:15,730 So that gets me the node and then let's do the structuring where from the location I would want to get 104 00:08:15,740 --> 00:08:22,700 center and bottom since I know that it is an object, so center and then bottom and that is coming from 105 00:08:22,700 --> 00:08:23,780 the location. 106 00:08:24,300 --> 00:08:27,160 So what's the value that is coming from the context? 107 00:08:27,500 --> 00:08:29,890 And lastly, let's do that in line. 108 00:08:29,900 --> 00:08:33,380 So yes, that's where we go with submenu. 109 00:08:33,920 --> 00:08:40,670 So that holds, of course, my node and we go with style and line as far as the location would go with 110 00:08:40,670 --> 00:08:47,180 left and in here, we would want to have interpellation where we research center and then pixels. 111 00:08:47,570 --> 00:08:54,980 So this is just going to set it up in the center and then also vertically would want to go with submenu, 112 00:08:55,490 --> 00:08:59,270 submenu style and on top. 113 00:08:59,600 --> 00:09:01,310 So how many pixels from the top? 114 00:09:01,640 --> 00:09:07,310 And of course now we pass in that bottom value where we go with bottom and then pixels again. 115 00:09:07,730 --> 00:09:13,200 And what you'll notice that every time your mouse moves onto the button. 116 00:09:13,580 --> 00:09:21,530 Notice how the submenu is changing nicely location because we grab the coordinates for the button and 117 00:09:21,530 --> 00:09:25,270 then notice we're changing the location of the segment. 118 00:09:25,320 --> 00:09:28,280 Again, we're not changing any values yet. 119 00:09:28,760 --> 00:09:29,930 That is coming up. 120 00:09:30,110 --> 00:09:35,810 But at least what's really cool is that by default, yeah, it is setting position absolute, but now 121 00:09:35,810 --> 00:09:38,570 we're dynamically checking the values for the button. 122 00:09:38,930 --> 00:09:46,070 And then also every time that value changes, well, we also change the location of the submenu.