CSS Navigation

James Rogers
A free video tutorial from James Rogers
Creative Thinker at Udemy
4.7 instructor rating • 1 course • 1,575 students

Learn more from the full course

HTML and CSS: A Guide to Web Design

Learn how to create an attractive and functional responsive website, without overly complicated terms and ideas.

14:07:58 of on-demand video • Updated November 2015

  • take the structure and fundamentals learned to create simple, and complex websites for just about anything
  • take many CSS and HTML fundamentals from example to production
  • find and fix common errors that occur in the coding process
  • Create a responsive site from scratch, or retrofit an existing site
English [Auto] An important part of making any website successful is knowing how to combine your aged him and your success. Sometimes you can have things that look fairly complicated like horizontal navigation menus top of the page. Sometimes I have drop downs sometimes they won't. But in reality they're actually very easy to make at least on a basic level. When you start getting into two and three tiered drop downs. The CSSA gets a little more complicated. But for starters and what we're going to do we can keep it pretty basic. So go ahead and clear out your code. And I need to open up my C Ss so we can clear out our CSA as well. And let's just go ahead and do and an ordered list. I remember those from aged him out that's just do you well with a bunch of list items in it. So let's say home and we're going to create links on each one of these Let's create about four links so we're going to say home about services and contact me close your list. And now you see that we've got ourselves a nice list with linkable items that doesn't look very pretty by default list items are block items so they have an automatic break after each item. So you have your opening and your closing of your allies. Each of these items is going to stretch farther so that the item below it doesn't sit next to it. What we want to do is we want to make this list not look like a list. So the easiest way to do that is come into your styles and first you're going to target your unordered list which is the parent. And we're going to do a list style and we're going to say none right now is a circle. We don't want anything at all to show up. And if you were to just refresher right here you would see that the dogs disappear. Nothing else happened but the dogs disappeared. We had a margin of zero padding zero you'll notice now that it's jumped to the left. That's because list items have a natural indent so that they are not flush with paragraphs. So that's all well and good. But we still don't have a workable list yet or a workable Now bar. So what we want to do now is we need to target the list items the list items are. Each of these so and you're see this ally and what we're going to do is we're going to tell it to display in line what inline does is it tells it that we don't want it to be a block which stretches all the way. What inline does is it tells us that we want it to only be as wide as the link itself. The other way that you could do this is if you told that to float left you would get the same thing but you notice now that we don't have any of the spacing in between both ways work. It's kind of up to you which when you decide that you want to use. But either way is acceptable as long as you get to the end result. I typically go with flow just so that I know that all of my spacing is exactly the same in between each item. So now we can target the links themselves or we're going to do is we're actually going to tell the length that we want them to be displayed as blocks. Now since we're not using the N line on the other one and this is why I like to use the float so that I can tell it that I want to be a block. And we're going to give it a width let's say 60 pixels and actually we need to go a little bit more because 60 is not long enough for that section. So let's just say 80 right. So you can't see it quite yet how the spacing is working out. So let's go ahead and let's just give each of these background and let's give it some kind of nice blue color. This is very similar to what we did on the form box on the last lesson where we made the submit button. Pretty and let's say marginal right so that we can see our spacing. Now you can see that each of these links is actually the same size. So let's add some padding. I would say text decoration. None. That gets rid of the underline maybe I want my color to be white and we want our text to be in the center. Maybe we want find family to be something else. Let's say we want to text shadow of wine wine and it's black and we're going to do these kind of fast because we've been through all of these and previous lessons and you can see now we've run into an issue because this particular font family is a little larger than the Times New Roman. So we actually need to increase our links a little bit here so let's just say 100. Just give it a nice look and let's say we want border really is 5 you get some nice rounded button. This looks really good. So that looks great except that now they don't do anything. They are linked. You can see the cursor change but we needed to do something when we're hovering over it. So we don't need to rewrite all of our styles because the hover is lower in the CSSA it automatically assumes that it needs to carry all of these same styles into itself. And the only thing that we want different are the other things that we change in the code. So let's say I want my background to change to Gray and I can see that our link changes to Grey and that looks looks really nice. So that's a very simple way of doing and navigation using just a very simple unordered list. You see how much space this takes up on the front side almost none at all. And then there's some CSSA on the back which took our very normal looking list and turned it into this very spiffy one. How do we make it look even better. Well we can add some very basic CSSA animation. So on your first one great transition we're going to say point five seconds and then on the second one right transition and what this does is it tells the browser that there needs to be a transition for both states. This is the normal state. This is the hover state. Now if we do this you can see that there's a nice little subtle fade to grey is not as harsh as just an automatic change that looks a lot better and a lot more classy and you're not limited to color save. We have a box shadow So now we've got some kind of hazy look around our buttons they look like they're enlarging a little bit which is kind of cool looking. You can change the color of the text and if you wanted to you could actually instead of having the background change you could actually tell everything to fade out. When we do that with the opacity and and that gives you a whole different kind of effect. If you told the opacity to be zero then when you hover over it it would disappear completely and you're not limited to just item menus. You can use these animation commands on images on whole paragraphs if you wanted to have a paragraph disappear when someone asked over it for whatever reason. But these are just a couple of really nice subtle ways that you can make your normal navigation look a lot more fancy. And now with CSSA three which has been around for a couple of years you don't have to do stuff like this with Flash. You can keep it all. SS people in the browser and you don't even have to use images anymore which is really nice. So take this play with it because we're going to utilize this navigation in our project that we're going to be starting here in just a couple of lessons.