7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Styling Your Navigation

Before we get started with our first example of practical web animation, we need to style the navigation menu that we’re going to be animating. In this lesson, you will start with a basic HTML list and use CSS to give it the look you’re going for.

Related Links

3.1 Styling Your Navigation

Hello and welcome back to Practical Web Animation. As we move forward for the rest of this course our lessons are gonna be more geared towards the design of our projects and less about technique. Now obviously we're going to cover technique as we build these projects, otherwise we wouldn't be able to build them. But I want to focus on creating really nice usable modules or elements for your website and in this lesson, I want to start with something very very subtle. I want to start with a simple background fade. Now this is something we've already talked about when we did our refresher on CSS animation. But now I want to focus on creating something that looks nice that we could actually put on a website. So as you can see here we actually have a starting pin to work with so you can find the U.R.L. for that starter pin in your course notes. So the first thing we need to do when we open up our starter pen is click on the fork button to create a new copy of it so that we don't overwrite what's already there, and then we can get started customizing it however we want. So I'm on a new copy of it now I'm no longer overwriting the original. And as you can see here we have a nav element and inside that we have an unordered list with a class of main nav. This is usually how I structure my main navigation elements inside that unordered list we simply have a group of list items with an anchor tag in them, and we're going to take care of the styling the look and feel of this nav in our Our CSS. Now as you can see we've already applied some basic CSS to the body. We've given it a blue background color and white text. And you could, I mean, really depending on the design that you're going for, or you might just have the blue background for the header of your site, and maybe something different for the body, but for our purposes here we're just building the navigation. So I've set the background color blue, the color to white, and then just to cover all my bases I set the anchor tag colors to white. So all of our links are going to be white as well, now even though our navigation is an unordered list, I don't want it to look like a list. I don't want bullet points next to it. I don't want them stacked on top of each other. I want this to be a horizontal list. So let's start by pointing to our main nav element. Now you'll see our unordered list here has a class of main nav applied to it, so that's the class we're going to be targeting here, so we're going to point to dot main hyphen nav. And the first thing I wanna is get rid of the bullet points and we're gonna do that by setting the list-style for this list to none. And that gets rid of our bullet points but as you can see all of our list-items are still indented. We can get rid of that indent by setting padding left on the unordered list to zero. So now we basically just have a few block level elements with some text in them so let's continue styling this. First of all I want these list items to show up next to each other, I want to be a horizontal navigation. So we're gonna go to the list items inside that main now. So I'm going to point to .main-nav space, li to point to the individual list items, and I want those to float to the left. So now, as you can see, they're all stacked right up against each other, and obviously we don't want them touching like that. And we're gonna take care of that first of all by giving these list items a width and a height. So let's set the width here to one hundred forty pixels, and usually when I'm building these out I'll just play with those numbers a little bit until I get something that looks right. But I've already fiddled with the numbers a little bit here, so we're going to stick with a width of one hundred forty pixels and a height for these list items of thirty. Now we can't really see that height, we can't really see that width yet. In fact, it looks kind of bad right now, because there's a different amount of space in between some of these words. And if we put a background color on this list item, we'll be able to see why. So let's add a background color here for the list items themselves and I'm going to give it a value of four five A, which is just going to be a lighter shade of blue. And then I'm going to add a little bit of right margin to each of these buttons so that they're spaced out a little bit, so I'm going to add a margin right Property to that list item of about ten pixels. And now we can see how everything is aligned inside those buttons, because we've given it that background color, and we've separated them out a little bit. So we can see that our text is in the upper left hand corner of all of these buttons, but that's going to be an easy fix. First of all, we want to center our text. So we'll just go to the next line here and do text align and set that to center, and the easiest way to vertically align the text to the center is to set the line height to the same value as the height itself. So we can just copy this height property here and then type line, hyphen and then paste that so we have line height is thirty pixels. So now our text is vertically centered. Now keep in mind that that line height trick only works If there's one line of text. For example, if we had more text inside contact us, if we had enough text there so that it wrapped down to the second line, this line height check would not work. It only works if there is a single line of text inside that button, but that's what we have here so it works just fine. So now I want to make the text a little prettier. I don't want to use the default Times New Roman font, first of all. So let's go into our list items and let's set our font-family to, I'm gonna use Arial Narrow here, and then we'll use Arial, and sans serif as our back ups, and that looks better. I want to capitalize the text as well, so I'm going to set text hyphen transform to upper case. And I want to get rid of the underline, so will need to go into the anchor tags within those list items to set the text decorations, so let's skip a couple lines here and point to main nav space ally space a. And let set text decoration here to none and that should get rid of the underlines. So we're a little bit closer to what we were going for. I want to also maybe decrease the size of that text a little bit and you can do that inside the list item or inside the ink or tag. I'm going to go ahead and do it inside the list item and I'm going to do font size here and maybe set that to twelve pixels, and maybe bring that up to 14. Yeah that looks good. So leave that at 14 pixels and and we've got a good starting point now. Now one thing you'll notice is that the entire button isn't clickable. The text itself is clickable, but the rest of the button is not clickable, because the only clickable area is going to be the anchor tag inside The list item. The list item takes up 140 pixels of width and 30 pixels of height, but the anchor tag itself, since it is an inline item, only takes up as much room as it needs. And we can visualize that if we give our anchor tags a background color something bright and ugly like red, yhere we go. And we can think of that red background color as our clickable area of our button. And obviously it's not taking up nearly enough room, so one solution is to set the width and height of that anchor tag to the same with the height that we set for our list item, but we're going to see a problem if we try to do that. So if we go to our with here and set it to 140 pixels and our height to 30 pixels, you'll see that that doesn't change anything. And that's because an anchor tag by default is an inline item, is an inline element, and you cannot set the width and height of an inline element it has to be either inline block or block. So we're gonna set the display of our anchor tags inside our list items to block and suddenly the anchor tags take up the same amount of room as the list item itself. Now one common mistake that a lot of people make when they first start building a list like this if they haven't had a lot of experience with it Is they'll start. Let's go ahead and take off block here, and let's take off our width and height. And we'll do the same thing up here, we'll get rid of the width and height, and instead of setting everything with width and height. Let's go ahead and get rid of our line height as well. Instead of setting things that way they'll set the width and height based on padding, and if you want your buttons to be variable width based on how much text is in the button, then you might need to use padding to set the width and height. But if you set your padding on your list item you might come across some issues. So let's set our padding just for kicks to ten pixels, and we'll see that that gets our or gives our list item a nice large size there, and then let's say we go into our anchor tags within those list items, and we want to make it the same size, and we set our padding here as well to ten pixels. You'll see that that doesn't get us quite where we want to go because there's extra padding on the left and right. So maybe we could go in and try to set displayed to block because we don't really know what we're doing and we try that. And now we see that our buttons have gotten even a larger, and so that doesn't really get us where we're going, so another option if you want to do it that way is to just turn off the padding for your list item, and let the size of your anchor tags determine the within height and that works as well. So really you don't have to set the width and height for your list items we could go straight to our anchor tags, and let's get rid of our padding here and set the width and height again, so I'll set our width with 240 pixels. Because I want these to all be the same size, and we'll set our height here to 30 pixels. And now, if we were to turn off this background color, you'll see that the background color for our list items is still there and it It has expanded to take up as much room as the anchor tags themselves. So there are a couple of ways to make that whole block clickable that's just one of them. So now we come back to the problem of our text not being vertically centered so we just want to add A line height of 30 pixels there, and now our text is vertically centered as well. So now we've got everything to a good starting point for our animation. So now that we've got our CSS in place in the next lesson will go ahead and start Animating it. So make sure you save your code pen or just keep it right where it is and in the next video we'll pick up where we left off. Thank you for watching and I'll see then.

Back to the top