Simple CSS Rollover Lists Tutorials

Piper Nilsson sent me this link when I asked her how to make navigation bars: http://css.maxdesign.com.au/listutorial/roll_master.htm.

Introduction to Rollovers

The next series of steps are only one of many methods that can be used to create rollover effects using CSS. At the core of this method there are two basic ingredients - making the lists block level and using the hover state.

The list model used here works in all standards compliant browsers, with the following exceptions. Win/IE5 will render the list narrower due to it's misinterpretation of the box model. Win/IE6 and Mac/IE5 will render the list to the correct width if standards compliance mode is used.

    * Milk

    * Eggs

    * Cheese

    * Vegetables

    * Fruit

CSS CODE

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #FFF;

background-color: #036;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

HTML CODE

    * Milk

    * Eggs

    * Cheese

    * Vegetables

    * Fruit

Step 1 - Make a basic list

Start with a basic unordered list. The list items are all active (wrapped in ) which is essential for this list to work. Some CSS rules are written exclusively for the "a" element within the list items. For this example a "#" is used as a dummy link.

Step 2 - Remove the bullets

To remove the HTML list bullets, set the "list-style-type" to "none".

#navcontainer ul { list-style-type: none; }

Step 3 - Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

margin: 0;

padding: 0;

Step 4 - Display block

To achieve a rollover, the list items have to be converted to blocks using "display: block".

#navcontainer a { display: block; }

Step 5 - Add a background color

To add a background color, you set it within the "a" state. A color is also added to make the text readable.

color: #FFF;

background-color: #036;

Step 6 - Set the list width

Set the list width within a rule targeting the "a" element so the entire block will be active.

width: 9em;

Step 7 - Add padding

Add padding to the list items within the "a" state.

padding: .2em .8em;

Step 8 - Text decoration

At this point you may wish to remove the text underline. It is a common practise for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.

text-decoration: none;

Step 9 - Add a rollover color

Use "a:hover" to set a second background color, as a rollover state. If you roll over the list now you will see that the rollover works.

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

Step 10 - Separate the list items

The list items can be separated with a margin on the "LI" element. In this case margin of "0.2em" was applied to the bottom of the "LI".

#navcontainer li { margin: 0 0 .2em 0; }

Finished!

There are many variations that can be applied to this list method. You can play with colors, widths padding and background images to create a wide range of list styles.

Variation - current page indication

There are times when you may want to show the user what page they are on. There are many ways to achive this. One simple method is:

   1. add id="active" to the "LI" element associated with the current page

   2. duplicate the main rollover list rule set - "#navcontainer a"

   3. replace "#navcontainer" with "#active"

   4. change the background color

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #FFF;

background-color: #036;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

#active a

{

display: block;

color: #FFF;

background-color: #600;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

Variation - Adding borders

There are endless possibilities that can be achieved with padding and borders. One simple option is to set different border colors to each side of the list, and then reverse the colors for the active state. This gives the classic "raised and pressed" button look.

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #036;

background-color: transparent;

width: 9em;

padding: .2em .8em;

text-decoration: none;

border-top: 1px solid #fff;

border-left: 1px solid #fff;

border-right: 1px solid #036;

border-bottom: 1px solid #036;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

border-top: 1px solid #036;

border-left: 1px solid #036;

border-right: 1px solid #fff;

border-bottom: 1px solid #fff;

}