Okay, now let's work on the actual follow-along transition like you see in Stripe. So the idea here is that there's only one background, and it transitions into place based on whatever menu item that you hover over. So let's start with that. So we're going to make a box here, and then let's just see it transition into another place. So let's start with that. Let's go into our index.html, and we can put this anywhere. I'll just put it in the header. Let's call it menu.background, okay?

I'll just put it in the header. Let's call it menu.background, okay? And let's go ahead and go into our CSS and define some styles here. So let's put it up here. Let's say menu.background. Okay. And it's going to be absolute. Let's give it a width and a height of 100px. Let's make it left 0. Let's give it a background of white, border-radius of 5px, just like our other one,

Let's make it left 0. Let's give it a background of white, border, radius of 5 pixels, just like our other one, and display flex, and justify content center. Okay. And let's see if that renders in our browser here. I don't think my server is running. npm run dev. Okay. There it is. So like I said, the idea is to transition this into this position here.

that new place, just so you can see what we're trying to accomplish here. So right here, let's grab that menuBackground. So we can say const menuBackground equals document.querySelector('.menuBackground'). Okay. And let's just grab that. And when we hover over a list item, we can do the same thing here. So menuBackground.add('next'). Okay. Let's see if this works.

Okay. Let's see if this works. Okay. So you see a transition into this position after I hover over one of these. So that's pretty much what we have to do, but we have to position it in the correct place here. So we have to get the specific coordinates, the top left width and the height of this specific one, or the one we hover over. So remember, we already have this DOM element here. It's called menu.

So remember, we already have this DOM element here. It's called menu. So this one right here, and we have that in our JavaScript right here. So let me just remove this now that you see what we're trying to do. So we can grab the coordinates and say const menuCoordinates using the JavaScript function called getBoundingClientRect. So this has all the information about the size and position of this DOM element. So let's just console.log that menuCoords. Okay. And let's see what we get.

Okay. And let's see what we get. So let's open up DevTools. Let's hover over something. And you see this DOMRect, which is all the coordinates for this green menu right here. So we're interested in the top left, the height and the width. And that will transition this into the correct position here over our green menu here. So let's see if this works. So let's get rid of this. We can do an inline style for the menu background like this, not style, not setProperty.

So I don't need this anymore. Let me remove this. We're doing it via an inline style here. And we can grab this width from the menuCoordinates that we have. So let's say menuCoordinates.width. And it has to be pixels. And let's do the same for height. So this should be height. And this one too. So let's see if it transitions correctly for the width and the height.

And there we go. So this width and this width are the same. And same with the height. So now we just have to position it in the correct place. So we can make use of top and left for that. So pretty much the same thing. Let's duplicate these two. And this one's going to be for top. So let's say topMenuCoordinates.top. And same for left.

So let's say top menu coordinates.top. And same for left. left here and left here. So let's see if this works. There we go. So it's slightly off. You can see that the white is above the green. That might be our transition here. So if we go into our CSS, I did a transform somewhere here. So right here we have 40 pixels.

This is just a simple explanation with no code.

So this getBoundingClientRect. So if I were to add more content in one of these, it should still work. So let's add another 30 characters in here or 30 words for products and still transitions correctly. Cool. So let's make this hidden by default. Right now it shows when the page loads. So into our style, menu background, say opacity zero to start. Does that work? Okay.

Does that work? Okay. But when we hover over it, we'll add a new class called OpenMenuBackground.Open and say opacity one. Okay. And let's go ahead and add that to our JavaScript. So let's just grab this and let's add it right here. So menuBackground.classList.add(open). Okay. Does this work?

Okay. Does this work? Okay. And it does. Cool. Let me hide DevTools here. I think there's a small issue. If we scroll down a bit and try again, yeah, it's slightly offset here. So we have to accommodate for the scroll position. So we can do that with window.scrollY right here.

So we have to accommodate for the scroll position. So we can do that with window.scrollY right here. We just add it to the top value window.scrollY. Okay. Try again. I'm going to refresh and it does work depending on or it doesn't depend on the scroll position. Let's make sure that we remove that open class when we hover over or hover off of it. So let's grab this, put it in handleLeave right after this. So let's remove. Okay.

