как структурировать это меню

Question

Я работаю над меню (изображения, созданные с помощью indesign, но не в формате html):

Некоторые параметры меню загружают содержимое в другой div (столбец рядом сЭто).Однако для опции «СОДЕРЖАНИЕ» я хочу новый список опций, подобный этому:

Он должен свернуть вещь «СОДЕРЖАНИЕ».

Atm все сделанос помощью jquery / javascript, поэтому он динамический (например, загрузка другой книги).Мне было интересно для меню CONTENT, я должен поместить div в CONTENT, который содержит таблицу из 2 строк?Одна таблица для римских чисел и 1 для названия главы.Или это трудно объединить с неупорядоченным списком?

http://jsfiddle.net/cmTpR/

Answer 1

я должен поместить div в CONTENT, который содержит таблицу из 2 строк? Одна таблица для римских чисел и 1 для названия главы.

Полагаю, вы имеете в виду 2 столбца?
Как вы можете быть уверены, что 1 глава будет занимать ровно 1 строку? Они довольно длинные, что происходит, если одна из них занимает 2 строки, что если у пользователя нет шрифта, указанного вами в font-family, и запасной вариант больше? Что, если он увеличит масштаб на 1, 2, до 6 уровней (текста) в соответствии с Рекомендацией W3C / WAI WCAG 2.0 о доступности.

2 таких столбца также означают, что ваш контент не будет иметь смысла при линеаризации (представьте себе пользователя программы чтения с экрана, который слышит 1, 2, 3, 4 и т. Д., А затем только название глав 1 , 2, 3, 4 и т. Д. Удачи! :))

Или это сложно объединить с неупорядоченным списком?

Нет, это не так. См. http://jsfiddle.net/PhilippeVay/EsYZr/, где используются только скрытые списки и (подождите) макет таблицы CSS. Семантика все еще является частью подсписка, но визуально (и только визуально) она похожа на таблицу, состоящую из строк и ячеек.

Хорошая часть в том, что вам не нужно форсировать ширину. Римские числа, такие как XVIII, довольно большие, но алгоритм таблиц в браузерах будет адаптироваться к контенту (если вы не переключаете алгоритм таблиц с помощью table-layout: fixed), как с таблицей HTML.

Answer 2

Я понимаю, что вы хотите, чтобы римские числа и названия глав были в одном элементе списка, и вы рассматриваете таблицы как решение.

Вы, безусловно, можете использовать таблицы.Кроме того, вы можете использовать элемент span с фиксированной шириной.

Я использую span для хранения римских чисел

<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>

Затем я назначаю фиксированную ширину для span

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

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

Надеюсь, что это ответ на ваш вопрос