Hi, welcome back. Guess what? We're going to do another, and our final, navigation bar together, in this code review. This one, though, is a little bit different, not only for the way we set things up, but because I want to talk to you about the accessibility of how many people make their navigation bars. The new way, I've used this way, is to create your navigation links as part of lists. So you can see, we already have it a little bit different over here. I've got an unordered list with one, two, three, four a list items, and some of those list items have unordered lists themselves. So while this is very common, there are some usability issues, when you realize, are these really lists? Because if not, that's a semantic tag we're using, that we may want to avoid. But it's so common, I wanna show it to you and let you play with it and make your own decisions. The other issue when we make this drop down navigation bar, has to do with the accessibility of people being able to hover over certain things that you wanna activate. I think we've all been there, when we've been in a webpage and we're trying to hover over something to click a link. And it keeps popping away because our hand is too shaky or we have to hover over three things at the same time. So again, while this is a technique I wanna share with you and help you to understand, I hope that you'll make sure that any applications you do, you do your best to make sure it's as accessible as possible. So again, let's start with this plain, kind of boring HTML code, and see if we can't get it to look like something a little bit more exciting. What we have here now is a horizontal navigation bar that's going to have drop down elements. So, when I go over Home, there's nothing extra to see, but, when I go over Pictures, you can see that I have three additional links I can try to do, and same with Recipes, and Contact, again, is all by itself. So how did I do this? How did I have it so that 2015, 14, and 13 don't show up unless I'm hovering? And the same with the recipes? Let's take a look. All right, I'm going to skip the body in the navigation because I think you know how to do all this. Instead, let's talk about the different lists themselves. So sorry, list items themselves in the links. So what I've done is I've gone in here, kind of so you can see both at the same time. And it's very faint, and I wish I had made a different color now. But I have a border between each one of these options. Now, it would have looked a little bit weird for me to have a border right here along the side. So what I needed to do is I went and I said you know what? For that last list item, the very last one, let's not put a border in. It's that little tiny tweaks that you can put in your code to make it look a little bit more professional. We also don't want borders on the sub items, right? Because there's nothing. Since those are blocked, we don't need borders on the side. So, I did the same thing over here, where I said, you know what? I don't want to use any borders over here. Pretty straight forward, I hope. Now, let's look again. I did simple styling on my navigation links, all right? The one thing I did put in is, again, I wanted to show you an example of using transition. The transition here is what slowly changes the color when you hover over, rather than a quick change. So you can see, it's a little bit more gradual than sudden, all right? The active is just like last time. Now, here's the interesting part. We're going to talk about the sub menus, all right? So how does the browser know when something's a sub menu? Well, it can look at the DOM, and it can look down and go, oh, I'm in navigation. And now I'm in an unordered list, and here I am in a list item. If it finds another list item lower down, it's kind of chaining down, it knows, oh, oh, I'm in a sub menu. So right here, it knows I'm in the nav, I'm inside of a list, and I just found an unordered list inside of there. So how we have it set up so that it doesn't show at the beginning is that I've set the position to absolute, and I've set the display to none. So it's not going to show up by default. Not going to happen. Okay? So, how do I get it so that it suddenly does show up if we wanna do something along that line? Well, we wanna find out how to change it here, when I hover over a list item that has an unordered list underneath it, change that display from none to block. So, these two lines of code right here, this is really setting it up. So that when I go over here, by default, display is none, but when I hover, display becomes block. It's a very simple, very short code, very powerful concept to understand. So I've shown you a few different ways that you can style your navigation bars. We have horizontal, we have vertical, we have drop down. I really hope that you'll pick one that you feel the most comfortable with, or actually really, the most excited about, and create one for your final project here in this CSS class. Don't worry if you run into problems. Post to the discussion board. Go online and look up answers. But what I really hope is that you can create something that you're proud of, that is both beautiful and accessible. Good luck.
