List-o-matic: It’s Just Too Easy Now

Ian Lloyd over at just made creating CSS-based navigation lists incredibly simple.
List-o-matic (not to be confused with it’s excellent inspiration, Listamatic) is a wizard for quickly creating unordered navigation lists, while allowing you to choose from a few different CSS styles, such as my Mini-Tabs and others.
Enter a few link names and URLs, choose a style and … bingo. You have yourself some styled navigation. It doesn’t get any easier than this.
Oh, and YARRR!


  1. Fleeno Jackson says:

    But is it desirable for List-o-matic to surround the entire list with a div in order to style it?

  2. Dan says:

    Fleeno – That would be a good quiz question :)
    I don’t think it’s necessary, and always add the id="nav" directly to the ul element. I suppose if you wanted to contain other stuff that’s not a list item for some reason — then using a div would make sense. But in general, it’s a waste to wrap only the list up with a div.

  3. Sander says:

    This is probably altered in order to apply different stylesheets easier.

  4. Clayton Scott says:

    Why, oh, why does no one use <menu> tags for this? They’re not even deprecated in XHTML 1.0 strict.
    Although <menu> disappears in XHTML 1.1 and reappears as <nl> (navigation lists) in XHTML 2.0
    PS Dan, I’ve really been enjoying the ccs tricks and sematics quizes you’ve been hosting.

  5. Scrivs says:

    Is it just me or does it seem like everyone on the web is just being too nice lately? Too many freebies! I love it! This coupled with webdev firebird extensions definitely saves a lot of time. Who needs a visual editor when you have the browser on the desktop for all your needs?

  6. Scrivs says:

    On another note, regarding the semantics of the <div> surrounding the list. I don’t use the <div>s because a simple id within the <ul> tag seems to do plenty enough.

  7. Dan R. says:

    I think the div is included as a courtesy to those who still like to use divs for everything — the id (#navcontainer) isn’t even referenced in the generated CSS, so it is obviously not needed. I’d be interested to know exactly why it was used though…

  8. rick says:

    All I hope for is that the people that use it understand the code behind it. Does anyone think that this might make more people change to CSS design? I’m thinking so…I’m just hoping people understand what they are doing.

  9. zavach' says:

    this is a piece of my today’s post :
    i’ve been on Dan Cederholm website and guess what ? an archive file (or i guess all the archive) is not validate XHTML ! Take care mister ;)
    I’ll tell him, i’m sure he will be “glad” to learn that his has to rebuild all his good (i confess and love it !) and big archive.
    and many thanx for you articles ! man you jazz !

  10. Dan says:

    zavach’ – One of the drawbacks to allowing readers to enter HTML within comments, is that I run the risk of individual entry pages breaking validation because of it. So it’s not something I directly control.
    I could strip out all HTML in comments, but I feel the benefit in allowing readers to link to other comments or examples, post code snippets, etc. outweighs the non-valid page here and there — especially for the quiz questions.
    Remember too, validation is something to strive for. A valid page does not always mean a good one, as the SimpleQuiz is trying to explore.

  11. zavach' says:

    You’re right Sir ! Sorry, i’m too dummy sometimes ;) So please forgive my insolence :)
    P.S. I’ll post your answer on my blog. That’s a duty :)
    Thanx for the well-done job !

  12. Russ says:

    I’m with zavach that “validation is something to strive for…” etc. I’m also pleased to see sites like the List-o-matic appearing, surely it must help people who want good web sites, but don’t want to delve into XHTML/CSS too deeply.
    So in this spirit, here is a pure css, two level menu we are working on. It uses nested lists and works on most browsers. It’s compact, vertical and scalable. More details are at the url below:

  13. Lars says:

    I’m still fairly new at some of this “fancy” css stuff that Dan does, but the code for the list-o-matic stuff is fairly easy to understand. A quick look at’s documentation pages should clear up most of the stuff. Now, if I only knew what a LI was ;-)
    One thing I did notice, was that with the “simplebits” sample in Opera, the page will “jump” up/down a pixel or two as you transition between items. Probably just a miscalculation of padding somewhere, or perhaps yet another Opera issue :(