如何创建大型导航菜单

Question

我正在尝试创建一个包含组和项目的菜单。

目前，代码看起来像这些行

<div id="Layer_01_Category_01_Header" class="Some classes here">
</div>
<div id="Layer_01_Category_01_Content" class="Some classes here">
    <div id="Layer_02_Category_01_Header" class="Some classes here">
    </div>
    <div id="Layer_02_Category_01_Content" class="Some classes here">
        <div id="Layer_03_Category_01_Header" class="Some classes here">
        </div>
        <div id="Layer_03_Category_01_Content" class="Some classes here">
            ITEMS HERE
        </div>
        <div id="Layer_03_Category_02_Header" class="Some classes here">
        </div>
        <div id="Layer_03_Category_02_Content" class="Some classes here">
            ITEMS HERE
        </div>
    </div>
</div>

它的外观如下：https://gyazo.com/74e407b749e3a05574703e5c3b2256b3

这是应该如何工作：

• 1）用户点击打开一个组（盒子左侧有白色三角形）

• 2）属于该组的项目（浅灰色背景）被加载，用户可以点击其中一个项目以查看有关它的更多信息（信息显示在菜单外的另一个div上）< / p>

• 3）用户打开另一个组。先前打开的组将关闭，内容将被隐藏/删除

我希望你明白这一点......（我不善于解释事情）。

现在......我已尝试手动执行此操作，为每个项目添加div，但感觉不是正确的方法，因为：

• A）HTML代码已经有大约400行
• B）页面的加载时间越长越长，我继续扩展这个菜单（我假设？）

我怎样才能以某种自动方式用项目填充组？我想到的是在打开一个组时运行一个脚本，用一个数据库/ xml文件中的项填充它，但我想听听其他解决方案。

Answer 1

我假设以下事情。

1. 层次结构的深度可以是任何级别。
2. 每个级别的长度可以是任何东西。

我建议将菜单从Accordion更改为Cascading样式。

1. 如果层次结构的深度更大，当深度偏移更多列宽时，可能最终会显示带有省略号的半显示名称。请看以下内容
2. 如果单个层次结构中的项目数量更多，则可以使用最终的垂直滚动条。用户体验再次与观看体验不一致。 在这种情况下，您可以更好地使用cascading menu style。请看下面的图片。 但是，对于这种菜单样式，静态或动态加载都可以。虽然，我会建议静态菜单加载并使用CSS来处理悬停和显示＆amp;隐藏。

注意：由于组合方法（手风琴+树）不适合多级和多菜单项，我只是推荐正确的方法。而且我相信，它只需要在css属性中进行很少的研究，如位置，z-index，显示或可见。我把这些东西留给你了。