Topic: CSS Menu Rollover (Page 1 of 1)

http://www.codetown.org/test/

I threw this site together to test image only rollovers on a un-ordered list. I am not sure this is the way that image only rollovers should be done, so I am looking for a critique on the method here. I tested this in both IE and FireFox and it displayed correctly, but I think that there must be a better way to achomplish this.

I started off with the standard menu with some added hooks.

<div id="menu">

	<ul>

		<li id="news_menu" class="here"><a href="#">News</a></li>

		<li id="websites_menu"><a href="#">Websites</a></li>

		<li id="resume_menu"><a href="#">Resume</a></li>

	</ul>

</div>

Then I added the CSS to this.

#menu {

	position: absolute;

	top: 260px;

	left: 390px;

	list-style: none;

	margin: 0;

	padding: 0;

	border: none;

	width: 220px;

}



#menu a{

	display: block;

	color: #cc6;

	font-size: 0px;

	text-decoration: none;

	height: 55px;

}



#menu #news_menu a {background: url("news_menu.gif") transparent no-repeat top left;}

#menu #news_menu a:hover {background: url("news_menu_o.gif") transparent no-repeat top left;}



#menu #websites_menu a {background: url("websites_menu.gif") transparent no-repeat top left;}

#menu #websites_menu a:hover {background: url("websites_menu_o.gif") transparent no-repeat top left;}



#menu #resume_menu a {background: url("resume_menu.gif") transparent no-repeat top left;}

#menu #resume_menu a:hover {background: url("resume_menu_o.gif") transparent no-repeat top left;}

So, is this a good way to do this? or is this wrong?

<edit>Killing billions of line returns</edit>



(Edited by WarMage on 05-17-2004 22:47)

AFAIK, that is a standard way of achieving rollovers with CSS. I know there are others as well, but that should work fine.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | Keeper of the Juicy Bits

Wow, nice that I stumbled on that method then. Do you know where this is documented? I value my coding ability and all but if it has some kind of documentation behind it I would be interested in reading it.

This article from 'A List Apart' seems to pretty much talk about what you've got going on here with only one or two slight differences, but you may find it useful reading anywaym there's also a part II to that article that's good reading too, I recommend it.

Cheers,

Blaise

your still getting the typical ie "flicker" caused from a silly backgroud caching bug that ie has. I've found that ala's image sprites article : http://www.alistapart.com/articles/sprites/ works the best as far as css rollovers. Check it out.