In this session we address a member’s question about how to create a Thesis navigation menu that uses image sprites. We talk about how CSS image sprites are used, show what they look like on a website and how they can be used to create a nice navigation menu layout.
Rick: Okay so the next thing we’re going to talk about is a question that Cindy asked last week. And Cindy, I’m going to unmute your microphone here. Cindy, are you with me?
Cindy: I am.
Rick: Perfect. Okay so you sent me a couple of websites, right? This Turn Kindness On and No Ordinary Rollercoaster and another one and wondered how this stuff was created. I talked a little about sprites last week but after I’d finished talking about it, it became evident that I’ve never really done a good tutorial on how to do CSS sprites. And so, we’re going to talk about that here today. But before we start that, what is it about this that you’d like to replicate?
Cindy: Well, I really like Thesis but I think that the navigation, the Thesis navigation gives it away. In other words, when you get to a site, I can always tell if it’s Thesis because it all looks like this little boxes that goes across the top. So part of the question is to really get to something that looks like this but doesn’t look like Thesis and use Thesis. But I really like the way that it drops down to the pink and I like the way that you can roll over it and this is a Thesis site, by the way.
Rick: Yeah, I know.
Cindy: But it sure doesn’t look like one.
Rick: Well, and so just to you know, look behind the curtain here for a second, what they’ve done here is not particularly complicated and if we just take a look at their…let’s see, if we look at resources here for a second and look at their images, let’s see… where are we? So they have…where’s my background? That’s the first thing I want to look at. Okay, header background image. So if you can see this, this image right here, 17 by 176, this is an image that sits in the… that sits on the background of the site in body that just repeats itself and everything else just sits on top of it. So it looks like this is overlapping but actually, it’s… and visually, this is overlapping but structurally, it’s not overlapping because this is inside the body tag and not inside of any of the Thesis HTML structure. And then the 2nd thing they have going on here then is this is their Thesis header image, right? So they use the Thesis header image system for importing this.
And then they’ve got this stuff that they do for their menu. And we’re going to look at… it actually aren’t using nav menu one, it’s just sitting there. They are using…where did nav menu 2 go? Nav 2… this is the one they’re actually using. And so this is called an image sprite and what you have is… and in order to do it the way they’ve done it here, they’ve had to create you know, 5 image… 5 versions of their navigation menu, right? So they’ve got their link version of the menu and then they’ve got their hover version of the menu and then they’ve got their current version of the menu and then they’re… active… oh no, this is active version of the menu and then the parent version of the menu and then each one of these is slightly different than the other. But what they do then is they use this one image. It’s not a whole bunch of different images. It’s just one big image but each of these elements only displays part of the image and each condition displays a different part. So when you hover, what you’re really doing is you’re hovering over this part of the image right here. You know, its standard link state is this state right here which is what you see right now. As soon as you hover it, now you see this piece of it. When it’s the current, which is where it is here, Visit Our Blog, then you see this piece of it. And if you’re going to have a current hover then you see this one which is why it steps up because it’s moved a little bit. And then this is what you would see if you were looking at a parent page of that image.
And so… and they accomplish all of this by defining… by using the one background image but defining the piece of the background image that each of these menu items sees in each of its various states. And that’s what we’re going to talk about here today is how to create… well, not so much how to create an image sprite but how to use an image sprite once you have it created.
And so this is… and I’m also going to take advantage of this opportunity to demonstrate a couple of things with some plugins that I’ve written as well.