So I saw this thread on Reddit, where people were discussing how it was done, and I was curious to do it myself. I followed these tutorials, so this one was linked in the Reddit comments, as well as Westboss has his own video, which he did a few years ago. And in our version, we'll start from scratch. So I'm going to be making use of Vite, just so I can scaffold out the project quickly. But we'll be making use of just Vanilla, HTML, CSS, and JavaScript. So you can even scaffold this out without any NPM tools if you don't want to do it that way. So let's go ahead and make a new project. I'm going to name it LCStripeMenu.

So let's go ahead and make a new project. I'm going to name it LCStripeMenu. And you can see the different scaffolding here. We're just going to do Vanilla. And Vanilla's fine. And that's done. Let's go ahead and go into that LCStripeMenu, npm install, and npm run dev. Okay. You can see how quick that was. That's why I'm using Vite.

You can see how quick that was. That's why I'm using Vite. Actually, before I do that, let's open this up in VS Code. Okay. And let's npm run dev to run the project. It's running in 3001, because I have my other project running here. So let me stop this and run it again. Okay. So now it's on 3000. And this is the default project.

So now it's on 3000. And this is the default project. So you can see we have the index.html here, the JavaScript file, and the CSS file. So let's just do it the traditional way. Let's just change the title here, say StripeMenu. And instead of importing the CSS within the JavaScript, like it is here, let me just delete this. Let me just delete everything here, actually. And let's just do it the traditional way. So link, and it's style.css.

And let's just do it the traditional way. So link, and it's style.css. This should still work. And we no longer need to do this div id of app, and we can just have the content in here. Hello. So this should still render, and the JavaScript should still work. Let's go ahead and put a default nav in here. So I'm going to say header, say nav, ul, li, okay. And instead of an anchor link, I'm going to make it a button. And let's have three of them, say products, developers, and company, okay.

So this will be our starting point. Actually, I'm going to make commits, like I usually do. So if you want to go back to a certain commit, you can do that. So let me stop this. I don't think this is a git repo yet. So we have to do git init. And just say git add, git commit, starting point. Okay. Let's run that again. So npm run dev.

Let's run that again. So npm run dev. So let's start the traditional way of building menus, where each menu has its own background. So each one of these will have its own background. So let's try doing that first, and then we'll transition into the other effect. So let's start off with our markup. So let's put these on their own line. Should have prettier here, but we'll just format it manually. So let's make a new menu item, or sorry, a new menu, I mean, and we'll give it its own name as well.

So let's make a new menu item, or sorry, a new menu, I mean, and we'll give it its own name as well. So menu and menuProducts, and let's just say lorem 30 for this one, and the same for the others. Actually, just do one first, or let's style one first. So down here in our CSS, let's make a new class for menu. So it's going to be absolute. So position absolute, background is going to be white. Okay. Let's give it a border-radius of 5px.

Okay. Let's give it a border radius of 5 pixels. Let's give it a padding of 10 pixels, and let's see how that looks. Okay. Let's give our entire document a line height. So up here in body, say line height 1.5, maybe, okay, that's fine. And for now, let's give these specific widths. So let's do that. So this one's called menuProducts, or this specific one, menuProducts. And let's say width, say 300 pixels.

So this one's called menuProducts, or this specific one, menuProducts. And let's say width, say 300 pixels. Okay. And I sort of want to center it within the menuItem. So sort of around here. So let's see if we can do that. I think we have to go into the listItem. So nav, ul, li, make this relative and make it flex, say justifyContent center. And let's see if this works. Okay.

Will that work? Yeah, that works. Okay. Now we can add the content for the other menu items. So let's do that. Back to our index.html, let's grab this. Let's make one for developers. Let's call it menuDevelopers. Okay. Let's say developers here.

Okay. So let's hide them by default. Let's put these back. And let's say for the menu, display: none; and they should be hidden. Now let's start making use of JavaScript so we can hover over these items and show the menu. Then we'll add some basic transitions as well. So let's go into our JavaScript file, which is empty right now. Let's go ahead and grab those menu items, because we're going to add event listeners.

