Viewers: in countries Watching now:
Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.
In this exercise we're going to use single Sprite image to display the icons for our main menu items. We're going to focus on positioning the icons, modifying the existing links so that the icons will fit inside of them and then some of the considerations that we have to give for the different hover states so that our icons stay consistent. So I have the sprites.htm file open from the 06_05. I want to point out that inside the _assets folder in this same directory, we have the original icon_sprites file, it's an Illustrator file.
If you wanted to open that up, if you have Illustrator, and kind of use it as a reference as we work on this exercise, feel free to do so, that's fine. If you don't, don't worry, it doesn't detract from the exercise at all, it might be helpful to you to kind of really get a feel for why we're doing some of the things that we're doing if you can reference that file, okay? Now, before we get too deep into this, I have a confession to make. I could have made this exercise easier on you by using like just the static horizontal menu rather than this dropdown menu. Using a dropdown menu in Sprites like this really throws a lot of curveballs at you, and the reason that I chose this is because I really wanted you to see the pros and cons of using Sprites.
Sprites are a fantastic way of making your websites a little bit more efficient, but you should know that the more complex your sites get, the more things you have to consider and take into consideration when you start using Sprites. So I wanted to give you a real world flavor, if you will, of some of the things that you're going to run across as you start using them in your own projects. There are a couple of things I want to point out that's a little different from our previous horizontal dropdown menu. First off is the list items themselves, then have a little bit more spacing. As a matter of fact, if I were to preview this page in the browser, you can see what I am talking about, they're spaced out a little bit more.
The reason for that is the icons are going to show up right beside these guys, and if they were real close together, it would look very crowded, because we're going to have to give a little bit more space here. So I just decided to space them out just a tad bit more. Also in the source code, the menus are structured just a little differently. The class current is now on the list items instead of the links themselves, that's going to help us target a few things. Each of the menu items that has an icon also has a class that identifies it. So we have home, we have products, we have blog, we have about, we have contact, and that's what we're going to use to target those so we know where to put the Sprite icons.
So now we're ready to start. The first thing I am going to do is I am going to go up, and I am going to start just displaying sort of a default Sprite, if you will. So we're going to be using positioning in just a little bit to show exactly the icon we want, but we're just going to have a sort of a starter Sprite show up, if you will, and that's going to be global for all of our links. So I am going to go up to the li a selector, and I am going to type in background. When you're dealing with Sprites, you're doing a background image, so I am going to do background:url, and I'll say _images/icon_sprites_25.png, so icon_sprites_25.png, and then close your parentheses.
And then this next part is really important here, I am going to say no-repeat, and I am going to do positioning of 2 pixels and 7 pixels. Now, the 2 pixels is the horizontal positioning, the 7 pixels is the vertical positioning. You might wonder, well, how did you arrive at those magic numbers? I'll be honest with you, trial and error. I usually put an icon in and say 0, 0, which is the default top left-hand corner, and then I just tweak the values, because every icon is different and getting it to line up vertically centered with some text is not always the easiest thing in the world to do, regardless of how well you structure your icons in the beginning.
All right, so I am going to save this, go back into the browser, and preview that. And all right, there are all of my icons. Now, that's not quite looking the way I want, the icons and text are running over each other, so I have to add a little bit of spacing to my links. I am going to go back into my li a selector here, and then on the next line I am going to go ahead and add some padding, and I am going to add padding: 0 for top, 1 em for right, 0 for bottom and then 2 ems for the left. So the 2 ems of padding on the left are going to give me enough room for the icon, the 1 em padding on the right is going to give me enough space on the right to where the spacing doesn't look entirely unequal. So I am going to save that, preview that again.
That looks a lot better, so now they're spacing out. Now, don't worry too much about how the house isn't lined up, that's not a big deal, remember for the Home link, it's not for these guys, and we are going to be positioning all of those icons individually in just a moment. So with that being saved, I am going to go back in, and I am just going to go ahead and copy this value of the URL. I am not going to copy the whole background declaration, I am going to copy this, because the icons are showing up right now for my links, but they're not showing up when they're hovered over and they're not showing up for current. Now, these guys already have existing background declarations, and they have colors in them that I don't want to overwrite.
So I am just going to add the URL to those, instead of replacing them. So I am going to go ahead and paste, and both of those directly after the color, very important, all right? So I am going to save that, preview that, and now my Home is showing up. And I told you the house would show up in the right place, so it's there all right, and it's also now in all of those hovers. You're also going to notice it's on all the submenus, too, so eventually we're going to have to get rid of it on those submenus. So the next thing we need to do is go in and target all of those individual ones.
So we're going to have to write some new selectors, and I am going to go ahead and warn you, yes, this is going to be a tad tedious, okay, so just follow with me. What we're going to do is we're going to use the class attribute that we have on each of these links to display the proper Sprite by using the background-position property. So I am going to do li a.home, so I am saying any link with the class of home inside of the list item. All right, now, rather than going ahead and replacing the background image every single time, we don't want to do that, we're just going to move it. We're not submitting another request to the server, we're just saying, hey, take the image you've already got there and move it, right? So I am going to type in this time background-position, background-position.
Now, the first value I pass is the horizontal position, the second value I pass is the vertical position, so I am going to say 2 pixels, and then 7 pixels, so 2 pixels, and 7 pixels. Now, that is what we had as the default, but I went ahead and set that, in case for rollovers and things like that, you want to be explicit, all right? Then I am going to go ahead and close that. Now, unfortunately we're going to have to do three versions of each of these. We're going to have to do the static non-interactive version, a rollover version, and then a current version. Now, why are we having to do all three? Well, I told you it would be a lot easier on you if I used a different menu.
Again, if I preview this, I want to show you something. Whenever we hover over one of these top level links, the link actually goes up. You can see the icon do that, you see how it jumps? That's because the link itself is jumping up. The text is staying in the same place because we have coded the padding to do that, but that doesn't mean that the link itself isn't still going up. So we can't use the same positioning values, we're actually going to have to figure out how far that's traveling and then account for it, which is really fun. So thankfully, I've done the math for you, and let's go in and just write a couple of more selectors here.
So after li a.home, I am going to type in li a.home:hover, .topmenu li:hover>a.home. Boy, that sounds fun to say, doesn't it? Okay, so what am I targeting here? Well, anytime this home link is hovered over, and anytime that the list item that it is inside of is also hovered over. Okay, so that's covering the link being hovered over, it's covering the list item being hovered over as well, because remember the list item being hovered over is what triggers the submenu to appear.
I am basically accounting for both of those instances now, because they both need the exact same values. For the home one, it's kind of odd, the home one actually uses those exact same value, it's the only one that does. And then I have one more selector to write for that, and this one is also a doozy. So I also have to account for the current icons. Now, if you remember from looking at the Illustrator file--let me just switch over to it real quick-- there are two versions of these icons, there is the static version, and then there is sort of this desaturated version.
It's the desaturated version that I want to show in this current page indicator. So we have to account for that for each one of these icons. So I am going to say .current a.home, .current a:hover.home, .topmenu--bear with me, we're almost done--li.current:hover a.home. Man, that's a lot, right? Well, let's go over each one of these.
Again, when the homepage is current, when the homepage being current is hovered over, and when the list item that is current is being hovered over, and home is also. So each one of those is triggering a different state above it in the menu, so I am going to go ahead and even all of those out, and this time I am going to use a different background-position. Now, to make life easier on you, you could copy and paste this, I think I will, and rather than 2 and 7, this time I am going to do 2 and -68.
Now, that's one of the interesting things about working with this background positioning. If you want to go down the page, you have to use negative values. So instead of going up, which is positive values, we want to go down which uses negative values. So that's why here we're doing -68. So again, if I save this, go back in my browser, test that, now I am seeing the desaturated Home show up, which is perfect. And I've got to be honest with you, these values that I am giving you, I had to tweak those values, and I fully expect that when you start using Sprites, especially to do icons on different pieces of text, you're going to have a value that you think is the value you want to use, and then you're going to end up tweaking it just a little bit to get it positioned in exactly the right spot.
Now, I am going to highlight this whole section of code here and copy that, and I am going to paste it below it. And the reason for that is because we have a lot more of these to do. Please don't leave this exercise yet. Don't hit the Stop button and then go do something else. I promise you I am going to make this quick for you, okay? Let's go ahead and do products next. So we'll just do one more, okay? I want you to see what it's like when you have to position another one, and so for each one of these I am going to change the word home to products. So that's the nice thing about it is once you get this sort of thing set up, you're really just going in and doing the same thing each time and just swapping out the class name.
And this is a very complex menu. I doubt most of your menus will really require you to do this much work. All right, now let's talk about the positioning that we need for products. If I go down into Illustrator--and let me just bring up my Transform panel--if I go down into Illustrator, and I click on one of these, I get a Y value for this, and I can use that Y value as a starting point. And of course, I am going to offset that for the top, and you can see it's at about 152.
So I can put in -152, and I know that's going to show up, then I would just tweak it from there, and that's exactly what I did for these. So for products, I am going to keep the two pixels for X consistent, that will be consistent for all of them. So -146 is the value I came up for that. I am going to do this just a tad bit different for the hover. For hover I am going to do -141. Now, why is that? Our links jump up when we roll over them. They actually jump up by computed 5 pixels, so that's why I am subtracting 5 pixels from the value of the normal one so that it would move up with it.
It's going to look like it's not moving at all, but in fact, it's moving down, but by moving down it stays in the same place while the rollover moves up. So there are a lot of little things like that that you have to consider when you start using Sprites. All right, the next thing I am going to do is for the current indicator, which we won't see because we don't have that class applied to it, we're going to do that one at 226, and you'll just have to trust me that, that goes down to the next sort of desaturated one. All right, I am going to save that, preview it, and yeah, there is my Products, it shows up, and notice when I hover over it, it does not move. Well, it does, but it just moves down when the rest of the rollover moves up, so perfect. You have to play around those values and arrive at exactly what you're looking for, but it's really not as tedious as it seems.
Now, to make life easier on all of us, if you scroll all the way down to the end of the code, you're going to find a little present that I have made for you. This is all the rest of these. So I am not going to make you hand code all of those, I am going to cut those out of the comment down there at the bottom, I'll get rid of that comment, and then below the existing ones which we lovingly handcrafted, I am going to paste those in. So I am going to save that, go back into my browser, and refresh, and now there is all my individual icons and rolling over and moving just fine. Now, feel free to tweak the positioning if you want to move them up or down a little bit, kind of play around with the values that I have in there. Just be sure to change the offset value, too, so that it doesn't shift up or down when you rollover them.
Now, we're almost finished, and this has been a long exercise, we're almost done, but there is one last thing we need to take care of. You'll notice as we hover over this, that icon, that default icon is still showing up down there, so we need to go ahead and get rid of that. So I am going to go back into my code, and I am going to go find the selectors that drive the submenu. So what I am going to do is I am going to find the submenu li selector, and I am going to add a margin to that. So the reason I am going to add a margin of 0 to it is because I didn't like the additional spacing that the margins that I put up on the li were causing that, so I chose margin: 0.
So if I save and refresh that, you can see now those menus are now shrink wrapped again back to their content, which is what I was going for. And the next thing I need to do is get rid of the default icons. I can do that using this selector right here, ul.submenu li a. And what I am going to do here is just add a background to it, and I am going to keep the background the same sort of brown color that we've been using, and I am just going to do #916A31, and that's going to overwrite the background above it that contains the image.
So I am going to save that, refresh the page, and now our submenus no longer have that default icon. Excellent, take a deep breath. Most of the time when I show somebody how to use CSS Sprites--and I've done it in earlier titles so you may have seen that already--I basically show a simple example that's really easy for people to position. However, for this course I really wanted to show you some things that can trip you up when you're adding Sprites to navigation menus. CSS Sprites are a fantastic way to save yourself some time and create a more efficient site.
You just have to be fully aware of how they fit into your menu structure and then plan accordingly.
There are currently no FAQs about CSS: Styling Navigation.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.