So let's remove. Okay. Let's try that out. There we go off and it does hover off of it or transition off. Awesome. So now we have this follow along effect, which transitions into the correct position based on whatever menu item that we hover over. Let's see if we can add the arrow here. So let's see if we can put it within our menu products or sorry, menu background. So say .arrow.

So let's see if we can put it within our menuProducts or sorry, menuBackground. So say .arrow. Let's save that. Go into our CSS. Let's make a new class for that. So it's going to be absolute. Let's make it width 14, height 14 as well to give it a background of white, just like our menuBackground. And let's see if that works. Okay.

And let's see if that works. Okay. So you can see this little blip when I refresh and that's because the CSS isn't loaded yet, but this only happens in development. If you were to push this to prod, it should be quick enough so that this blip doesn't show, but you can actually see the arrow I'm trying to create there, but we just have to rotate it. So let's go ahead and make it transform here. transform. rotate 45 degrees.

Negative 50%. Try that again. Okay. That looks good. And you can see the arrow transitions along with the rest of the menu background. Cool. Okay. Let's make a commit here since we have it working. So say git add, git commit, say width and height transitions working. Okay.

And it's a bit off. So I think we have to offset it by the top of the size of this, or maybe the height. I'm not sure. So let's try the top. So we have to grab that element. So that element is the nav ul. So let's grab that from up here. Say const nav, let me just grab this actually, or duplicate it, say nav. It's nav ul. Again, you should have better names or a name.

It's nav ul. Again, you should have better names or a name. At least I don't have a name. I'm just using actual DOM elements here. So let's scroll down and let's see if we can offset this. So say nav coordinates.top. So most of this is just playing around and see what the correct offset is. And this is what I got. Hopefully this works. Sorry, we have to grab the nav coordinates as well.

left so we can have all the performance benefits. So this is going to be what we're trying to transition to. Start with the width. Let's say, let me just put this in template strings. Actually, no, sorry. We already have template strings. So menuCoordinates.width. And we are starting from 100. If you remember our CSS here, our menuBackground starts at 100 pixels. Where is it?

And it sort of works. This is the correct height and the correct width. But when we're scaling, it sort of scales from the middle. So we start here with that box, but it sort of scales from the middle and scales up like that. So what we wanted to do is scale from this position here and then grow this way. So there is a CSS rule for that. I believe it's called transform-origin. So let's add that into our menu background. Sorry, let's go into our style first.

So let's add that into our menu background. Sorry, let's go into our style first. menu background. Let's say transition-origin. Sorry, it's called transform-origin. transform-origin. There it is. You can see the definition in VS Code. So let's say let's grow from 0, 0. Okay, let's try that again.

Looking good. So now let's fix the arrow. It's scaling because it's within that menu background in our markup here. So let's put it outside. And now you can see it's right here. So we have to transition that as well. So let's do something similar for our arrow. So we have to grab that first. Let's say arrow here. And it's going to be arrow.

Okay. So it's still behind. Okay. So I think this is where I used the navCoordinates. So let's say navCoordinates.top. And it should be minus, I think. Does this work? And it does. So there it is, but it has to be in the middle. So let's add the width of it here and divide it by 2.

So there it is, but it has to be in the middle. So let's add the width of it here and divide it by two. So let's say menu.chords.width. Divide by two. Okay. Let's try that. Does that put it in the middle? Sorry. Don't need these {}. Let's try that.

Make sure it works for when we scroll down and it does. Awesome. Now we just have to make sure it doesn't show initially. So we can do the same thing we did for the menu background. So for the arrow, initially it's opacity zero, and then we can do arrow open, opacity one. And we can add that class in our JavaScript. So up here, same thing, but for our arrow and remove it down here. Okay. Does this work? Refresh and yeah, it looks like it does work.

Okay. I'm going to make a commit here since we have it working and we've optimized our transitions to only make use of transform and opacity. But I also want to add more content to the menu. So it looks more like the Stripe menus. So let's make a commit first. Commit. Commit. Say optimize transitions. Okay.

But for now, I'm pretty happy with what we have here. So let's go ahead and make a commit for this. I just added the content for the menus. So say git commit -m "add content to menus".