Lists that don’t look like lists

Russ Weakley, author of the impressive Listamatic CSS demonstration, recently received an interesting challenge to create a TV remote control navigation bar using CSS. The anonymous challenger argued that this exampled disproved Russ’s assertion that using a list for navigation doesn’t limit the page designer.

Never one to shirk a challenge, Russ provided a detailed response, including a mock-up of a remote control constructed from an unordered list. It’s a nice enough demo but it does still have an air of list about it. For rock solid proof that a list can be shaped in to pretty much any navigation design you could possible want, look no further than Dave Shea’s CSS Sprites, in particular this beautiful example of a list converted in to a set of irregularly shaped overlapping rollover images using nothing but CSS.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.deanclatworthy.com Dean C

    alistapart’s example looks great :)

  • OfficeOfTheLaw

    what kind of remote control is that supposed to be? Fruit buttons?

    I think a better way would have been to make, say, 3 un ordered lists with the

  • s floated left, making 3 rows of buttons. From there, we could set the background images for
  • ‘s to be a default button image, with on hover using a lit up button (perhaps this should be applied to ?), and just use text for the button labels.
  • ac070

    Dave Shea’s CSS Sprites example is particularly refreshing.

    thanks for the pointers.

  • http://www.calcResult.co.uk omnicity

    Dave Shea’s CSS Sprites example is beautiful, but I should point out that the shapes are NOT irregular as stated above – by overlapping them carefully one can ‘cut out’ of another, but that is very limited. Most of the effect here is from the graphics, rather than from the coding.

  • http://www.xDevDesign.com/ xDev

    Nothing is impossible. Draw up any interface you please, however complicated, slice up the pieces, as it was done so sucessfully in the 90’s, and code away. In the old days we did it with tables. That IS very limiting. Using lists with the parent ul set to position: relative and the child li’s set to absolute and you can position anything anywhere you please – your only limited by the dimensions of the page and the parent itself. Dave Shea’s example was a revelation when I first saw it and it still gets my creative juices flowing every time when I think of the possibilities that this technique can accomplish.

  • Russ Weakley

    a modified version is now online that hopefully looks less like fruit buttons:

    http://www.maxdesign.com.au/presentation/remote/remote-new.htm

    :)
    Russ

  • http://www.xDevDesign.com/ xDev

    That’s what I call a remote! I wonder what that guy has to say now.

    Can’t stand those people who insist on comparing Flash to CSS. It’s not even in the same universe. I have a feeling its the types who decided that when they wanted to learn to make websites they went straight to flash, just to be cool, and now they don’t really know any other way. You see that a lot even with the flash gurus. If an html version is even made at all, it usually looks as if it was done in FrontPage as an afterthought … and by someone who doesn’t even understand the rudimentaries of basic html and css.

  • Kermit

    Most people can learn technique from good examples. One of the best web sites for demonstrating CSS design (and particularly lists) is the CSSzenGarden site
    for example of basic lists (without JS)

    and
    [url=http://www.csszengarden.com/?cssfile=088%2F088%2Ecss ]
    for scrolling background on different z levels [url=http://www.csszengarden.com/?cssfile=058%2F058%2Ecss]

    all the demo pages on this site have exactly the same html and the only varient is the css file being applied

  • http://www.whoisdeep.com Deep13

    Listamatic example were simply brilliant..
    and even remote control one…
    very good article.. :)

    Deep

  • http://www.butterlabel.com luxuryluke

    I enjoyed making my interactive folder list a few months ago, and since then i’ve broken the barrier of how to weave in between Explorer’s stepchild behaviors (no offense).

    In all actuality, I’m *glad* that Bill will release IE 7! If it’s anywhere as good as Firefox, all of us CSS coders will eventually be able to take coffee/smoke/horseshoe breaks again.

  • http://www.butterlabel.com luxuryluke

    Let’s try that again (what an idiot!).

    I enjoyed making my interactive folder list a few months ago, and since then i’ve broken the barrier of how to weave in between Explorer’s stepchild behaviors (no offense).

    In all actuality, I’m *glad* that Bill will release IE 7! If it’s anywhere as good as Firefox, all of us CSS coders will eventually be able to take coffee/smoke/horseshoe breaks again.