How to structure this menu
I am working on a menu (images taken with indesign are not html yet):
Some menu options load content into another div (there is a column next to it). However, for the "CONTENT" option, I need a new parameter list, for example:
He has to collapse "CONTENT".
Atm everything is done with jquery / javascript, so it is dynamic (like loading another book). I was wondering, for the CONTENT menu, should I place a div in CONTENT that contains a table of 2 rows? One table for Roman numerals and 1 for chapter title. Or is it difficult to combine with an unordered list?
source to share
should i place a div in CONTENT that contains a table of 2 rows? One table for Roman numerals and 1 for chapter title.
I think you mean 2 columns?
How can you be sure that 1 chapter will occupy exactly 1 line? They are quite long, what happens if one of them is 2 lines long, but what if the user does not have the font that you specified in the font family, and the fallback is larger? What if it increases 1, 2, up to 6 levels (text) scaling according to W3C / WAI WCAG 2.0. Accessibility recommendation.
2 columns like this also means your content is meaningless when linearized (imagine a reading screen user who hears 1, 2, 3, 4, etc., and then only the title of chapters 1, 2, 3 , 4, etc. Good luck! :))
Or is it difficult to combine with an unordered list?
No, it is not. See http://jsfiddle.net/PhilippeVay/EsYZr/ where only modified lists and (expect) CSS table are used. Semantics is still one of the subscriptions, but visually (and only visually), it looks like a table of rows and cells.
The good part is that you don't have to force the width. Roman type numbers such as XVIII
are quite large, but the table algorithm in browsers will adapt to the content (unless you switch the table algorithm with table-layout: fixed
), as in an HTML table.
source to share
I understand that you want to have roman numbers and chapter names in one list item and treat tables as a solution.
You can of course use tables. Alternatively, you can use a fixed-width span element.
I am using span
to store 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>
Then I 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.
source to share