CODEWITHSUNDEEP
javascriptjquerymenu
clankill3r
clankill3r

Reputation: 9583

how to structure this menu

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

enter image description here

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:

enter image description here

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/

Upvotes: 3

Views: 113

Answers (2)

FelipeAls
FelipeAls

Reputation: 22171

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.

Upvotes: 1

Elvis D'Souza
Elvis D'Souza

Reputation: 2313

I understand you want to have the roman numbers and the chapter names in a single list element and are looking at tables as a solution.

You can certainly use tables. Alternatively, you can use a span element with a fixed width.

I'm using a span to hold the roman numbers

<ul>
    <li> <span class="num">I</span> Hello World </li>
    <li> <span class="num">II</span> The Second string </li>
    <li> <span class="num">III</span> 3 times, is a charm! </li>

</ul>

I then assign a fixed width to the span

li span.num {
    display: inline-block;
    width: 30px;
}

jsfiddle: http://jsfiddle.net/FJgqs/

Hope this answers your question

Upvotes: 0

Related Questions