I like the idea behind this and it might spark some no methods, but the final example takes to much vertical space to use. Which is one of the reason to use a drop down box (select tag).
A better method is to use the optgroup tag. This way each group of options can be divided nicely in one drop down box.
If you have sub groups you can use CSS or entity to add an ident levels. I used since IE will not let you use CSS to modify the contents of select tag.
Optgroups are a wonderful way to sort a select into different categories, but it doesn’t really indicate a relationship between them and you cannot nest them, or am I wrong there?
W3c:
The OPTGROUP element allows authors to group choices logically. This is particularly helpful when the user must choose from a long list of options; groups of related choices are easier to grasp and remember than a single long list of options. In HTML 4, all OPTGROUP elements must be specified directly within a SELECT element (i.e., groups may not be nested).
As for nbsp, that is a bit oldschool and really is mixing content with presentation- painting with text.
If you define an off-left (or off-top) shift in pixels, then resize text to be extremely large, the text can intrude on the visible page unless carefully constrained. I’ve found it more foolproof to set the left margin of hidden text in ems so that its off-screen offset increases directly with the font size.
Nice article, Chris. Although, in the face of this bramble of accessibility & usability issues, my approach has been to keep a page quite lean to get immediate response time reloading it with new values. Most of the CSS you’re using here could still apply just fine if each menu level were supplied by the server.
Since you’re using JavaScript, why don’t you store unused portions of the menu system in hidden elements and then copy them to create new DOM nodes to produce submenus on demand? Or does that strategy have as many thorns for screen-readers as trying to unhide hidden elements?
Copy & paste the code below to embed this comment.
John Brookes
I like the hierarchical presentaion of information: I am not a web designer, and so do not know the gui issues well. But I am interested in the use of wizards to program code or at least do some kind of code generation. BTW, whats wrong with a page submit to send the results to the server? And what about this XMLHttpRequest object I keep hearing about? There is a technique to use a submit from an invisible (1 pixel) frame to transfer data without a page change.
These techniques get a bit confusing to a server programmer drilled in the ideology of MVC.
JB
I really like the idea of dynamic web content and I’m trying to utilise as much of it as I can in the slow process of redesigning my web site in my free time. One thing I thought would be nice was dynamic menus and after finding several possibilities I thought I’d look to some of my favorite CSS-oriented sites. Lo and behold I found this. It’s a cool idea, but I was wondering if it’d be possible to implement it differently.
I’d like to have links that are displayed across a top box (ah, the multi-box stereotypical layout…) change a menu in a left box when clicked or rolled over (either way is fine). So if one link is Home then it’d change the left box to have all the links for the home section. If one top link is Comics then the links in the left box might display stuff like Top Sellers, Recommended Reading, New This Week, etc.
I don’t know javaScript and I’m still learning PHP. The example, though, seems to load everything to the right.
Also, what’s this about tabbing through the links? Does that mean all the links are already there and they just have to be displayed, so a user could tab through the ones they can’t even see yet?!
This example: http://www.alistapart.com/d/complexdynamiclists/order.html was just facinating. I understand the usability/accessibility issues but it is just the navigation I have being struggling to think about. One that suggests journey or progression from one place to another in a horizontal form rather than vertically as most menus do. Thanks for the great pointer and all credit due.
Copy & paste the code below to embed this comment.
Shawna
Hi Christian,
I love your article and solution. It works well in the majority of browsers my visitors use and degrades well if javascript is turned off.
I’m trying to use it in a situation where I have two lists and I want my visitors to easily tab back and forth between the two lists. I almost have it working except I’d like to have the first list open by default – without the user having to click on the first tab – is that possible to do with your code and what would I need to change?
shouldn’t be hard to do, I will look into it after the bank holiday. There is sun outside here in London, and that is an occassion far too seldom to let go away unused.
This is a great example. But there is one piece of functionality I would like to have the parents (Main Courses, Drinks, Salads, Deserts in the example) be links (targeted to another frame). When I make them links they become null. It would be great to have another frame display all of the deserts when you click it and also have desert act as a parent and expand to show the desert categories. Is this possible without radically altering the code?
Copy & paste the code below to embed this comment.
Lance
I would like to put this in a box (e.g. border around the content), but I cannot get the box to contain the nested lists. In the posted examples, the size of the content area is fixed,so it is a non-issue. I thought that once the absolutely positioned inner boxes were nested inside a relatively positioned box, then the external box would grow to hold vertically to accomodate the the content, but for whatever reason, I can either show the entire list of nested lists and it fits in the box, or I can use the javascript to hide/show elements, but everything after the top level is outside the box.
Any examples of how I could get this working would be greatly appreciated.
Copy & paste the code below to embed this comment.
Joey Asato
Hello Mr. Niggel
This is my first time posting… Please don’t be offended.
I don’t know much about JavaScript, but is it possible to solve the tabbing problem by using tabindex attribute? And could this tab attribute be changed dynamically using JavaScript?
I just posted a new technique on my website to create accessible dynamic select boxes without arrays, using unobtrusive JavaScript and progressive enhancement: http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php
This technique will probably change the perspective on the complex solution as described in this article. However, the real question will probably be how usable (or suitable) dynamic select boxes are as navigation tools.
From that point of view I like the solution Chris offers, because it is based on existing popular navigation interfaces and it visualizes how you navigate through a hierarchy.
Copy & paste the code below to embed this comment.
Kris
The Widget Browser on the Apple site should be marked up as a table instead of a collection of unordered lists. There are clearly three columns – not just visually, but logically! – namely Category, Widget and Info.
Set up as a table, it would also degrade much better for people without CSS or JavaScript. Let’s see if I can cook up an example.
Copy & paste the code below to embed this comment.
Kris
Hm, I grocely underestimated the trouble with relocating tablecells through CSS, due to lack of hierarchical nesting in tables. Ah well.. here’s how far I came, if anyone wants to finish it.
Copy & paste the code below to embed this comment.
Rod
Very incredible script but a big “default” : if you have 100 or 150 possible lists with a graphic (normal.gif), it loads the 100 / 150 normal.gif each time you click. The only solution I have found is to not put pics.
It becomes easy to criticize a script and throw problems at it like “what about the ajax problem?” – “what about when js and css is disabled?” – “what about screen readers?”
Sheesh. I can see why ALA initiated the ‘experimentation – use with caution’ warnings from a while back.
However, I will agree on the asthetics of it. It does look a bit awkardly ugly. But what’s really at stake here is the functionality. ALA has never claimed to be awesome designers, but this is a killer script (killer being a good thing).
Most likely, these are the kinds of widgets that I would implement on my own site. It would take weeks of meetings to get something like this implemented on a real project.
Copy & paste the code below to embed this comment.
Mosey
I was and am still very much interested in your method of display and choosing options. However, like some others thoughts – while it appears to be an excellent script technically, the aesthetics does baffle me slightly. I wonder how easy it is to make it into a vertical menu, (rather like the navigation menu for http://www.saila.com/usage/layouts/ ) while still retaining its accessibility? :) thanks!
57 Reader Comments
Back to the ArticleJeremy Schultz
I like the idea behind this and it might spark some no methods, but the final example takes to much vertical space to use. Which is one of the reason to use a drop down box (select tag).
A better method is to use the optgroup tag. This way each group of options can be divided nicely in one drop down box.
If you have sub groups you can use CSS or entity to add an ident levels. I used since IE will not let you use CSS to modify the contents of select tag.
Chris
Optgroups are a wonderful way to sort a select into different categories, but it doesn’t really indicate a relationship between them and you cannot nest them, or am I wrong there?
W3c:
The OPTGROUP element allows authors to group choices logically. This is particularly helpful when the user must choose from a long list of options; groups of related choices are easier to grasp and remember than a single long list of options. In HTML 4, all OPTGROUP elements must be specified directly within a SELECT element (i.e., groups may not be nested).
As for nbsp, that is a bit oldschool and really is mixing content with presentation- painting with text.
Paul Novitski
If you define an off-left (or off-top) shift in pixels, then resize text to be extremely large, the text can intrude on the visible page unless carefully constrained. I’ve found it more foolproof to set the left margin of hidden text in ems so that its off-screen offset increases directly with the font size.
Nice article, Chris. Although, in the face of this bramble of accessibility & usability issues, my approach has been to keep a page quite lean to get immediate response time reloading it with new values. Most of the CSS you’re using here could still apply just fine if each menu level were supplied by the server.
Since you’re using JavaScript, why don’t you store unused portions of the menu system in hidden elements and then copy them to create new DOM nodes to produce submenus on demand? Or does that strategy have as many thorns for screen-readers as trying to unhide hidden elements?
John Brookes
I like the hierarchical presentaion of information: I am not a web designer, and so do not know the gui issues well. But I am interested in the use of wizards to program code or at least do some kind of code generation.
BTW, whats wrong with a page submit to send the results to the server? And what about this XMLHttpRequest object I keep hearing about? There is a technique to use a submit from an invisible (1 pixel) frame to transfer data without a page change.
These techniques get a bit confusing to a server programmer drilled in the ideology of MVC.
JB
Waa
I really like the idea of dynamic web content and I’m trying to utilise as much of it as I can in the slow process of redesigning my web site in my free time. One thing I thought would be nice was dynamic menus and after finding several possibilities I thought I’d look to some of my favorite CSS-oriented sites. Lo and behold I found this. It’s a cool idea, but I was wondering if it’d be possible to implement it differently.
I’d like to have links that are displayed across a top box (ah, the multi-box stereotypical layout…) change a menu in a left box when clicked or rolled over (either way is fine). So if one link is Home then it’d change the left box to have all the links for the home section. If one top link is Comics then the links in the left box might display stuff like Top Sellers, Recommended Reading, New This Week, etc.
I don’t know javaScript and I’m still learning PHP. The example, though, seems to load everything to the right.
Also, what’s this about tabbing through the links? Does that mean all the links are already there and they just have to be displayed, so a user could tab through the ones they can’t even see yet?!
Jon Dowland
There’s no vegetarian option for main courses :)
Matthew
This example: http://www.alistapart.com/d/complexdynamiclists/order.html was just facinating. I understand the usability/accessibility issues but it is just the navigation I have being struggling to think about. One that suggests journey or progression from one place to another in a horizontal form rather than vertically as most menus do. Thanks for the great pointer and all credit due.
Shawna
Hi Christian,
I love your article and solution. It works well in the majority of browsers my visitors use and degrades well if javascript is turned off.
I’m trying to use it in a situation where I have two lists and I want my visitors to easily tab back and forth between the two lists. I almost have it working except I’d like to have the first list open by default – without the user having to click on the first tab – is that possible to do with your code and what would I need to change?
Many thanks for a great solution!
Chris
shouldn’t be hard to do, I will look into it after the bank holiday. There is sun outside here in London, and that is an occassion far too seldom to let go away unused.
Jack Turner
This is a great example. But there is one piece of functionality I would like to have the parents (Main Courses, Drinks, Salads, Deserts in the example) be links (targeted to another frame). When I make them links they become null. It would be great to have another frame display all of the deserts when you click it and also have desert act as a parent and expand to show the desert categories. Is this possible without radically altering the code?
Chris
It is possible, but how would you expand the children? This would make you dependent on a mouse again.
Lance
I would like to put this in a box (e.g. border around the content), but I cannot get the box to contain the nested lists. In the posted examples, the size of the content area is fixed,so it is a non-issue. I thought that once the absolutely positioned inner boxes were nested inside a relatively positioned box, then the external box would grow to hold vertically to accomodate the the content, but for whatever reason, I can either show the entire list of nested lists and it fits in the box, or I can use the javascript to hide/show elements, but everything after the top level is outside the box.
Any examples of how I could get this working would be greatly appreciated.
Joey Asato
Hello Mr. Niggel
This is my first time posting… Please don’t be offended.
I don’t know much about JavaScript, but is it possible to solve the tabbing problem by using tabindex attribute? And could this tab attribute be changed dynamically using JavaScript?
Bobby van der Sluis
I just posted a new technique on my website to create accessible dynamic select boxes without arrays, using unobtrusive JavaScript and progressive enhancement: http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php
This technique will probably change the perspective on the complex solution as described in this article. However, the real question will probably be how usable (or suitable) dynamic select boxes are as navigation tools.
From that point of view I like the solution Chris offers, because it is based on existing popular navigation interfaces and it visualizes how you navigate through a hierarchy.
J Hendron
Dessert, not ‘desert.’ I always remember “two s’s” because I want more dessert.
pickupjojo
Very nice article, thank you very much.
Brad
Apple has a variation on this kind of column list on their site, styled to look similar to the columns in the Mac OS X Finder;
http://www.apple.com/downloads/dashboard/
Dave
Very useful function made here.
Kris
The Widget Browser on the Apple site should be marked up as a table instead of a collection of unordered lists. There are clearly three columns – not just visually, but logically! – namely Category, Widget and Info.
Set up as a table, it would also degrade much better for people without CSS or JavaScript. Let’s see if I can cook up an example.
Kris
Hm, I grocely underestimated the trouble with relocating tablecells through CSS, due to lack of hierarchical nesting in tables. Ah well.. here’s how far I came, if anyone wants to finish it.
Rod
Very incredible script but a big “default” : if you have 100 or 150 possible lists with a graphic (normal.gif), it loads the 100 / 150 normal.gif each time you click. The only solution I have found is to not put pics.
te
thanks alot!
Dustin Diaz
It becomes easy to criticize a script and throw problems at it like “what about the ajax problem?” – “what about when js and css is disabled?” – “what about screen readers?”
Sheesh. I can see why ALA initiated the ‘experimentation – use with caution’ warnings from a while back.
However, I will agree on the asthetics of it. It does look a bit awkardly ugly. But what’s really at stake here is the functionality. ALA has never claimed to be awesome designers, but this is a killer script (killer being a good thing).
Most likely, these are the kinds of widgets that I would implement on my own site. It would take weeks of meetings to get something like this implemented on a real project.
Mosey
I was and am still very much interested in your method of display and choosing options. However, like some others thoughts – while it appears to be an excellent script technically, the aesthetics does baffle me slightly. I wonder how easy it is to make it into a vertical menu, (rather like the navigation menu for http://www.saila.com/usage/layouts/ ) while still retaining its accessibility? :) thanks!
Tatyana
Thank You, Christian!
This is very interesting and comfortable solution! And understandable examples.
a user
common when is the next update?
Jeffrey Zeldman
What
REALLY
I can use HTML. Here’s the code I wrote for my page:
<h2>This is an H2 headline</h2>
I’m so glad HTML is blocked.
Oops. It isn’t.