Heal Your Church WebSite

Teaching, rebuking, correcting & training in righteous web design.

Listamatic: making menus out of unordered lists

The question atop Listamatic asks “Can you take a simple list and use different Cascading Style Sheets to create radically different list options?

Why yes, I can, thank you very much for asking. But as any professional programmer worth his or her salt will tell you, why re-invent the wheel when you can reuse code?

The Listamatic page is a semi-definitive list of sites showing off the power of CSS when applied to an unorded list. Contained in this useful compendium are simple samples from Eric Meyer, ProjectSeven, SimpleBits, Jeffrey Zeldman and others.

Personally, the new trick I enjoyed learning was the Rollover horizontal list navbar. Something this old dog has a use for at my day job as we speak (well … read).

Oh, and a well-deserved hat tip to Mike Boyink for pointing this one out. I’m unofficially putting him in charge of church web design and usability universe while I’m out of town next week. I’ll see if I can’t get Keith Devens to assist him.


  1. I use the CSS ordered-list tab navigation thingy for my site. You should check it out in Mozilla :)

  2. One of the best articles I’ve ever read on CSS and lists is on A List Apart’s web site at http://www.alistapart.com/stories/taminglists/

    Most of the concepts in this article are the same as the one Dean is referencing here, but I think this one might get into the “theory” behind the CSS box model a bit more.

    A List Apart’s web site is a great resource for all things web design, too.

  3. Another list thingy… In case you’re interested…

    Listutorial takes you through the basics of building CSS lists with “background images for bullets” and “simple rollovers” with a few variations along the way.