Drop down menu using CSS

Welcome to the String Weaver tutorial. My name is Daniel Walter Scott and I'm  A trainer here at Bring Your Own Laptop. In this tutorial, we're gonna look at how  to create a menu and a dropdown menu. Now, there are a couple of different ways  to create a menu on a website. Um, I prefer the full CSS controlled, um, dropdown menu. Um, the reasons are is that it works good on mobile  and Google likes it.

Um, there are lots of other tools online  and lots of other tutorials showing you  how to do a dropdown menu. Now, my only advice is to double check  that they work on a mobile device  and to make sure that Google likes them. There are lots of technologies  or older technologies that have kind of come  and gone that don't really work anymore  or not as good as what I think the CSS menu does. So to do it, if you are jumping into this tutorial  and you haven't done the tutorial series, um,  the big thing you need to note is  that you need an ordered list. So I've got a home, uh, link to a homepage, a link  to about us page, and they're in this thing called an  ordered list, which is this button down here,  the bullet points, this ordered list. Okay, I wanna have a quick little look at this in code view  just so that everyone's remembers what it looks like.

So I'm in source code under index. You can see there's my ordered list. You can see it opens there and closes there inside of there. So, uh, sorry, unordered list, which is ul. Okay? Which is the bullet points and inside  of here all the list items.

Okay, inside my list. So these are the bullet points themselves. So this is the list, this is the bullet points themselves. We need to understand this a tiny bit  so we can create the right CSS to make this work. And what we'll do as well is if you're finding this tutorial  a little long, which kind of is this one, um, you can,  I'll add in the notes of, um, below the video, um, a link  to a shortcut to a working version. So you can maybe pick that apart and use that instead.

Alright, so I'm gonna back to design view. First thing I would like to do is I'd like to  remove the bullet points. Okay? It's still gonna be an ordered list,  unor, uh, unordered list. But I wanna remove the bullet points in the padding  around the outside so I can do that with my CSS styles. So I'm gonna go to my CSS designer, I'm going  to create a new selector.

So I hit the little plus button on selectors. Now it's gonna default to something I don't want. So I'm gonna type in over the top hash nav,  which is my navigation. If you are working on a completely different website  and not the one in the tutorial, you've gotta make sure  that the name we've got nav is the same  of this div tag that we've created. We've called ours nav, so you need  to make sure that's the same name. And then we're gonna look at a ul,  which is our unordered list, which is bullet points.

And there's a couple of things. I'm gonna hit enter. What I'd like to do to it is I'd like  to remove all the margins and padding. 'cause by default, uh, it has padding a margin to kind  of push it away from the edges. And you can see it's quite far away from the edge. Here.

We will move the padding and the margins. So I'm gonna scroll down here. I'm going to to hit this little link icon to save some time. You link and change this one to zero. It changes the height left, right  and bottom at the same time. So it's gonna be zero pixels.

You can see they all become zero pixels. And you can see over here it's removed the padding from the  top and the bottom and it's moved left and right. So sorry, sorry, the margin left and right. Let's look at the same for the padding. So I'm gonna go zero pixels, okay? Oh, should have my little link icon,  zero pixels and should do them all.

And now you can see it's pushed  all the way to the edge here. Okay, the next thing we need to do is  remove the bullet points. You can see them over here on the left hand  side hanging out the edge there. So we need to remove those to do it. We need to make sure we are styling our nav  ul on all the list. If you lose that, you can't find it, make sure go back  to main css.

Okay, I'll click your CSS sheet. Scroll all to the bottom. All the way to the bottom. And there's nav UL. So I'm looking for the one called list style type  and underneath it, okay, I'm gonna pick none  and then click enter on my  keyboard into twice on my keyboard. I know in an earlier version, I can't remember exactly  where, but it was down at other,  I think it was right down the bottom and other.

So you might have to have a look around,  but you're looking for list style type  and switch it to numb. And you'll notice when I click out here, okay,  the bullet points have been removed, okay? So the full stops have gone. Let's move on to the next bit. The next thing we need to do is look at stacking these on  side by side, the moment that underneath each other. So what we need to do in CSS is get 'em to stack, um, left  and right along the top rather than on top of each other.

Okay? So to do that we need to create a new selector. And this one is called hash nav. Okay? The name of my div tag. And we're gonna use the LI, sorry, LI, okay,  which is our list item.

Okay? So looking code view, we've worked, um,  we're working on these guys here. We're gonna style these guys, the allies. So what do we want to do them? Um, there's nav ally. I'd like it to float to the left, floating to the left.

