Topic: CSS Menu Rollover Pages that link to <a href="https://ozoneasylum.com/backlink?for=21838" title="Pages that link to Topic: CSS Menu Rollover" rel="nofollow" >Topic: CSS Menu Rollover\

 
Author Thread
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 05-17-2004 22:46 Edit Quote

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.

code:
<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.

code:
#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)

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 05-18-2004 03:35 Edit Quote

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

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 05-18-2004 07:38 Edit Quote

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.

Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

IP logged posted posted 05-18-2004 10:51 Edit Quote

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

jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

IP logged posted posted 05-29-2004 22:53 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu