Hrvatski

printer friendly version

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!


Share this tutorial with your friends!





Branding & web design by Nela Dunato

Sign up NOW to get a BONUS brush set into your inbox!

You will also get notified when I add new free downloads. I won't spam you, I promise!

Facebook

Friends