It's towards the top, just underneath padding and margins. There is float. I'm gonna get to this one. First little icon that says float left. You'll notice they all stack next to each other. One of the problems is, is that  because these guys are floating left,  this text box ends up trying to join it up in the list.

Now, to fix that, we need to add a height to the navigation. So click on your nav and an early tutorial. I showed you how to remove all your height, okay? But for the navigation, it's really common  to have a physical height for it. So for this nav, I'm going to give it a height, okay? Of pixels and I'm gonna give it 22 pixels, okay?

Just give it some height. Now don't worry if these don't  quite display correctly in design view  and Dreamweaver, give it a preview in um, Chrome,  save it and you'll notice it looks,  it looks fine in here except for the butted up right next  to each other, but we'll fix that. All right? The next thing we're gonna do is try  and get some space between these buttons. Add a bit of a background color to them  so they look more like a button. Um, let's do that.

We do, we need to create a selector  called nav and it's a,  a is the um, active link. Okay? And so we're styling all the links in the nav bar  and I'd like to do a couple things to it. I'd like to put a background color around it. So I'm gonna skip down the background color,  pick a color and color. Okay, I'm also going to look at right to the top here.

We need to change the display to block just so  that we've got more of an area to click. So it's not just a text that's clickable, it's the whole um,  background part of the um, box there. Next thing we'll look at is putting our padding around it. So I'm gonna put a padding at the top of five. I'm gonna put a bottom of five. I'm gonna put a left hand of 20  and a right hand of 20 as well.

Okay? And doesn't display perfectly here,  but if I prevent a browser, yes, saving it. Um, you'll notice. There we go. We've got some, we've got our links,  but they've got more of a background area now. Okay, let's look at the next bit.

Next thing we're gonna do is, um, in the same one,  so nav A you can go through in here is  where you can pick your specific font and color. Um, so I'm gonna go through  and pick a color of white for my text. I'm in this text option, uh, font family. Gonna leave that alone. Font style, font size. I'm gonna go through and change it to eams, okay?

And in eams I'm going to use, uh, I'll use  0.9 eams, okay? To go about that sort of size. Now if you've got an underline under your text  and you'll get rid of that, you can hit this one  that says text decoration and use none for that. Preview a browser. Okay,  I've got my text that's white, it's uh, 0.9 EAMS  and no underline and the links are working. I'm jumping from page to page.

And one thing I have noticed is that you can see that  my, I fixed it earlier. Um, but this text box is kind of pushed  to the right hand side here now. So if I preview in the browser, you can see it's kind  of switched over to the side. So to fix that, I've guessed a wrong height for my nav. So I'm gonna on my nav and the div tag, okay,  and the breadcrumbs and I said it to 22 earlier,  I'm gonna set it to a lot higher. So I'm gonna go up to 30 just so there's room  for all these buttons to fit inside there, okay?

Don't worry if it's still a little broken in. Um, Dreamweaver, it's really just making  sure it's right in Chrome. Okay? And you can see now it's lining up a whole lot better. Now the next one, uh, that I'd like  to do is I would like when people are looking at the website  and hovering above the different buttons, there's a bit bit  of a hover color change so they know where they're clicking. So to do that we need to create another class.

So, sorry, another um, selector. So I'm gonna go to the selectors panel hit plus. This one is gonna be called nav and then a space  and put in a colon hover. This just means this a tag, which is our active link. Okay? When I hover above it, I'd like it  to do whatever I tell it down the bottom here.

So I'm clicking enter and I'm gonna say I would like it  to do a background color of uh, just  to something a lot lighter. So this nav, okay, this, uh, active link  and it's been hovered across  inside this nav div is gonna apply this background color. Let's give that a try. So I'm gonna go preview my browser,  give it a hover, and you can see when I hover above it,  it changes to that nice hover color. Alright? Um, let's look at the next step.

All right, this next step is  to add the dropdown part of the menu. So to do it, it's a lot easier to turn your CSCS off  and work, um, with just raw HTML. So to do that, I go to view down to style rendering. And there's one that says display style. So this is gonna turn off all the CSS that we've created. So we're gonna have the basic HTML,  but none of the styling that goes along with it.

So I'm gonna turn that off and it all looks a bit sad,  but it makes it a little easier to work  with doing dropdown menu. So what I'm gonna do is I'm gonna add, um, I under home,  I'm gonna put a return in, I'm gonna put in products, okay? And I'm gonna turn this into a hyperlink. Now I don't have a page for this to go to yet,  so I should be, I should type in products to html,  but I don't have that page. A nice little workaround is  where it says link is put in a hash okay,  or a pound symbol put in that it will mean  that it watch up here. You can see it turns into an active link  and it just doesn't go anywhere.

