CSS and (X)HTML lessons and tutorials
This tutorial follows A reactive image with CSS. I recommend that you read that one first before you get on with this one.
We will see here a menu composed of several links (buttons). This menu will be entirely graphic and each button will have its own behavior when hovered onto, each different from the others.
(View final result / View a variation / View a horizontal variation).
The traditional method is to cut up the general image into several files, each one corresponding to a button, standard and hovered onto. You must create two different images for each button, without counting the general image for background for the menu.
We will proceed with two different methods and use only one image for the menu and all its components. Only a part of the image is showed at the beginning, and the remainder of the image (hidden at the beginning) will show depending on the link that is hovered onto.
This idea was first used on the website Fast rollovers, no preload needed and was then re-used with the name Sliding Doors.
Both websites develop very elegant solutions to show a rollover on the buttons without having to preload the image first.
However, these methods don't work on all browsers (especially on Internet Explorer) and have been applied to only one button so far, same button and same hover effect. We will use this method to create a menu with all different buttons and, most of all, make this compatible with Internet Explorer, in spite of its bugs. Note: after trying it, it seems that this technique doesn't work on IE6/Windows 98: the browser still loads the image each time. the solution described in part two of this tutoriel. is more suitable
There are multiple advantages to this method:
To sum it up, tests on a real website have given these results: weight of images reduced by half, number of images going from about 20 to only one, and no more preload, the hover effect is immediate.
Here is the final menu that we will create (width: 300 px, height: 270 px):
As you can certainly guess, each button in the menu will be different from the others, showing when hovered onto a part that is more lighted than the background.
To get to this result, we will use this one image (width: 300 px, height: 540 px):
This image will be the background for the menu, but also the hovered part for each of the buttons.
The general idea is to use this image as a background for the menu (on a height of 270 px) and to move it upwards depending on each button.
For example, each button has a width of 30 px, I want to place the first background at -30 px, then -60 px, and so on and so forth... a different part of the image will be matched with each button.
View final result / View a variation / View a horizontal variation.
The HTML code is as a classic menu, based on a list (ul, li). Each link is defined with an id that will be defined in CSS. We added the Accesskey to make it accessible to all browsers.
HTML code: <ul> <li><a id="menu1" title="menu1" accesskey="1" href="#">Menu 1</a></li> <li><a id="menu2" title="menu2" accesskey="2" href="#">Menu 2</a></li> <li><a id="menu3" title="menu3" accesskey="3" href="#">Menu 3</a></li> <li><a id="menu4" title="menu4" accesskey="4" href="#">Menu 4</a></li> <li><a id="menu5" title="menu5" accesskey="5" href="#">Menu 5</a></li> <li><a id="menu6" title="menu6" accesskey="6" href="#">Menu 6</a></li> </ul>
And here is the CSS code that will define all behaviors:
CSS code:
ul, li { /* using a list for menu */
list-style-type: none; /* cleaning up the list */
margin:0;
padding:0;
}
ul {
position: absolute; /* positionning for IE5 et IE5.5 */
left: 20%;
top: 50px;
background: transparent url(image.jpg) top left no-repeat; /* general background for the menu */
height: 270px;
width: 300px;
text-align: center;
}
li {
display: inline; /* correction for IE5 et IE5.5 */
}
li a { /* buttons dimensions and definition */
display: block; /* block for <a> to give it its dimensions */
height: 40px;
width: 300px;
line-height: 40px; /* height of line to avoind paddings */
color: #E2C6BA;
font-size: 18px;
font-family: georgia, serif;
text-decoration: none;
}
li a:hover {
color: #43271B;
background: transparent url(image.jpg) top left no-repeat;
}
a#menu1:hover {
background-position: 0% -270px; /* move of background for each button */
}
a#menu2:hover {
background-position: 0% -310px;
}
a#menu3:hover {
background-position: 0% -350px;
}
a#menu4:hover {
background-position: 0% -390px;
}
a#menu5:hover {
background-position: 0% -430px;
}
a#menu6:hover {
background-position: 0% -470px;
}
NOTE: This menu was succesfully tested on PC with the following browsers: Internet Explorer 5, Internet Explorer 5.5, Internet Explorer 6, Opera 7, Mozilla 1.7, Mozilla Firebird 0.7, Mozilla Firefox 0.8 and 0.9, as well as under Mac with the browsers: Camino, Safari and Explorer, and under Linux with Mozilla Firefox 0.8 and Konqueror 3.2.2.
Attention: this menu doesn't work on very old browsers as Netscape 4 or Internet Explorer 3.
Raphaël GOETTER
www.alsacreations.com