Question

I’m working on a menu (images made with indesign, not yet html):

Some menu options will load content in another div (a column next to it).
However for the ‘CONTENT’ option i want a new option list like this:

It should collapse the ‘CONTENT’ thing.

Atm all is done with jquery/javascript so it’s dynamic (loading another book for example).
I was wondering for the CONTENT menu,
should i place a div in CONTENT which hold a table of 2 rows?
One table for the roman numbers and 1 for the chapter name.
Or is that hard to combine with a unordered list?

http://jsfiddle.net/cmTpR/

Answer 1

should i place a div in CONTENT which hold a table of 2 rows? One table for the roman numbers and 1 for the chapter name.

I guess you mean 2 columns?
How can you be sure that 1 chapter will occupy exactly 1 line? They’re pretty lengthy, what happens if one of them occupies 2 lines, what if the user doesn’t have the font you indicated in font-family and fallback is larger? What if he zooms by 1, 2, up to 6 levels of (text) zoom according to W3C/WAI WCAG 2.0 Recommandation about accessibility.

2 columns like that would also mean that your content would make no sense when linearized (imagine a screen reader user that hears 1, 2, 3, 4, etc and then only the name of chapters 1, 2, 3, 4, etc Good luck with that! 🙂 )

Or is that hard to combine with a unordered list?

No it isn’t. See http://jsfiddle.net/PhilippeVay/EsYZr/ where only imbricated lists are used and (wait for it) CSS table layout. The semantics is still the one of a sub-list but visually (and visually only), it’s like a table made of rows and cells.

The good part is that you don’t have to force a width. Roman numbers like XVIII are pretty large but the table algorithm in browsers will adapt to content (as long as you don’t switch the table algorithm with table-layout: fixed) as with an HTML table.