Start learning with our library of video tutorials taught by experts. Get started
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.
Icons are a very common part of site navigation, and although Native CSS capability have made it easier to create simple graphics through CSS, there it's going to be times when it just makes more sense to use an image for a certain icon or graphic. Of course, using images does increase site overhead, and it dramatically increases the number of requests made to the server based on how many images and icons you have. Those server requests can have an extremely negative effect on site performance, especially on mobile devices. So one way to get around that particular restriction is to use what's known as a CSS Sprite.
Take our dropdown menu that we created earlier. I've modified it a little bit and added some icons for each of the menu items. Now it will be pretty simple to create five separate icons and add them to our links through using a background image. However, it's a lot more efficient to just create one single image that contains all of the icons and then simply reposition the background image based on which link it's inside of. This reduces the amount of HTTP requests made, adds only one image for the browser to cache, and gives me only one image to create and maintain.
That's the idea behind CSS Sprites. Now I am going to switch over to Illustrator and show you the Sprite that I've created for this dropdown menu. Now if you want to take a closer look at it, it's in the assets folder in the 06_04 folder. So if you have Illustrator, feel free to open it up and follow along with me. So you will notice the sprites file is really, really tall. I am just going to zoom in on a couple of these icons, and you can see that I've got two versions of each one. I've got sort of a main version of it, and I've got sort of a desaturated version.
Also, I want to point out to you that these elements that have white are actually filled with white inside of it. The reason for that is this is going to be a transparent PNG file, so I want to be able to see through this but I don't want the white portion of this to be able to see through. These guide boxes that you are seeing here exactly 50 pixels by 50 pixels. So these are spaced out from each other, based on the size of them and in just sort of goes all the way down through each one of these icons. So the menu that we were looking at earlier was only showing you one image, but because it's only allowing you to display this portion at a time. Basically we just move this file up and down to display the icon that you are looking to display.
You might be wondering why I have them so far apart. They don't need to be that far apart. However, in certain situations you want to account for any padding or spacing that might be added to a image, so that's one of the reasons. The other reason is because they are spaced evenly apart, in theory it makes the math little bit easier. One of the things I really wanted to show you with this particular set of exercises is how CSS Sprites really kind of work in the real world--or at least how they work for me in the real world. I see a lot of tutorials and exercises out there where these sprites are lined right up against each other, they are perfectly aligned.
All you have to do is type in one specific value, and it pops in. It's really not the way it works, especially if you are trying to center an icon next to some text. Every single icon is different, so the visual center of that icon is going to be a little bit different. So the positioning will give us a starting point, but we're probably going to have to sort of refine that a little bit by nudging these icons up and down based on how we want it to appear next to the text. So, more on that when we actually get into it. So that's the Sprite that we are going to be using for a menu. In the next exercise, we are going to take a look at what we need to add to our CSS in order to actually use it.
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.