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:
Great! But what if the buttom widths are different?
Disregard my previous question. I modified the code to get the desired result. Thanks!
Brilliant! It’s so simple. This is exactly what I was looking for!
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 …
Been looking everywhere for a CSS script that actually works. This is perfect! Thanks!!
?????????????…
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.
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
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!
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.