Accordion Style多层列表菜单

Question

我环顾四周，尚未找到解决此问题的方法。我有一个带有标记的列表菜单，如此

<div id="menu">
  <ul>
    <li>Category #1
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #2
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #3
      <ul>

        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
    <li>Category #4
      <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
      </ul>
    </li>
  </ul>
</div>

我要做的是使菜单完全水平，当您将鼠标悬停在某个类别上时，它会滑出旁边的项目。 这里的视觉示例

它非常重要，它建立在一个结构化的列表上，据我所知，到目前为止我所检查的手风琴都没有支持这个功能。 有什么想法吗？

Answer 1

精简项目中是否有链接？如果是这样，你可以尝试这样的事情：

li ul {
    display:none;
}
li, ul, a {
    float:left;
    margin:0;
    padding:0;
    outline:1px solid;
}
li:hover ul {
    display:block;
}

这不包括“滑出”功能，但表明您可能需要在每个嵌套ul之前围绕文本使用单独的元素。 （这里的整体造型当然只是概念证明，可以随意跳过大纲;）

Answer 2

这是一个水平的手风琴实现

http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html

水平或垂直取决于浮动元素的方式。

我从以下位置找到了示例

http://www.catswhocode.com/blog/8-amazing-jquery-accordions

Answer 3

的内容

.menu ul {margin：0; padding：0; list-style：none;} .menu li {float：left; top：0;} .menu li ul {display：none; top：0;} .menu li：hover ul {display：inline; top：0;}

将会创建你想要的东西，但问题不在于创建，而是在使用中。这将是出于实际目的 - 如果您将其设置为超出您粘贴的代码的多级别，则会从右侧将孩子悬停到另一个父级，以及无法使用/不可选择的链接。悬停的元素将移出位置（因此不会悬停）并在某些情况下失去其样式和焦点，例如，在示例中将#Item 3悬停到#Category 2会使第3项失去焦点，并且因此，第1类失去焦点，因此#Items 1,2和3将变为不可见，第2类将代替第1项。

如果您只有一个级别的子链接，这仍然有效。对于多个级别，菜单的性质使得许多链接无法访问，因为它们将在点击之前更改位置/隐藏。

为了让它以某种方式工作，你可以使用css3和/或javascript创建出现和消失链接的慢动画，也许有快速反应的人可以选择一些......

不是一个好主意。

最好创建一个手风琴类型的菜单，并使用点击来切换展开和折叠而不是悬停。

PS：我还没有真正测试过我给你的代码。您可能需要测试和调整。

PPS：无论如何“显示：无”的“top：0”是因为如果你最终使用过渡，你不希望它随着它的消失而跳出原位。可选的。

PPPS：我不是说不要这样做，只是告诉你会发生什么。当然，你仍然可以通过使它看起来像一个富有表现力/态度的东西来利用那种迷失方向的崩溃事物。 ....类别背景的重型图像和项目背景的盘绕弹簧....？你得到了思路？