So let's go into our JavaScript file, which is empty right now. Let's go ahead and grab those menuItems, because we're going to add event listeners for hovering on them. So menuItems equals document.querySelector, and, or sorry, querySelectorAll. And our menuItems are the nav ULLI. Again, I should have classes on these, but this is the way I have it in my project that I did. So nav ULLI. And let's go ahead and make an event listener for hovering. So menuItems.forEach.

And let's go ahead and make an event listener for hovering. So menuItems.forEach. So for each menuItem, go ahead and grab the menuItem and add an event listener. So menuItem.addEventListener. And hover is called mouseEnter. And then we're going to call a method named handleEnter. Okay. Let's do the same for hovering off of it. So same thing here. But mouseLeave is the event name.

So same thing here. But mouseLeave is the event name. Okay. And let's say handleLeave. So let's go ahead and create those methods: handleEnter, okay, handleLeave. And all we want to do is show this one based on whatever one we hovered over. So the event listener is on the list item.

And all we want to do is show this one based on whatever one we hovered over. So the event listener is on the li element. So I believe if we refer to this, it should be this DOM element. So let's verify that when we go into this method. So say const menu equals, or let's just console.log this for now. Like I said, it should be that li element. So let me open up DevTools. menuItem is not defined. Let me just close this. Sorry, should be an arrow function.

Let me just close this. Sorry, should be an arrow function. Fix that. Okay. And as you see, it is the list item. So this one is products, and this one should be developers. Cool. So now we can grab this menu, which is what we want to show or hide. So let's do that. const menu equals, say, this.querySelector.

So let's do that. const menu equals, say, this.querySelector. And we're looking for .menu. Okay. And then now we can add a class to show it, because now it's hidden. So let's do this. There's a few ways to do this, but let's add a class. So say menu.classList. So this is how you add classes in vanilla JavaScript, classList.add. We can say block and make a class for display block, but I'm going to name it menu enter.

And it does seem to work. Now we just have to do the opposite for leave. So back here, we can do the same thing. Let's grab this. And we are removing the class, menu.classList.remove. Okay. There we go. I'm going to put more padding on the menu items here. So where is that? In our ULLI.

So let's do that. And the second program is how long to wait. So let's just say 50 milliseconds after the first one is added. So this naming convention is similar to how transitions are done in Vue and even in React for popular packages like React Transition Group. So you have the name enter and enter active and also for leaving the transition. So you have leave and leave active. So now let's go into our CSS back to our menu. We can add the transition definition in here. So in our menu, we want to transition it transition.

We can add the transition definition in here. So in our menu, we want to transition it transition. Let's say the opacity for now, say 200 milliseconds. And if you want, you can put an easing curve. And our starting point is menu enter. So let's say opacity zero. So it's display block, but it's also invisible at this point. But after this, so menu enter active, I guess we don't need display block. We can just say opacity one. Okay, let's see if this actually transitions.

So if you do want to transition out, you can do the same thing here, but sort of the opposite and name them accordingly, obviously. So say menuLeave. So it starts at one starts at zero when it's leaving, but when it's done, it should be past zero and translate Y negative 40px. Okay. And in our main.js, we can do sort of the same thing here, but for the leave classes. So say menuLeave, okay, and menuLeaveActive. And we also have to remove these classes after a certain amount of time. So let's grab the setTimeout.

And we also have to remove these classes after a certain amount of time. So let's grab the setTimeout. Let's remove menuLeave and menuLeaveActive after, let's say, 200 milliseconds. Okay. And let's see if these transitions on leave work. So it does not work. What did I do wrong? Maybe I forgot to change the name. Yes, I did. So menuLeaveActive.

Okay, that's fine. Cool. Okay. I think this is a good place to break. We took a look at creating standard menus with their own backgrounds and also standard transitions and how that is done using vanilla CSS. So obviously we're working towards what Stripe does. And in the next video, we'll take a look at how we can have one background and then transition that between the different menus here, depending on which one we hover over. So let's make a commit here and say git add, git commit, standard menu transitions.

transition that between the different menus here, depending on which one we hover over. So let's make a commit here and say git add, git commit, standard menu transitions. Okay. And like I said, we'll work on the follow along Stripe transition in the next video.