CSS image rollover menus? (or another technique)

torndownunit · Mar 12, 2009

I normally only use system fonts for CSS navigation menus so I haven't done an image rollover type menu in a LONG time now. I have a menu that requires some using a decorative font, and a rollover effect on the font though though.

What technique would you guys recommend? I did a Google search for CSS options, but I get a lot of varying menus, that really differ. And all the articles are 3 years old or more.

I don't know if I should be looking into a pure CSS option, or a Javascript option, or a combo of both?

If anyone knows of any good methods, or good links to show me, thanks in advance.

miles01110 · Mar 12, 2009

What, you want me to do your entire webpage for you?

Just use CSS with the hover pseudo-class.

You can do some neat things with this, change the font color, even make it so an image appears. I'll send you a link to an old webpage I did that has this effect via PM.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>test</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

	<div id="rollover">
	rollover
	</div>


</body>
</html>

CSS:

Code:

#rollover {
	background-color: #aaaaaa;
    float:left;
    display:inline; /*required by IE6*/
    width:384px;
    height: 205px;
    margin:0 5px 0 10px;
    text-align: center;
 }
 
 #rollover:hover{
 	background: #bbbbbb;
 	text-indent:20px;
 }

torndownunit · Mar 12, 2009

lol, I actually had a functioning menu in this case that I built from a tutorial. But, while it 'worked' in the browsers I tested it in, it didn't look quite consistent.

I found the same problem with it that I find with a lot of tutorials/info, the article was over 3 years old. It seems this forum is a better source for CURRENT information and techniques.

The method you just suggested looks MUCH easier than the others I tried.

memco · Mar 12, 2009

Is IE6 important? If so, you'll want to make sure you look something like suckerfish dropdowns because IE6 doesn't support :hover on anything other than <a> tags.

However, you shouldn't need to have :hover on anything else for this. Just use

Code:

a{ 
background: url('img/to/use_when_not_hovered.png')
/* other regular link styles here*/}

a:hover{
background:url('hover.png');}

design-is · Mar 13, 2009

This is a pretty standard way of doing things these days...

http://ghettocooler.net/2007/05/31/simple-navigation-with-css-image-replacement/

That link isn't where I first found, but it's the same sort of stuff.

For brief look, here is roughly the code I use on my site with one image including the over and normal state for each link:

CSS

HTML:

a.welcome:link,  
a.welcome:visited 
     {
     display:block;
     border:0;
     padding:0;
     position:absolute;
     top:91px; right:249px; width:67px; height:37px;
     background: url("../images/welcomenav.jpg") 0 0 no-repeat;
     text-indent: -9999em;
     }

a.welcome:hover 
     {
     background-position: 0 -37px;
     }

HTML

HTML:

<ul>
<li><a href="../" class="welcome" > Welcome / Homepage </a></li> 
</ul>

Image used:

You can then use active and budge it up a little more if you so wish.

Hope that makes sense & is applicable.

torndownunit · Mar 13, 2009

design-is, I thought I would give your suggestion a try first since the idea of using one image for the whole menu sounded appealing.

I worked from the example and tutorial linked, but am having one minor problem. On hover, I am getting a bit of a vertical shift.

My source image is 54 pixels high, so for the hovers I set the vertical background-position to -27 pixels. I followed the tutorial for setting up the image, but maybe I am missing something.

Can you (or anyone) see a problem?

http://www.ic-designs.ca/menu/

Thanks

angelwatt · Mar 13, 2009

This may not be the best way to fix it but,

Code:

ul#icnav li a:hover {
 background-position:0 [B][COLOR="Red"]-26[/COLOR][/B]px;
 [B][COLOR="Red"]background-color:#000;[/COLOR][/B]
}

You'll also need to change the other 27px spots. You may also be able to fix this by adding or removing 1px from the image height. I haven't gotten around the using CSS Sprites so not completely sure.

design-is · Mar 13, 2009

Yup, your image is only 52px high, not 54px, so angelwatt's solution is fine, though the background colour isn't needed when the image fills the box correctly.

so:

Code:

ul#icnav li a 
		{
		display:block;
		outline:none medium;
		width:86px;height:26px;
		background:url(../media/menu.png) no-repeat;
		text-indent:-9009px;
		margin:0 0 0 0;
		}
ul#icnav li a:hover 
		{
		background-position:0 -26px
		}

torndownunit · Mar 13, 2009

Thanks guys!

My image is 54 pixels in Photoshop. So I am not sure why it's 52 on the site.

SrWebDeveloper · Mar 13, 2009

torndownunit said:
Thanks guys!

My image is 54 pixels in Photoshop. So I am not sure why it's 52 on the site.

http://www.ic-designs.ca/menu/media/menu.png is definitely 52px tall. In Photoshop check to see if you accidentally sliced and upon "save to web" you're not including a slice portion. I cannot think of any other reason this would happen. Never do "save as", always "save to web" which optimizes the image as well as save.

Note: MSIE 6 does not handle alpha transparency for .png's so be aware of that if you in the future add transparency. Just an FYI.

-jim

Search

Search

CSS image rollover menus? (or another technique)

torndownunit

macrumors regular

miles01110

macrumors Core

torndownunit

macrumors regular

memco

macrumors 6502

design-is

macrumors 65816

torndownunit

macrumors regular

angelwatt

Moderator emeritus

design-is

macrumors 65816

torndownunit

macrumors regular

SrWebDeveloper

macrumors 68000

Our Staff