Ever wonder how some people have those flawless navigations that catch your attention? They are quick to load, the rollovers aren’t glitchy, and no javascript is used. Wait, no javascript is used? What?! That’s right, this is accomplishable in a very easy and painless way. This way is by using the power of CSS!
The Basics
First off before any CSS is implemented, we must first figure out how to ‘create’ the navigation images. At first it’s going to sound weird, but there is a purpose for this madness! The examples I’m going to use will be from this blog to make this simple. First off, you want to create the navigation button. Your going to put the ‘regular’ button look on the left, and then duplicate it and place a copy of it exactly to the right of the regular button. Do whatever you want to the button on the right hand side because this is going to be your ‘rollover’ button. That’s right, we’ve made this regular, and rollover navigation button out of 1 image! Here is an example of my homepage regular/rollover button. Keep in mind the width of the full button, because later on we’ll need to know that for the CSS.
This will basically make loading times negligible and it will act as if it is a javascript branded rollover button. Still wondering how we are going to accomplish this? Here comes the CSS part.
The CSS
The CSS is actually quite basic here. First ill show the CSS, and then I will show how it works inside the XHTML code of the buttons. I’m sure there are a ton of ways to implement this next task I am about to show, but after you are familiar with it spice it up some and make it however you need. Ok, so you will need a little bit of CSS knowledge to understand this. What I do is create classes for my “a-href” tags. That way I can create a navigation button link and slap that class on it so it knows what to do. So as using my example above with the homepage, here is the CSS that is used to accomplish it. Ill break down each line so we know what its doing.
a.nav-homepage {
float: left;
width: 72px;
height: 43px;
background: url('../images/nav-home.jpg') no-repeat;
text-decoration: none;
margin-right: 20px;
}
a:hover.nav-homepage { background-position: -72px 0; text-decoration: none; }
a.nav-homepage --
Float: left;
// This is just used to fit into my navigation layout. Not really needed to make this technique work.
Width: 72px;
// This is important. The width is going to be HALF of actual button. So as we can see the full button is 144px. This means it will start out only showing the first 72px of the image. ( the left side )
Height: 43px;
// Nothing tricky about this. Just the height of the button your using.
Background: url(‘../images/nav-home.jpg’) no-repeat;
// This is just the link to where the FULL background image Is located. Nothing tricky here either. It must have the “no-repeat” attribute though. That is important because we don’t want to see multiple nav images floating around!
Text-decoration: none;
// This is another attribute you don’t REALLY need. More so just to fit my css/layout styles.
Margin-right: 20px;
// Again, not important. You don’t need this for the technique to work.
a:hover.nav-homepage –
// And this is where the magic starts! When the image is HOVERED over (a:hover), then do this set of instructions!
Background-position: -72px 0;
// So when its hovered, this move the image to the left 72 px! This does exactly what you think – shows the “rolled” over image that you created earlier. So in theory, it is basically ‘shifting’ the image to the right and left when its hovered over and left alone.
Text-decoration: none;
// Lastly, this may or may not be needed in your design to make it work. Most likely not, but once your familiar with this CSS, play with it and see what you get!
The XHTML
So you’ve got your CSS all laid out and ready to implement the XHTML side of it? Good, because this is the easiest part. I usually place my navigations in whats called ‘unordered’ lists tags. So basically all you must do is this.
<ul><li><a href="/" class="nav-homepage"></a></li></ul>
Just fill in the link that you want the button to go to and voila! The part in red, ‘nav-homepage’ is essential, otherwise nothing will work. You must set class=”your button classes”, whatever they may be. Feel free to make as many as you need. Just duplicate the CSS code, make your images, and then add the XHTML code. This is exactly how I do it with all of my navigation buttons above. Please feel free to contact me with any questions/comments regarding this topic and I will be glad to give my help/feedback.
- Michael Dick on May 25 said:
- Nice post man...really nice detail. Nice, background trick :)
