Adding our CSS dropdown menu to the roar bikes website

Hello, good-looking Web Designer. We are going to basically take the techniques from the last video, instead of doing it in isolation. We're going to do it to our own site, where we've got a drop-down menu, and kind of integrating into it in an existing site. It's going to help reinforce what we've learned, but also pick up a couple of quirks, that happens when you're kind of-- you're working in a bigger example. Let's jump in and work out how to get it going. 

So we've closed down our last project, let's open up 'Index'. We'll kind of reset everything because sometimes it's good to just remember how it all gets going. So open up Index, you can double click to open up a second file. So double click them both, they open up separately. In styles.css, this tab, drag it over here. HTML, I like to turn my wrapping back on, sort of wraps around. I'm going to drag you over there, cool. We're going to do it again but we're going to show you some shortcuts as well, because what we do is, we created a Nav, and then we created just A-tags with these Classes on, but remember, in the last video, we can't just use the A-tags. We need to wrap them up in a Div tag to wrap things. 

You can just start typing it in here, and you can say, "Actually, I want to put a Div in here called Nav Button." That would work, but then the Divs there, I can cut it, and I can put it after my A there, and you can kind of see, the slow process there. So you ready for the shortcut? So what we do is you highlight this fella, we're going to wrap around Selection. I'll show you the long way, you go to 'View', and go to 'Command Palette'. We've used him before once, this guy does everything, it's like the do it all. 

What we're looking for is, there should be this, is it greater than symbol there, or the closing square brackets? And in here is a bunch of stuff. Mine's got recently used, that's the one I want, Wrap with Abbreviation. That's the one I want, but you won't have that there, you start typing 'wrap', and it cuts it down to the things you can do that have the word wrap in it, and we want this armed with abbreviation.

 I'll show you the long way. Now this is the abbreviation, now I think abbreviation is-- I want to-- what do I want to name this tag? And I'd like to wrap it up in a Div tag called Nav Button. You can kind of see what it's doing down there. Look, how handsome that is. 'Enter' to confirm, done; nice, huh! So it's just a real handy thing. Let's look at doing it one more time with a slightly-- with a little bit of extra shortcuts. 

So highlight it, then on my Mac I go 'Command-Shift-P'. I'm assuming on a PC it's 'Ctrl-Shift-P'. If you're not sure, go to 'View', it's whatever shortcut is there on your PC. So I'll go back, try and get the flow going, Dan. So I've wrapped it up, feeling good, 'Command-Shift-P'. Then I go-- because it's already there I don't have to do anything. You could type 'wrap', I'm making it slow, but I can just hit 'Return' on my keyboard, and then go, "I want to wrap this up in Nav Button." Nav Button. Smooth, Dan. Totally destroyed that, I wasn't watching. 

All right, ready for the flow, flowing, highlighting it. 'Command-Shift-P', Rapid abbreviation, put in 'Nav Button', hit 'Return'. Oh, look at that, that was better. I like this guy, 'Command-Shift-P', 'Return' and let's put in a dot. Let's put in Nav Button, and we're doing some cool wrapping. You can see, it indented it. See, when I talk slowly, did that help for anybody, maybe not. 

All right, so I'm separating it out, just to kind of be very clear what we're doing. So we got three buttons, we've wrapped them all up in a Div tag. Let's have a little look at what we've ended up with. So I'm going to open my port, and because I'm kind of working on something else, I'm going to basically close it and then open it back up again. It's going to open up on this video over here. And I've broken everything. So we've totally broken lots of things with our code, so we're going to go through, and I guess that's why I wanted to do it as its own separate window. 

So if you're doing at the beginning it can be easier, but when you're adding things in later on, there is this pecking going on to try and repurpose or refix it. Actually we've used Nav Button already, let's just get rid of it off here. So these A-tags-- because it's applying twice, right? We've got-- trying to do it twice, so we don't need it on these A-tags, because we're using it on a Div Class. So I will get rid of all of this, and hit 'Command D', to get rid of that one, or we've done it, almost, I'll use my multi cursor. Holding down 'Option' key on a Mac, 'Alt' key on a PC. So now just got plain old Classes wrapped in these Div tags, with that same style on it. Let's have a look now; better. 

Next thing, let's get them to stack side by side. So we're going to say, you my friend-- who was that? Nav Button, can we have a Class with Nav Button? So Nav Button is going to be-- what are we going to call him? We're going to say, he is Display, and he's blocking at the moment so he's stacking on top of it. So the other one is Inline block, there he is there. They should line up next to each other. Now we're going to do the drop-down menu. It's going to be inside this Book Online. We're going to hover above it, else it's going to fall out. So let's look at the code, let's find Book Online. It's inside this Div tag called Nav Button. 

So the beginning, the opening. So just after the A-tag is where I'm going to put everything. I'm going to put in a few returns to make it look nice. We can now just do that, grab that one, copy it and put three buttons in. That actually works, there's nothing wrong with that. The tags open and they close, but the tabbing is all weird. So I could right click it and say, let's 'Format Selection', but I want to try and be fancy, and hone your skills to try and-- this is like, I only do this stuff when people are walking past behind you, and you're trying to impress them, that's what I do, because it takes me a little while to work out that I want, I would like a Div tag called Nav Button, inside of that, I'd like some A-tags, and then how many do you want? You want three. 

I know that's not going to work, but let's just say, let's do it, you're like, "Huh," kind of did what I said. It said, do Nav Button, then just times the A by 3. So what you can do is you can wrap this all up, you can say, open brackets, close brackets, so do all of this, and then times them all by 3, not just the A, all of them. Sometimes we delete that last bit 3, tap it back in, so the abbreviation pops back up, hit 'Return', hey, we're doing stuff. 

