Создание трехколоночного навигационного меню.Возникли проблемы с правильным структурированием, которое позволяет независимую прокрутку

Question

Как гласит заголовок, я работаю над трехуровневым меню навигации по столбцам, похожим на представление столбцов для OS X Finder. Моим первым подходом была минимальная версия this (рабочие демонстрационные файлы здесь ). Проблема в том, что s не допускаются как дети s. Все работает хорошо, но это не будет проверять. Если вы уберете s, отдельные столбцы не будут прокручиваться (даже если вы измените строку 245 в query-columnnav-1.0.js для поиска).

Единственный другой пример этого, который я обнаружил, находится на сайте виджетов панели управления Apple , но, похоже, у них просто три произвольных элемента, которые они заполняют содержимым в зависимости от того, что нажимается, а это не так. кажется, лучший способ сделать это.

Раньше я не использовал пользовательские полосы прокрутки, но я подумал, что, возможно, есть такая, которая позволит прокручивать через позиционирование javascript или что-то в этом роде.

Приятно отметить: сайт предназначен для студентов в моем университете, и после того, как сайт был открыт в течение одного семестра, у нас было два хита из IE (8.0 и 9.0), а все остальные были из последних браузеров. Из-за этого мы можем разрешить CSS3 и HTML5, если они имеют изящные запасные варианты. Если браузер выходит из строя ужасно, мы просто скажем ему обновить его, и это не будет для нас большой потерей.

tl; dr: Мне нужны идеи о том, как структурировать навигацию по столбцам, чтобы каждый столбец мог прокручиваться независимо. Предыдущие попытки не подтверждаются. Не работайте с IE или более старыми браузерами. Спасибо!

Редактировать: Я смотрю на jScrollPane прямо сейчас. Это может быть то, что я хочу. Тем не менее, все еще ищу совет.

Edit2: Я не уточнил, HTML генерируется следующим образом:

<ul class="all departments">
    <li class="first department">
        <ul class="all courses in department">
            <li class="first course">
                <ul class="all sections on course">
                  <li class="first section"></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

Если я понимаю, что вы пытаетесь сделать правильно, вы можете просто использовать действительно простой CSS, чтобы он работал.Контейнер div с тремя меньшими div внутри него, которые плавают влево и вынуждены прокручиваться.Вот так:

div.columncont
{
 height: 500px;
 width: 600px;
}
div.column
{
 width: 200px;
 float: left;
 height: 100%;
 overflow-y: scroll;
}

Просто отрегулируйте размеры в соответствии с тем, что вы пытаетесь сделать.Я сделал пример jsFiddle

Кроме того, у меня нет разрешений на комментирование, так что это мой единственный способ сообщить вам, что ваша ссылка на навигацию по столбцу jquery не работает.