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.
Related posts:
- To-Do Lists: 10 Tips for Increasing Productivity Are you a list-maker? Alyssa is, and she shares some...
- 5 Reasons Why You Should Not Publish Supported Browser Lists Do you publish a list of supported browsers for your...
- An Update on the SitePoint Newsletter Lists Last month, Campaign Monitor, the email marketing service that SitePoint...
- To-Do Lists: 12 Online Tools for Organizing Your Tasks If you need a new way to organize your tasks,...
- What’s Your Motivation? When you are in a slump, revisiting your motivations can...
alistapart’s example looks great :)
December 1st, 2004 at 12:06 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
December 1st, 2004 at 1:43 pm
Dave Shea’s CSS Sprites example is particularly refreshing.
thanks for the pointers.
December 2nd, 2004 at 12:33 pm
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.
December 3rd, 2004 at 9:04 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.
December 4th, 2004 at 4:35 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
December 6th, 2004 at 2:37 am
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.
December 6th, 2004 at 9:13 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
December 23rd, 2004 at 1:28 pm
Listamatic example were simply brilliant..
and even remote control one…
very good article.. :)
Deep
February 1st, 2005 at 7:23 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.
February 16th, 2005 at 1:38 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.
February 16th, 2005 at 1:41 am