Join Joseph Lowery for an in-depth discussion in this video Implementing sprites, part of Site Navigation with CSS in Dreamweaver.
- View Offline
One technique for incorporating imagery with navigation is to use multiple graphic files--one for each link state: link visited, hover, and active. While effective, this method does require a number of file requests to the host server, which can quickly add up, increasing the bandwidth and response time. Another technique, referred to as sprites, uses a single image for all states and is accomplished with just a little CSS manipulation. Let's take a look at an example. Here I have the mission.htm file here, and as I roll over each of the main navigation items, you see that the background image, which is the star and the line, changes and the text also changes. But it's really the background image that we are looking at here. And this is a single image that is being repositioned using the CSS background position property.
Let's take a look at that actual image, which I have here. Now, you will notice that this has actually three different states, and we are only using the first two so far, but as I will show you in just a moment, you can easily add the third state. You can easily develop sprite images like this one in your favorite graphics editor, such as Photoshop or Fireworks. Let's go back and take a closer look at the CSS for the link and hover. Go back to my mission.htm page and open up our CSS Styles panel, and in the SprymenuBarVertical.css file, let's go down to the anchor tag called ul.menuBarVerticalanchor. And here you see the background image, and if I open it up into the Edit Rule, you can see that it's set up using the background position elements here, setting it to left and top. And that's going to show the very first image, which is that darker green gray star that we see here. Okay.
Let's take a look now at the hover state, and here you see that just a couple of rules down at ul.menuBarVertical a:hover, and it also covers the focus state as well. So, I will select that, and notice that there's not a second call for the background image here as you might suspect, but instead there is a background position. Let me see if I can open that up just a little bit, so you can see the full thing. There is the background-position property just repositioning the existing graphic. This value here is 272 pixels for the left, and how do you get that value? Well, let's go over and take a look at the actual graphic.
You can actually size this up either in your graphics program, or if you don't have that handy, you can do it within Dreamweaver. So, I have my image selected and my rulers are on. I am going to pull out a guide and have that lock to the start of the image. And now as I pull out a second rule, I am going to hold down the Command key on the Mac and you would hold down the Ctrl key on the PC. And as I do it, you can see the measurement there now is at 210-225 and it goes up to the end of the first graphic, which is 272. And that's the actual measurement that I want to use, but you set it in negative, because you are going to be pushing the graphic off to left, so it will actually start right here.
So, that's why the orange shows up on hover. So, we can use the same technique to set up a third state. I am going to go ahead and bring my guide over and hold down my Command key so I see at the end here, it's 540 pixels. So we see that it has a measurement of 544 pixels, so we'll use -544 pixels to position it for the third state. Let's switch back to our mission.htm file, and what we want to do is set it up so that since we are on the mission page that the Mission navigation item is shown as selected using that third section of the sprite.
So, we are going to create a new rule, and this will be a Compound rule, and again, we are going to target the ul.MenuBarVertical class, then look for the list item and the anchor tag. Now, I am going to add an additional class to this to indicate that it is the currently selected page. I will just call that current and click OK. And we go to the Background category and in the Background-position, we choose -544.
Now I am going to go ahead and put in a 0 here to avoid problems with some browsers. So, the other thing I want to do in this new rule is change the color for the type to match that background image, which is a medium gray of 666. So, with that done, let's go ahead and click OK, and the next step is to add that class that we talked about to the Mission tag here. So, I'll go into the Split view, close off the panel.
Let's go ahead and click on that to bring that in to view, and we want to add this as a class here. Now, you can use multiple classes in Dreamweaver, so I am just going to type a space and add a new class of current. And you can see as I start to type it, Dreamweaver uses code hints to pinpoint the exact one I am looking for. So I will go ahead and just hit Return. And let's flip back to Design view now, and because we are in Live view, you can see it's already been updated. I now have my third state showing with both text and graphics. Thanks to the CSS Background-position property, integrating different sprite positions into your navigation states is a very clean, and dare I say refreshing, approach.
- Using icons
- Navigating with Spry widgets
- Styling Spry menus
- Working with background images
- Implementing sprites
- Designing navigation with accessibility in mind
- Adding drop-down menus
- Developing graphical navigation with jQuery
- Creating pop-out vertical navigation
- Exploring CSS3 and HTML5 enhancements