Lists that don’t look like lists

By | December 1, 2004 | JavaScript

11

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.

The Ultimate JavaScript Bundle: 2 books + 1 course

Buy now $39 Normally $117 - save 66%

Or get access to all SitePoint's Premium Content with a Learnable membership

Simon Willison

More Posts - Website

{ 11 comments }

luxuryluke February 16, 2005 at 1:41 am

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.

luxuryluke February 16, 2005 at 1:38 am

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.

Deep13 February 1, 2005 at 7:23 am

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

Deep

Kermit December 23, 2004 at 1:28 pm

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

xDev December 6, 2004 at 9:13 pm

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.

Russ Weakley December 6, 2004 at 2:37 am

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

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

:)
Russ

xDev December 4, 2004 at 4:35 am

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.

omnicity December 3, 2004 at 9:04 am

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.

ac070 December 2, 2004 at 12:33 pm

Dave Shea’s CSS Sprites example is particularly refreshing.

thanks for the pointers.

OfficeOfTheLaw December 1, 2004 at 1:43 pm

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.

    • Dean C December 1, 2004 at 12:06 pm

    alistapart’s example looks great :)

    Comments on this entry are closed.