Okay, multi cursors, we're going to put in hash, '#'. We're going to put in the three little bits, so I'm going to grab it from the Text, I've got in your Exercise Files, and inside the A-tag, I'll paste that. Parts Delivery, and the last one is going to be Request Callback. I got all of them mostly in the right place. Let's have a look what ended up happening. So you're inside, I thought, okay, but I know that this needed to go inside the A-tag there. Now the cool thing about it is that this Div has an A-tag inside of it, and it's exactly the same as doing it this way, where we've got a Div with an A-tag inside of it. Exactly the same, just looks a little different here. Especially when I've broken it. I didn't break it, I just fold it on to two lines.

Let's make this a little wider so it all fits. So we've got these guys, what do you want to do with them? We want to turn them off because at the moment they're appearing but-- oh, have I broken something? A Div. Good old VS code help me putting a closing Div just there, which is not what I wanted, there we go. So it all looks nice now. Let's turn these guys off. So these guys need to be inside something I can turn off, because it's not. We're going to use our super handy dandy, remember, the long way, 'View', 'Command Palette', but we're going to use a shortcut, ready? I'm trying to impress you. 'Command-Shift-P', look at that, just hanging out. 

Last thing recently used was Emmet, great. I'm going to type it in, going to call this one 'Drop-down'. Oh, look at that, hit 'Return' again, how casual, look at us. Wrapping tags, looking good, indenting, and let's turn it off. So we're going to say, drop-down is what I called it? Was it? Yeah. We'll say display:none, go away, buddy. So now if I save it all, it's gone. Now I want to turn it back on, so I would like, drop-down, turn back on, please, I want display:block. It turns into a block that we can see but only if this Nav Button's being hovered over, this Nav Button. So if the Nav Button has a Pseudo Class of Hover, then do this thing, and it will override the display from none, to become a block. Hey, does it work? Well, it works, but the format's a bit weird, let's try and fix that. 

He guesses how that was done, that's a hard thing, because like, this is a-- I only really remember it because I'm a teacher of it. What I end up doing is, end up doing it once, working through a tutorial, and then copying and pasting it over and over in lots of my projects. I understand how it works, but typing it out every time, that's pretty long. I'm not even sure how long we are at this video yet. That's probably what, I'm guessing 10 minutes maybe, maybe not that long. So to get it to position right, we're going to say, the position, instead of being Relative to each other, and all of his friends, we go to position is Absolute, and hopefully now, kind of, he's distanced himself, he's not relative to his buddies. And that's kind of working. 

To get these little guys that pop out, to fix them, we need to find our Nav Button. There he is there, remember we did this before, we said, now you're a position, Relative, you're going to work down; nice. We need to be a little wider, we need to do some centering, but that's the basics of it, right? And my Z index doesn't need to be adjusted, because this stuff is appearing afterwards. So it was on top, but we might have to go and say, just in case, you might have to say, your drop-down menu has a Z index of 1, just to get them-- or 99, just above 0. 

What we want to do now is we want it to push down a bit. So we're going to say, this drop-down menu-- now we're not going to use margin, remember, because margin left a gap that this enclosed. So we're going to use Padding, we'll do Padding Top. And we'll add a bit; how much? 20 pixels, let's see how that goes. Getting there, and we want to center all these Nav buttons. So all of you guys-- can I do it just to the drop-down box? So these guys are all fine because they fit within their little boxes, but this guy here, we might have to say--

We'll try it together. So Text Align, we'll do Center. Yeah, did it for all the little internal guys as well. So that's nice, we might make those boxes wider. So the drop-down menu is going to be, can we do it to the drop-down menu? I doubt we can, if we say width, we're learning together, width of let's say 200 pixels just to see if we can do it. It is, kind of, yeah, it's totally working, but it's not forcing them to be a size, it's giving the box nice and big, and it's allowing them to be whatever size they like. That could work if it's just text, but it's kind of making the boxes weirdly sized. So, yes and no, it worked. 
So we're going to need a Compound Selector, to say, I would like the-- I want to style these Nav buttons, but not all of them, just the ones that are inside of the drop-down. So we use a space to say, this thing, inside of this thing. You're getting the hang of it, right? So I would like to say that there's a width of, 100 pixels, I thought it was big enough to fit all these guys, not big enough. 200 pixels, probably too big, I'll lift the two off. Going too fast. Here we go. I totally did it the wrong way around. So it's not drop-downs that are inside Nav buttons, it is the Nav buttons that are inside the drop-downs. Happens to the best of us, here we go. 

Now the 200 pixels are too big, so maybe 90. It's not big enough. 20, all right, that's perfect, maybe a little bit bigger. I'm going to leave that on two lines, and if we wanted to, because those lines are joining, I could use margin but it's going to open up a little gap, so I might just say, background color of these guys are going to be-- Background color. It's going to be slightly different, we're going to use white. So they're all white, color of the text. So color by itself, remember, changes the color of the text. I'm going to use this. Not working, so it has to be, not you. I should have left it there, but let's learn it. 

So if there is a drop-down inside-- I'll put the color down here, and I'm going to say, I'd like this, but I want there to be an A-tag, that's inside of a Nav Button, that's inside of a drop-down. I want you to do a color of that green, oh sorry, that magenta. There you go. We're getting there. Get rid of me now, I'm just kind of playing around trying to make it look nice. You can add your Hover Transition, you can play with your margin, kind of moving it over to the left if you want. I'm going to stop there though, because this video's getting along, and I'm just kind of mucking about, and it is 10 minutes to 11:00 at night, and I'll probably just start waffling. So let's finish up there, and I will see you in the morning.