Menu Rollover Effect with CSS
This guide shows how to create a stylish rollover effect for a menu which might normally be done with Javascript or DHTML. CSS is used to do the menu highlighting.
by Enda McGuinness
Introduction
Tested in
We have created 2 different versions of this tutorial so you can choose which
one suits your application best. (first is best).
- Using HTML lists
Uses the least amount of html, always a good thing.
- Using HTML tables
The original version of this tutorial and the common way menus are often created.
Pssst...we've also built a guide on how to add a transition effect
to the menu using CSS filters. It's IE only but the menu will appear as normal in other browsers anyway.
In practice both methods operate much the same way.
Using lists requires the least amount of HTML (some of us hand-coders are lazy) and
it's also the method I recommend.
Note: Traditionally HTML lists are unpredictable and awkward buggers but thanks to CSS we can easily take control of the lists to achieve the effect we need.
Get The CSS Code
- Menu Rollover Effect Using HTML Lists
- Menu Rollover Effect Using HTML Tables
- Menu Rollover Effect Using Blend Transition
| 
(1 votes)