Rollover with pre-loaded images

This example shows how to create a navigation menu that uses images for the rollover effect.

Like you can see in the example menu below, with normal markup (html4.01 strict) and some simple styles (css2.1) you can create a fool and fail proof menu for navigating your site.

The basics are:

  1. Create a simple list that holds your menu links.
  2. Create a containing div that holds the images you want to use for the rollover effect on your menu.
  3. Use CSS to place the containing div with the images out of view.
  4. Finally, use CSS to style your list with links to look like a menu (in the example it is a vertical menu bar; you could just as easily style it to be a horizontal navigation bar).

Check the source of this page to see how it is done.

Note

This example is setup firstly as an experiment for myself, but later I used it in response to a usenet newsgroup question in niwo: Horizontale navigatie.

This example page is part of PretLetters site. If you like the example and you understand Dutch you could pay us a visit some time for example to check out more on the topic of Webdesign.

Maybe the index of the test area, of which this page is part, is worth checking out too, since in that part of my site I play around a bit. There might be something worth your while related to the main topic of this current page.

If you liked what you saw and I helped you out a bit with something, you could consider contributing something small so I can continu to put efford in this site. With that you help me to help you and others. Please visit my page (in Dutch) on bijdragen, contributions and donations. Thank you,