CSS & HTML: Graphic Menus w/ Flickerless Image Swapping
Pure CSS Rollover Menu
In this article, we're going to learn how to create a menu bar featuring a mouse hover image swap using only CSS and regular static text hyperlinks, as demonstrated at the top of my Citrux Blogger template.
Eliminating the Flicker
First, I want to address an aesthetic problem that I see in many of today's rollover menus, which is the blank flicker that occurs as a result of slow loading hover graphics.
The green button represents the hover effect:
What you would see until the green button has completely downloaded is this:
This brief blankness between ready state and hover state is inevitably caused by the involvement of 2 separate files.
The most common way of attacking this problem is by preloading the images so that the browser will be able to draw them from the cache rather than having to download them on request. While this method seems viable enough, because web images are downloaded in threads rather than in perfect tandem, preloading still offers no guarantee that the hover graphics will indeed be cached by the time the menu is visibly ready for the user.
CSS Image Positioning
The better solution is to eliminate the involvement of multiple files, by stitching your graphics together and then positioning the single image using CSS. This is demonstrated in my menu bar. Notice there is never a flicker; the hover effect always responds instantly.
1. Join Your Images
Create your buttons in whatever graphics software you use. But rather than saving them as individual files, join them one on top of the other and save them as one image as shown:
You may use this button to follow this tutorial. Right-click on it and save it.
I'll be using the file name "button.gif" and I will be putting it in my root-level "images" folder.
2. Prepare The HTML
With your image file made, the next step is to code the menu. We'll use <a> elements for the menu items and apply the button image to them with CSS. The following is all you need to do as far as the menu structure.
<div id="menubar"> <a href="index.html"><span>Home Page</span></a> <a href="storefront.html"><span>Storefront</span></a> <a href="forums.html"><span>Forums</span></a> <a href="contact.html"><span>Contact Us</span></a> <div class="clear"></div> </div>
We create a <div> element and assign the name "menubar" to it, which will act as a container for the menu items. Inside the <div>, we insert the menu items, which are basic hyperlinks. There is no HTML coding that needs to be done in addition to what is seen above.
A Couple Of Things To Note
The text in each of the links above is wrapped in <span> tags. What this will do is allow us to place the link text in the centers of the buttons easily, with a result that will be consistent across different browsers.
Secondly, there is the extra <div>, which is assigned the class name "clear."
Each link needs to be specified the width and height of our image button. But links do not have this ability inherently. As a result, they need to be converted into "block" elements. But blocks automatically stack rather than float side by side. So we need to explicitly tell them to float. Floating, however, they will also cause any subsequent content to float along next to them. So we need to terminate the floating behavior immediately after the menu items. And we do this by "clearing" it. All of this is addressed in the CSS code to follow.
3. Set Up Your CSS File
All of the designing takes place in your CSS code. Create a new text file and name it "menu.css". Place this file in your root directory, and then link it to your web pages by placing the following <link/> element in your HTML files:
<head> <link rel="stylesheet" type="text/css" href="/menu.css" /> </head>
4. Implement The Menu Design
All we have to do now is write the CSS. Because the CSS code will be placed inside a file that is already designated as a Stylesheet with the above <link/> tag, we do not need to wrap the CSS code in <style> tags, as you may have seen being done in other people's source code. We can just go ahead and start writing the CSS markup right into the blank file without any additional protocol.
First we'll address the menubar element, which is the menu container. We'll give it a dark gray background color and some interior padding so the menu items are not right up against the edges; the padding is applied in pixels in a clockwise manner, i.e., top right bottom left.
#menubar
{ background: #313131; padding: 5px 5px 0 5px;
}
This should give you the following result:
Now we want to set up the menu items, which are the <a> elements. We can reference these as sub items of the menubar by preceding "a," for <a>, with "#menubar." First lets set up the dimensions. The menu graphic is 100 pixels wide and 64 pixels high. And since it contains two images vertically stacked, we need to divide the height by 2 to get the dimensions of the visible area of each menu item.
#menubar a
{ width: 100px; height: 32px;
}
As previously explained, we need to set them as block elements and float them in left to right order.
#menubar a
{ width: 100px; height: 32px;
display: block; float: left;
}
Also, we don't want the link text to be underlined, so we'll remove the text decoration.
#menubar a
{ width: 100px; height: 32px;
display: block; float: left;
text-decoration: none;
}
And we'll center the text and space out the menu items with some margins. Margins are applied in vertical horizontal order below.
#menubar a
{ width: 100px; height: 32px;
display: block; float: left;
text-decoration: none;
text-align: center; margin: 0 5px;
}
Now we just have to apply the menu graphic to it.
#menubar a
{ width: 100px; height: 32px;
display: block; float: left;
text-decoration: none;
text-align: center; margin: 0 5px;
background: url(images/button.gif);
}
Above is the finished CSS code for the initial ready state menu items.
In FireFox, this is what I have so far:
Notice the background no longer correctly contains the menu items. Instead, it's only 5 pixels high, which is just the amount of interior padding we gave it. This is a result of the floating menu items. We'll fix this at the end. You might not see this if you're on IE.
In applying the hover effect, we will use the same image file and simply move it within the confines of the visual area. Since the menu graphic for each button is 32 pixels high, we need to shift the image 32 pixels upward so that the hover image takes the place of the ready state image. To do this, add 0 as the horizontal displacement value and -32px as the vertical displacement value.
#menubar a:hover
{ background: url(images/button.gif) 0 -32px;
}
Above is the finished code for the hover effect.
You should now be seeing the green button when you hover over a menu item.
We now have to style the menu text. Other than font styling, we also need to position the text in the center of the menu items. We have already accomplished horizontal centering with the text-align property. Vertical positioning is where the <span> tags become of use. We can simply move the <span> tags to any position we would like using relative positioning. And we access the <span> elements as sub items of the <a> elements.
#menubar a span
{ font: bold 12px/12px arial; color: #fff;
position: relative; top: 11px;
}
The result thus far should be the following:
All that remains is to specify the "clear" behavior.
.clear
{ clear: both;
}
Notice "clear" is prefixed with a period rather than a number sign. That is because it is referenced by class rather than by id. Here is an article that expands upon this.
We now have a finished menu:
The Complete Code
Here is what you should have in your HTML files.
<head> <link rel="stylesheet" type="text/css" href="/menu.css" /> </head> ... <div id="menubar"> <a href="index.html"><span>Home Page</span></a> <a href="storefront.html"><span>Storefront</span></a> <a href="forums.html"><span>Forums</span></a> <a href="contact.html"><span>Contact Us</span></a> <div class="clear"></div> </div>
Here is what your menu.css file should finally look like.
#menubar
{ background: #313131; padding: 5px 5px 0 5px;
}
#menubar a
{ width: 100px; height: 32px;
display: block; float: left;
text-decoration: none;
text-align: center; margin: 0 5px;
background: url(images/button.gif);
}
#menubar a:hover
{ background: url(images/button.gif) 0 -32px;
}
#menubar a span
{ font: bold 12px/12px arial; color: #fff;
position: relative; top: 11px;
}
.clear
{ clear: both;
}
In the end, this trick is quite simple and quick to implement once you've become used to the process. If you have any questions, or suggestions as to how this could be improved, don't hesitate to use the form at the bottom of this page.
Continue Reading:
Also See:
Categories: CSS & HTML
Tags: flickerless . graphic menu . hover . image swap
Your thoughts
Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback" link, and copy the URL.
Comments
Share your thoughtsBe the first to comment on this article.