Zebra lists
Here's a drop-in way to have alternating background colors on the li
elements in an unordered list. (Actually, you aren't limited to alternating background colors; the script just applies the odd
class to odd-numbered li
elements, so you can apply any number of CSS properties to them.)
This is an extension of a technique that I first saw in David Miller's Zebra Tables at ALA, where the goal was to create alternating background colors for table rows.
The target of this technique is unordered lists instead of table rows, and my javascript is a bit shorter (10 lines including comments), but the end result is the same.
A zebra list in action
- Item 0
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10
The code
To use this, just apply the zebra class to the ul
that you want striped and link to the supplied javascript.