html - 创建一个三列导航菜单。在允许独立滚动的有效结构方面遇到麻烦

Question

正如标题所说，我正在开发一个三级列导航菜单，类似于 OS X Finder 的列 View 。我的第一种方法本质上是 this 的最小版本(工作演示文件 here )。问题是 s 不允许作为 s 的 child 。一切正常，但无法验证。如果您去掉 s，各个列将不会滚动(即使您将 query-columnnav-1.0.js 中的第 245 行更改为查找 )。

我发现的唯一其他示例是在 Apple 的 dashboard widgets 上网站，但看起来他们只有三个任意的 s，他们根据点击的内容填充内容，这似乎不是解决这个问题的最佳方式。

我以前没有使用过自定义滚动条，但我在想可能会有一个允许通过 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-column-navigation 的链接已损坏的唯一方式。