First I wrote this article under a wrong name. I’m so sorry and thankful for the hint, that this article is not about Sliding Doors but about Image Sprites. I edited the article and hope everything is correct now.
Since I had to create a navigation menu with fancy fonts today, I thought it might be helpful to show you how to create a navigation menu with a technique called «Image Sprites».
First of all check out this little demo, so you can imagine what we’re gonna build today. DEMO
What’s pretty cool with this technique is that you create images in Photoshop with the different button-states in one document. This means the browser has to load only one image per button. You could even go further and put all buttons in one file. But for this tutorial we’ll leave it with one image per button.
Create Images in Photoshop
In this tutorial we create three buttons: About – Portfolio – Contact. We want our buttons to be 100px x 30px. So let’s open up Photoshop and create a new image with a width of 100px and a height of 60px.
Since we want our navigation to have a height of 30px and we wanna get two states (normal and over) we have to double the height for the image of the button.
In the upper half of the image we create the normal state of the button.
After creating the normal state of the button we can create the over state right below the normal state. I just copied the button and changed the colors a bit. After doing that it should look something like that.
If you wanted to have more than two states, perhaps you want a different active state than the over state, you could put a third and maybe a fourth state below the other states. In this tutorial we’re using the over state also for the active state.
Now you have to create three buttons this way. I used only one Photoshop document and duplicated the text layers and inserted the text of the two other menu items.
Here’s how my layers palette looks like:
I safed the buttons as «btn_about.png», «btn_portfolio.png» and «btn_contact.png». You can choose whatever format and name you like. For SEO purposes it’s best to have the content of the buttons in the image names.
Building the Navigation in HTML
Now that we have all the images created we can start with the HTML.
We build a pretty standard unordered list with anchor tags in it. What’s maybe a bit special is that we give each list item an id and a title. To show you how it looks if a button is active, I gave the «About-button» a class of «current», which we’re going to define later.
<ul id="navigation">
<li><a href="#" id="btn_about" title="About" class="current">About</a></li>
<li><a href="#" id="btn_portfolio" title="Portfolio">Portfolio</a></li>
<li><a href="#" id="btn_contact" title="Contact">Contact</a></li>
</ul>
You can have a look at how it should look until now here.
Styling it with CSS
Now comes the fun part of the tutorial. Since we gave the navigation «ul» an id of «navigation» we can call all the list items in CSS. Now check the first line of the CSS:
#navigation li {display:inline; float:left; margin:0 20px 0 0; width:100px; height:30px;}
We want the list items to display inline, float to the left and have a left-margin of 20 px. We also have to set the width and height of the items.
For all the buttons we set the display to block, set a width of 100px, a line-height of 30px and move the text to nirvana.
#navigation li a {display:block; width:100px; line-height:30px; text-indent:-9999px;}
For each button we have to set the image we created as background-image.
#btn_about {background:url(images/btn_about.png) no-repeat;}
#btn_portfolio {background:url(images/btn_portfolio.png) no-repeat;}
#btn_contact {background:url(images/btn_contact.png) no-repeat;}
Now when we hover over the button with our mouse we just have to change the position of the background-images. We slide it 30 pixels up. And since our over state is the same as the active state, we can set the same background-position for both.
#navigation li a:hover, #navigation li a.current {background-position:0 -30px;}
Now check the whole CSS:
#navigation li {display:inline; float:left; margin:0 20px 0 0; width:100px; height:30px; line-height:30px;}
#navigation li a {display:block; width:100px; line-height:30px; text-indent:-9999px;}
#btn_about {background:url(images/btn_about.png) no-repeat;}
#btn_portfolio {background:url(images/btn_portfolio.png) no-repeat;}
#btn_contact {background:url(images/btn_contact.png) no-repeat;}
#navigation li a:hover, #navigation li a.current {background-position:0 -30px;}
We got it! I guess I showed you some pretty easy technique to build a navigation menu that uses images for buttons but is optimized for search engines ’cause we got the text of the buttons in the HTML.
So here’s a ZIP of the Sourcefiles.
Please let me know what you think of this technique, if you ever used it before and what’s your experience with it.
Leave a Reply
I always thought that sliding doors referred to the technique where you have a single image made up of two parts, so that you can have, for example, rounded corners for buttons or links with a short or long text using the same image.
See:
http://www.alistapart.com/articles/slidingdoors/ and http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/
This technique is called sprites, sliding doors is something completely different
@Erik and @Joost: I’m so sorry I was completely wrong. I’m gonna change the article right now.
I’m really ashamed for my mistake. But hey, if I didn’t published the article I would think this technique is called Sliding Doors forever.
I would not feel ashamed for the work you put into this article.
@Jordan: Thanx for the kind words.
Since you are creating and using sprites for you buttons why not create 1 sprite with all of you button images and use background positioning for the roll over states? This might reduce the overall images file size and would surely cut down on server calls for the page to load images.
@mike: You’re absolutely right. To keep it simple and understandable I thought it might be better to create one image per button.
But like you said it would reduce server requests if you would put all images together in one file.
@mike: Another advantage of creating one image for each button is that you can combine CSS properties like:
#navigation li a:hover, #navigation li a.current {background-position:0 -30px;}
Otherwise you had to set a background-position for each hover state. And that would be a lot more code for a bigger navigation. Or how would you solve that problem?
Thanks for the great read, some good points mentioned there.