Image rollover menu
People often let image editors (Image Ready, Paint Shop Pro...) generate JavaScript image rollovers, but it's easy to make an image rollover without JS, using only CSS. Images will be preloaded, so there will be no delay during hover.
Links should be arranged in an unordered list:
<ul class="menu">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="services"><a href="#">Services</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
At first, it will not look so great.
The following CSS will make a decent image rollover navigation menu.
.menu {
margin: 0;
padding: 0;
width: 150px;
list-style: none;
background: #fff;
}
.menu li {
padding: 0;
margin: 0;
height: 39px;
list-style: none;
background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -9999px;
height: 39px;
background-repeat: no-repeat;
}
.home {background-image: url(images/rollover01.gif);}
.home a {background-image: url(images/rollover01a.gif);}
.about {background-image: url(images/rollover02.gif);}
.about a {background-image: url(images/rollover02a.gif);}
.services {background-image: url(images/rollover03.gif);}
.services a {background-image: url(images/rollover03a.gif);}
.contact {background-image: url(images/rollover04.gif);}
.contact a {background-image: url(images/rollover04a.gif);}
ul.menu li a:hover {background: none;}If we imagine the web page having a third dimension, background image of the list (.home) is below the link background (.home a), so the list background is one that will be visible on hover, while the link background will be visible at other times. Text indent property will hide the link text to those who can see CSS formatting, but it will leave it visible to those who can't see CSS. Now the menu looks like this:
For a horizontal navigation bar some tweaks are required:
.menu {
margin: 0;
padding: 0;
list-style: none;
background: #fff;
}
.menu li {
padding: 0;
margin: 0;
height: 39px;
margin-right: 1em;
list-style: none;
background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -9999px;
height: 39px;
background-repeat: no-repeat;
}
.home {background-image: url(images/rollover01.gif); width: 94px;}
.home a {background-image: url(images/rollover01a.gif);}
.about {background-image: url(images/rollover02.gif); width: 106px;}
.about a {background-image: url(images/rollover02a.gif);}
.services {background-image: url(images/rollover03.gif); width: 128px;}
.services a {background-image: url(images/rollover03a.gif);}
.contact {background-image: url(images/rollover04.gif); width: 122px;}
.contact a {background-image: url(images/rollover04a.gif);}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}Easy, and no JS required!
