Mobile Friendly Website


Doing it with style

CSS MENUSImage replacement with NO flicker

Date : Pre 2006

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.


Similar to the previous menu but even more simple. Yes it is possible!

Again we are using two images with only one controlled by the link :hover.

The first image, below, is held as the background image for the menu 'outer div'.

The second image is held as the background image for all four links - BUT THE IMAGE IS NOT NORMALLY DISPLAYED. This is achieved by setting the background image at a negative 'top/left' position with a 'transparent background color'.

As with the previous menu this one works in all tested browsers including IE5.01 and IE5.5

NOTE. Again I am using a standard unordered list for the menu. The text is forced off the screen by using a top padding (50px) and overflow:hidden (there is also a hack for IE5.x). This allows the background image to be displayed but not the text. So for the purists this will degrade to a standard list.



menu start screen image


menu hover screen image

This is a gif with a transparent middle area that will allow the normal button text to show through so giving the impression of an increased button size with a drop shadow.

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page