Rollover CSS Image Menu

CSS Rollover Image Menu

There are now loads of places on the Internet where one can access free CSS menu's. But of the many that are available very few suceed in replicating the prehistoric roll-over image menu using javascript image replacement techniques, with only lovely CSS. I have managed to create one that works in both decent web browsers and crap ones (Internet Explorer), check it out.

First I needed to remove all padding and margins from the page:

* { padding: 0em; margin: 0em; }

Then the CSS for the #nav container div:

#nav img { border: none; }
#nav li { display: inline; list-style:none; }
#nav li a { float: left; display:block; width: 37px; height: 50px; margin: 5%; }
#nav li a img {  border:none; vertical-align:bottom; /* for IE6 */}
#nav li a:hover { visibility:visible; /* for IE6 */ }
#nav li a:hover img { visibility:visible; /* for IE6 */ }
#nav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}

Internet Explorer requires something to happen on a:hover as well as a:hover img.

The menu list items all use different images on rollover so I defined each with a different ID on the anchor element:

#one { background:url(http://www.alanwho.com/examples/css/rollover_menu/1over.png) no-repeat left bottom; }
#two { background:url(http://www.alanwho.com/examples/css/rollover_menu/2over.png) no-repeat left bottom; }
#three { background:url(http://www.alanwho.com/examples/css/rollover_menu/3over.png) no-repeat left bottom; }
#four { background:url(http://www.alanwho.com/examples/css/rollover_menu/4over.png) no-repeat left bottom; }

Lastly I created a div with an id of nav and applied the CSS into the final XHTML:

The Final Rollover CSS Image Menu XHTML.

Share post on facebook

Comments

  • Liquinaut
    Hi,

    thanx for this simple solution, comes in very handy!

    Two additional thoughts:

    1.) Instead of an "empty" link just containing the hover image and a descriptive title (which even will lead some browsers to display the content of that title when hovering over the link) its better to have a link containing the image AND a link text, which is more accessible anyway. Since this would result in some undesirable cluttering of the layout without a slight modification, just wrap the link text within the link in a tag and give it a classname (e.g. "link"). In your style definitions, give this class an attribute of "display:none;" and you're all set up.

    2.) If you need to have some horizontal space added before the links (to center the menu in a fixed width layout for example) just add a list item before the menu items containing a tag with a fixed width attribute or containing an image if needed. Apply the same styling as for the Tags in the list.

    Cheers!
  • Liquinaut
    OK, sorry for the mess-up, I forgot to preformat my comment ;-)
    Here's what I really wanted to say:

    1.) Instead of an “empty” link just containing the hover image and a descriptive title (which even will lead some browsers to display the content of that title when hovering over the link) it's better to have a link containing the image AND a link text, which is more accessible anyway. Since this would result in some undesirable cluttering of the layout without a slight modification, just wrap the link text within the link in a "span" tag and give it a classname (e.g. “link”). In your style definitions, give this class an attribute of “display:none;” and you’re all set up.

    2.) If you need to have some horizontal space added before the links (to center the menu in a fixed width layout for example) just add a list item before the menu items containing a "div" tag with a fixed width attribute or containing an image if needed. Apply the same styling as for the "a" Tags in the list.

    ;-)
  • Hi,

    I am unable to see the code working, i am using ie6 and ff2

    the rollover works, but there is no menu.

    Could you pl chk and let me know on which browsers this works
  • TRS
    This is really awesome. I was hoping for a bit smoother transition during the hover. It blinks really bad (almost a whole second) before displaying the new image. I tried adding body {onLoad:preloadImages();} to the CSS but that doesn't seem to help either.
  • ?????????????...
  • Tina
    Been looking everywhere for a CSS script that actually works. This is perfect! Thanks!!

  • Brilliant! It’s so simple. This is exactly what I was looking for!

    No problem Ivan. I am glad you found what you were looking for ...
  • Ivan
    Brilliant! It's so simple. This is exactly what I was looking for!
  • Anthony
    Disregard my previous question. I modified the code to get the desired result. Thanks!
  • Anthony
    Great! But what if the buttom widths are different?
blog comments powered by Disqus