CSS image rollover menus? (or another technique)

Discussion in 'Web Design and Development' started by torndownunit, Mar 12, 2009.

  1. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #1
    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.
     
  2. miles01110 macrumors Core

    miles01110

    Joined:
    Jul 24, 2006
    Location:
    The Ivory Tower (I'm not coming down)
    #2
    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;
     }
     
  3. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #3
    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.
     
  4. memco macrumors 6502

    Joined:
    May 1, 2008
    #4
    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');}
    
     
  5. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #5
    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:
    [​IMG]

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

    Hope that makes sense & is applicable.
     
  6. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #6
    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
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    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.
     
  8. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #8
    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
    		}
    
     
  9. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #9
    Thanks guys!

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

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #10
    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
     

Share This Page