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.