Lessons

Lesson Info

Simple Dropdown Navigation

Hello you are you ready for the trickiest bit of web design we're going to do so far. It's a drop down menu seems easy and it is easy step by step real easy all together. Kind of a that's that thing. Okay. A little bit of CSS that we need to make it work, but we'll do it step by step together. Not as scary as I am threatening. That's what I'm doing. I need to be a little bit nonchalant about this so that Yeah, no, it's fine. It's easy. Let's just do it real quick and then you look at the length of the video and you're like, that's 20 minutes, 20 minutes. It's probably about that now. But anyway, drop down menu in the navigation all by itself. That's why we're doing it over here. Okay. So that we can just look at and it's pure yourself and you can keep it separate and then we'll fold it into the actual website we're building in the very next video. Alright, let's get started. Alright, we're going to do this one in isolation first and then in the next video we'll integrate it into our ro...

ar bikes, video, website, Sorry, so close down the website, let's make a brand new one. So we're gonna go file new, we're going to create two files, one is going to be html and one is going to be CSS and we'll keep this separate. Would be handy for you to keep for yourself as well that you've got a working dropdown menu or by yourself. So let's save it. Okay. Let's call this one. Drop down CSS menu. There's lots of ways of doing menus were doing it in CSS because it's something some of the skills we already know, we'll show you how to do it later on using j. Query. But this one is a really good, easy, easy ish. It's easy to understand. Okay, and this is going to be dot html. Okay. I'm going to make a second document that's going to be the CSS of the same name. Actually I'm going to call you get the same name to keep it clear. Alright, connected to So in here, exclamation mark. Return up here under title. We're going to say style. No, we're going to say link and we'll link the CSS we're going to call our something else, not style, we're going to call it. It's kind of doing some weird stuff. It's all right. I want a drop down menu. CSS. Nice. Alright. So I've connected these two, drag the tab over to the side so I can see them side by side. Alright. In our html let's first put in our crazy non crazy returns and let's put in a novel. Okay, just the nav container to put it all inside. We're not going to do it in super isolation. Just little isolation. Now in the last video, what we did is we put an a tag in and then we gave it a class name called my button and we started to look like a button. We're gonna do something similar here. We're going to instead of making an A tag and kind of like faking a box around it. We're actually going to do a div tag. Okay And put color it in and put the a tag inside of it. I'll show you what I mean. It'll just make our dropdown menu chunk easier. We're gonna make a div tag and we're gonna call this one never button. Okay And inside of that div tag, we're going to create an A tag. Okay. It's going to go to nowhere. Hash and this one is going to be called home. So we're putting the a tag. That's what we did in the last kind of way. We did our navigation, we made a tag and then put some padding around it and a background color in this case. We're going to do like a little rectangle, a little div tag and we're gonna fill it with a background color, very similar principle. So let's start that actually let's see what we've got so far. So I'm gonna save it. I'm going to go live, where did it go on my other screen and we have this pretty thing. Cool. So let's make it look like a button first. So over here we're going to say you can never um going to target the class first. So we're going to say never button, it's going to do a background color background color and we're going to pick anything scroll down, pick your favorite color. Lawn green looks good to me semicolon at the end. Okay so he's going to slowly build it up. Cool. We're going to give it some padding so we do petting All the way around and we'll do what we've done before 11 pixels and 25 in the top and bottom. We left and right, here we go. So it's got padding. Let's give it a width going to make mine width of I guess this is one of the big differences between doing with the a tag. The a tag was just the width of whatever it was. Okay in this case we actually had to devise a way to give it a size because it really wants to be 100% all the way across also I want to make sure the text alone is in the center. Alright, we're gonna start the color later on. We're going to leave it just so we can actually start building this thing. So let's create our three buttons. So we've got this little group here. Okay, home button, I'm gonna make another one And then I'll make a 3rd 1. So what I've got home this one here is going to be called products. This one here is going to be contact, contact us. Okay, so evenly spaced. Okay we should now have three little buttons. Cool. And because remember a tags are in line. Okay. Okay they're all stacked next to each other. These are opposite. Okay. These are block level. These are div tags. They stack on top of each other. Okay, so I want to stack them next to each other. I want to say you, my friend would like to display display in line, in line block. So it's a bit of both stacked next to each other. Awesome. But pushes each other out. Next thing I want to do is I want to build the little drop down. So what we're going to do is we are going to put it here so we can see it all the time. Okay. And then we're gonna turn it off by default until we get a pseudo class of hover on this product button, which is going to turn it back on again. Let's look at the real fundamentals of what we're doing. So first of all we need to put some stuff inside products. So after the a tag, but before the closing of the div that means it's going to be inside this box. Okay. And kind of we're going to get it to drop down out of that box after the word products. Okay, So I'm just going to put a couple of returns in to make it a little easier. So what's going to go in here? We're going to put a new container. Okay, so a new div tag and we're going to give it a name. I'm gonna call this one. What are we gonna call this one. The dropdown drop down. It's called a box. Just to try and don't be clear about what we're doing inside of this box, just like we did before. I want a bunch of these buttons. Okay. You can see how we can kind of getting into Narnia. Now I say Narnia, I mean inception, we're going into different levels. Okay? So navigation. There's one button, 2nd Button. This Middle one has the link, but it has another container just after that link. Okay. And we're calling a drop down box. We're gonna style it and we're going to pick a different color for it. And we're gonna have how many dropdown menus in here. Alright. Three. So inside of our button. Okay, our product button. We've got the little link that finishes and then before the whole button closes, We've got this other little group Okay, nested inside. We've called it drop down box and we've got one, 2, 3 Buttons inside. You're with me so far maybe? Yes, maybe I'm trying to make it look clean. Let's have a little look at how it is appearing. Ha you can kind of see what it's doing, right? It's putting these buttons inside this product button and it's kind of jammed in there. So what we'll do next is we'll just turn it off by default. So we've got this thing called? Drop down box. So let's target him. So we'll say drop down drop drop down even drop down books. Okay, what do we want to do with him? We want to display Okay, and we're gonna go display none, you're gone forever later bro. So we've done display, we've done other display, display, flex, display, block, display in line block, we haven't done none yet. What does it do to it just turns it off, it's gone and this is the trick right, we're going to turn it back on using the hover pseudo class. That's why we spent so long learning pseudo classes. It's going to come handier and handier as the class goes on. If the word products gone, you're like the text gone, it's probably because you accidentally had that kind of inside of there. Okay, it'll go, okay, It means to be outside of that dropdown box that you turn off just above it or just below it won't really matter. And what we might do is add some commenting because it would be just to explain to ourselves what does this thing do? So remember on my Mac, it's command four slash gives me my ford slash asterix and then ends with an asterix for slash on a pc. It's the same or similar. It's control forward slash and my forward slashes down by my question mark and in here I'm going to be really literal to my future self this Yeah, turns it off when the dropdowns being not used, That's his job. So now we want to turn it back on. Okay so I'm going to add a bit of CSS to say this turns it back on. Okay. What I want to do is the dropdown dropdown box. Now what I'd like to do is I'd like to turn it back on. Okay so display in the block. Okay so you can appear please block and none have a very similar kind of feel to the word don't they? But we kind of understand block now because of earlier classes in line block it's just a chunk of stuff. So at the moment these guys are fighting it out so what we can do is say this guy has only turned on when I hover above my nav button. Okay so my next button there it is there dot now button with a pseudo class of hover. Okay so when this thing gets hovered I'd like to then activate this. Okay. Which says display block and it has to be this way around this one. Can't be below this because remember it runs from the top first of all gets turned off then if this condition is met the hottest state it's gonna try it's going to trigger this class to do something else. Override that one to say now display block. Does that make sense? Let's have a little look it's not gonna be pretty, whoa where am I ready guys? I left him over there. He's missing abound. There we go. He's not where is he? I just forgot to save it. That's what I forgot to do. Come on dan. All right now test it ready hover hey, it appears in the wrong spot but it appears okay. Is doing some weird things. All right. So what it's doing is by default, all of these boxes here have a position of something called relative. They're all relative to each other. So when this guy's appears they all kind of unfold and they're like, well I'm relative to you and you're at the top. So I got to come down the bottom and then I'm gonna push everything else around. That might not explain it very well, but it's relative to his buddy to turn that off. You can say dear drop down box. I don't want you to be a position of relative. Okay, Which is that one? I want you to be a different one. Something called absolute. Okay, that's the opposite. It's the nemesis for relative it goes. I don't care where my buddies are. I'm just going to go where I'm told let's have a little look. There it is. It's kind of working right. At least it's not messing with my top menu. I need to stack them, but that's okay. So we told the drop down menu. Okay, that dropdown class. Remember a drop down box. We said actually drop down box b position of absolute okay. But what I'd like to do is I'd like to save them every button. Okay. I'd like to set you to relative Okay, so position to relative. I want these guys to be relative to each other. Okay. And it means these little guys are going to know where each other are and stack above each other. So the dropdown itself, the container Okay. Is said to absolute but the actual never buttons themselves know where each other are and they stack after each other. Now my friends is a pretty crude dropdown menu. Okay. On hover. Well, fancy it up a little bit but those are the mechanics for it basically you turn it off unless you have a pseudo class, it says Hover, activate me and then there's a bunch of playing around getting everything to line up. And if you're like me basically you're looking at this going, what does this all do? You can copy and paste this, keep it separate. Okay, so when you do start building a site just grab that whole chunk. Okay, actually grab the whole nav and grab this CSS. Okay, and just start from that if I'm honest, some of the time what I do and one of the things you might have to do is because ours is an isolation. Okay, this menu is appearing above this white background cause there's nothing down here sometimes what can happen is this appears and the home home home ends up being underneath the content. So you've got a big image here. Drop down menu appears underneath an easy fix for that is something called the Z index. Okay. And the Z index think of you've got X. Okay, and why? Okay. On your page we've talked about that Z is kind of coming towards you. Okay, So you can say actually I wanted to be a Z index of Okay, as long as it's one okay or above, if it's still not working, you can go up to 100 it just has to be high. Okay, basically everything is set to zero. Okay. And as long as you make it above one, it should work occasionally. There's times where you just needed to be 99 or something higher. Okay, As long as it's higher than zero, it's not going to change my one at the moment, but I thought I'd throw that in there because I always have problems with drop down menus diving behind things. Right, next thing I want to do is they're kind of overlapping that. So these buttons are kind of overlapping. So let's switch out the word home because it's confusing and more position the drop down menu a little bit over here instead of the word Home Home Home. Okay, we're going to put an item one. Come on, dee grab both of those ones. Item two, And I'll swap this last one out of three. Alright, same thing just with better numbers in there and let's do the positioning. So the dropdown box. I don't want it to be kind of like it depends I wanted to be down a little bit so if I use margin margin top. Okay and I say just go down like 10 pixels. Okay we're gonna probably run into a problem actually. Let's have a look. You 10 pixels did it. It's kind of lined up at the bottom there. It's hard because they're all the same color I'm not going to but what you could do is they all use nav button? Okay so they're all being that lawn green. You might create a second nav button. Okay maybe called drop down button and just give it a different color. Okay so that it's maybe a little clearer and apply it over here. Still needs all of this stuff. Okay but you might have two different colors or you could be fancy dan. Don't be fancy. Be a little fancy. Alright let's be a little bit fancy if there's a knob button that happens to appear inside a drop down box but only if it's inside of a drop down box. Change the background color. Alright and this one is going to be cadet blue. All right looks deal to me. Alright. Don't put in random characters. Let's have a little look cool. Alright fixed it. Now we put in 10 pixels. Let's say we put in 20 let's see what happens. Okay there's this weird bit where if I hover above it. If I go fast I can get to it. Okay but if I go slow there's this empty gap that goes ah okay which is a bit annoying. Okay so to get around that is because the drop down box, okay is we can use margin on that because the boxes around the outside the dropdown box is not giving it this color. Okay, there's green color is coming from the button itself, not the rapper box. The box doesn't have any sort of color. So I can use padding and nobody will notice. Okay that it's like an internal thing because it already had doesn't have any color. So what I might do is instead of doing margin top or do padding top and that's one of the things with padding, it's the inside of it. Right margin. Is the outside padding is the inside so hopefully it'll look the same. But see this area here. It's actually part of that div tag. Alright, so I hope that kind of made sense. Okay if we were using the dropdown menu to add the background color, it's not going to work because it would be some weird pushing out from that. So we use padding instead of margin. Now I want to push it that way a little bit to the left. Okay so you can use, negative margins or negative padding announced. Case it will can you do negative padding? I don't think you actually can ah let's try petting left and let's do negative, let's go negative 30 just to make a point. No, but you can do negative margin. Imagine Left -30. Save that. Let's give it a test. There you go. Move it across. Okay. I haven't quite got wine there yet, but depending on where you want it to sit. The other thing we might do is do a like a little rollover. Okay, we've done that before when we learned pseudo classes. So the nav buttons that are inside this dropdown box, we've changed the background color, but let's also actually let's change, we're kind of there. I want all of this but I want to add a hover. Okay, so when inside a drop down box, when there's a knob button that's been hovered, okay, I would like it to do something else. I'll pick a different random color in here. I'm going to pick my own random color, magenta ish, save it. Let's give it a go. Does it work? Hey, Okay, let's make it fade as well. Remember transition delay actually, duration is what we want, isn't it, Transition duration and put it in for 1/2. Once again, it's kind of long, it's a beautiful mix of colors. Um you can use milliseconds, is it? Yeah milliseconds. So one millisecond is probably too short. What is it? Is it thousands? I think it's thousands, so 500 is half a second. Okay, 1000 is a second, I think it's how many seconds work? You can see just twice as fast as one second and if you make it I don't know, something small like one millisecond. It's 10. of a second. Yeah, super quick. You won't even see it. So just I guess I just wanted to show you milliseconds because no real good reason. Alright. Alright. That's gonna be it. We've got the foundations in. So for this one to work we used div tag as a box with an A tag inside instead of just in the earlier on. I kept the A tag and we just styled that to keep things easier. Okay. It looks a little bit more complicated over here. Right. Which I could just do it with all the a tags. But did classes are needed. And you put the a tag inside of it then there's this nested group that we gave its own little name. Okay. And we turned it off, we said display none or it is there. Okay. And then later on we said actually if that drop down menu okay, has another button inside of it that gets hovered over, Change it from display none to display block. That turns it on. And then we had to play around with some of the positioning so absolute to get them to kind of push down from the bottom and then we use this relative positioning to get them to stack on top relative to each other. But you know that you just finished the video. Alright? As a recap. That's what That was. All right. We're gonna save this so file save all and let's close it all down. Okay? I'm going to close it down after the video starts. We'll do another one basically, but we'll fold it into the existing website because there are some little tricks to make sure that works. So yeah, let's do that in the next video.