But it's a placeholder until I um, build that page. So that's great. Um, let's preview it in a browser  and you'll see when you preview it in the browser,  it'll put the style back on so it looks back to normal. Okay? And I've got my little products page. Hey, it doesn't go anywhere 'cause I click on,  it doesn't go anywhere, but that's okay.

What I'd like to do now is have a dropdown menu for products  and we're gonna have let's say blue, green and red products. To do it. I'm gonna click enter under products  and I'm gonna put in a tab. Now I use the tab on my keyboard. You could use this down here. It's a little button, um, indent that.

So you can see the little, um, bullet point changes  to a slightly different one. This means it's a nested inside this products one. So I'm gonna do, uh, green, blue, and red. And what I'd like you to see is under code view is that, um,  and I'm gonna go to source code is  that I've got this overall ul okay, which is my honor list. And that has my homepage,  it has my about Us and contact us page. So there's my homepage, okay?

There's my products page  and there's my about and Contact us page. What we've done is we've created inside this list item,  so there's the open of this list for products. You can see there's the close of it there. Inside of it I've made another ul. So it's a little nested UL inside of a overall ul  and inside of this ul it's got its own little list. Okay?

So red, green, and blue. Um, so I'm gonna go back to the design view  and highlight green and add a link to it just  so it gets style nicely. Put a hash and a blue,  put a hash red, put a hash. All right. So next thing I'd like  to do is let's give it a preview and a browser. Okay?

You'll notice that they are  there and you can see them. Next thing I want to do is tide them. So they only appear when you roll over the  products button at the moment. They just there all the time. So to do that, let's create, um, in my main  css I'm gonna create a selector called nav. That's my called nav.

And I want the unordered lists that are inside  and inside another unordered list. Za. So it means that I've got this overall UL  and I've got this other UL that's inside of it. And I've created a class under main CSS that says  if I have a nav that is um, that is a list inside  of another list, I'd like to do these things  and I'd like it to go to display  and I'd like it to go to none, which is gonna hide it. And I also need to turn the position  from static to absolute. Hopefully.

Now if I give this a preview in the  browser, okay, it's gone. Problem is it's gone forever. Alright, to now turn it back on. What we need to do is create a selector that is, uh,  nav, okay, for my ul. So it's a unordered list, but I'd like the list objects. Okay?

When hover it on to show the  UL that's within them. Now you might have to copy and paste that one or uh, pause  or YouTube for a little bit to type that one. It's it's hash nav space, UL space ally, colon hover  space Greater than, less than, oh, can't remember space. ul. What I'd like  to this class to do is when that all ties together,  I would like it to go to and go to display and go to block. Block will actually show it even though  block sounds like it won't.

Okay, so let's give that a preview on a browser. So on a hover above it, it appears there. Okay? And there you have a dropdown menu. But one thing you'll notice is that they're stacked side  by side, which is not how a lot of people want them to work. They want to stack underneath it.

Now, to fix that, we need to do one last class. Okay? And sorry, one last selector. So we're gonna go into our selectors  and we are going to type in nav. We're gonna have the list items that are inside uls. Inside uls.

So that's these little dropdown parts. Okay? What I'd like to do with them is I'd like them to go  and at the moment, um, they're being told to float left. We did that in an earlier part of this tutorial. What I need to do now is say just these guys  ignore that float. So we're gonna go to float None, alright?

And that will turn that float left off  just for these little guides. So let's go to Preview and Chrome. Hopefully now when we hover above them,  they all stack on top of each other. Alright? Uh, that's it for this tutorial. If you found it a little bit hard to follow, um, I've, um,  I'll make the exercise files, um,  available in the notes below the video.

Um, and you can kind of cheat and grab the CSS  and customize it to your own needs. But if you're learning, uh, work your way through the list,  um, through the tutorial  because it is a great way to start understanding compounds,  selectors, and how they all kind of combine  to do different jobs. What I'll also do is I'll show you my CSS, um, panel  so you can kind of compare it to yours. I'll put it down in the notes as well so it makes it easier,  but we might as well do it in this video as well. Um, so I'm gonna go to main css, um, and go to code View. And you'll see down here,  here are all the CSS classes we've made.

So it's from here all the way down  to here are the ones we need, um, for our, uh, navigation. So, um, I'll kind of scroll through them  and you can pause YouTube if you are double checking it  against yours, or hopefully you'll be able  to see the, um, notes below. Last thing I'll show you is how  to turn your CSS styling back on. So go to view, down to style rendering  and turn display styles back on. All right, I'll see you in the next tutorial.