I’ve been covering the image-based CSS menu now quite a bit, this being my third article of the sort. Menus are very important, and there’s so much that can be done with them that I figure I’d write an article on different variations to what is essentially the same menu. This article will cover something which I consider to be extremely useful to designers who wish to make dynamically-colored menus using images rather than text.
For example, let’s say you have your standard menu with 4 links: Home, Locations, About, Contact. Maybe you want to color each link differently, one red, one blue, one green, one orange. The hover state for all of them will be… let’s say white. You can go ahead and make 4 images (home red, locations blue, about green, contact orange) and then 4 additional hover state images bringing your total to 8. Fair enough, it’s not really a tough task to undertake, though I can help you cut that time in half.
You show your client the menu and he loves it. You continue working on the rest of the site and a few days later the client frantically calls you and says, “we need to change the the menu IMMEDIATELY! Our competitor’s menu has the same colors, plus our logo designer decided to use different colors and we want them to match!”
This kind of thing happens all the time, and if you’re using images instead of browser-rendered text it can start taking up more and more time to recreate those images again.
Another example is a menu for a site that lets users choose a theme, or perhaps a seasonal change to the site’s colors. Rather than making images for each of the themes, use this method.
All right, enough anecdotes, let’s get right to it. Most of this markup and CSS is from the first article in the series which means you can just refer to that if you need in-depth explanations of what’s going on.
The markup:
<ul id="menu">
<li id="selected" class="home"><a href="#">Home</a></li>
<li class="locations"><a href="#">Locations</a></li>
<li class="about"><a href="#">About Us</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
</ul>
Again, very short and sweet. The CSS is, for the most part, the same as the original with a slight variation which I’ll get to:
html {margin: 0; padding: 0;}
body {
margin: 0;
font-family: Arial;
background-color: white;
font-size: .75em;
color: #333;
}
a:link {color: white; text-decoration: none; font-weight: bold;}
a:hover {color: #87acee;}
ul#menu {
list-style: none;
margin: 0;
padding: 10px;
height: 25px;
background: #303136;
}
ul#menu li {
float: left;
display: inline;
height: 25px;
margin: 0 10px;
}
ul#menu li a {
display: block;
height: 25px;
text-indent: -999em;
}
.home a {background:white url(images/menu_home.png) 0 0 no-repeat; width: 67px;}
.locations a {background: red url(images/menu_locations.png) 0 0 no-repeat; width: 119px;}
.about a {background: orange url(images/menu_about.png) 0 0 no-repeat; width: 115px;}
.contact a {background: green url(images/menu_contact.png) 0 0 no-repeat; width: 136px;}
.home a:hover, ul#menu li.locations a:hover,
.about a:hover, ul#menu li.contact a:hover {background-color: white;}
As you can see it’s pretty much the same. The differences lie within the background color of the list item element in question. What we’re doing here is creating an image of the text with an alpha transparency.
This is what it would look like in Photoshop:
You don’t need a hover state image since that will be controlled strictly through the CSS. What you need is the transparent image. If you don’t know how to make it, I’ll quickly show you how in Photoshop.
Making the images
Step 1: Create a new layer (above the Background Layer) and give it the background color you’d like. I used #303136 for mine.
Step 2: Switch to the background layer and either make it transparent or hide its layer visibility. The point is you cannot have a locked layer at the base.
Step 3: Use the Type Tool and type out your menu word. Use a color that contrasts your background. I used #ffffff (white) for mine.
Step 4: Rasterize the layer (right click the layer in the layers panel, click rasterize type) and open up the layer’s blending options by right clicking the layer in the panel and then clicking “Blending Options…”
Step 5: In the advanced blending section of blending options, move the Fill Opacity slider to 0 and set the knockout to “shallow.”
That’s that. Crop it up to taste and save your file for web as PNG-24 (that’s important.) You can create the other menu item files in the same method.
Now when you want to change menu colors, you can do so in the CSS simply by changing the background-color, leaving the image intact, as such:
.your_item a {background: #56FD34 url(images/your_image.png) 0 0 no-repeat;}
.your_item a:hover {background-color: #9D14AB;}
What about IE6?
As you might have noticed, IE6 doesn’t play nice with this on account of using alpha-transparent PNGs to achieve the anti-aliased text effect. In order to fix this while maintaining valid CSS you’ll need to use ActiveX but do so in an IE6-specific stylesheet using conditionals. Here is the CSS you’ll put in your IE6 stylesheet:
ul#menu li a {position: relative;} /*Fix IE6 link bug on PNGs*/
.home a {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=images/menu_home.png, sizingMethod=image);
cursor: pointer;
}
.locations a {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=images/menu_locations.png, sizingMethod=image);
cursor: pointer;
}
.about a {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=images/menu_about.png, sizingMethod=image);
cursor: pointer;
}
.contact a {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=images/menu_contact.png, sizingMethod=image);
cursor: pointer;
}
We’re knocking out the background image on IE6 and replacing it with a Microsoft proprietary ActiveX filter. If you placed this in your IE stylesheet, you’ll need to tell the XHTML file to load it for IE6 only. Place the following inside your document’s <head> tags and replaced ie_styles.css with your stylesheet:
<!--[if lt IE 7]><link href="ie_styles.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
View the complete menu
This kind of technique is something you can get used to putting together on all your image-based menus to make life much easier on you. I was very thorough in this tutorial, so while it may seem like a lot to do, it’s actually the kind of thing you can get done in mere minutes.
