1

我对如何划分大型菜单以使用 HTML 5 大纲模型有点困惑。我创建了一个jsfiddle来显示准系统标记（请忽略 css，出于这个问题的目的，它只是一个大脑转储），并将在下面粘贴这个 html。

<section />与标签相比，我的困惑在于列表项的逻辑关联。在提供的 html 中，您将看到我只使用<div />s 和<ul />s 来构建标记。如果我通过大纲工具运行它，我会得到一团糟的内容，没有清晰的结构。在实际菜单中，内容区域中大约有 20 个标题左右。我无法真正控制这些标题是什么（即它们是<h2 />s 还是<h3 />s 等）。

谁能给我一些关于从这里去哪里的指导。我已经尝试将所有在其下拉列表中包含内容的锚点包装在<h2 />标签中，然后将这些加上<section/>标签中的拖放内容包装起来。这使大纲看起来正确，但我不确定它是否正确。

我原以为我可以使用一些 ARIA 角色，但是，我再次对它如何与<section />s 和标题以及列表项一起使用感到困惑！

任何建议将不胜感激！

谢谢

显示超级菜单不同可能内容的基本 html 大纲

<nav>
    <h2>Main menu</h2>
    <ul>
        <li class="has-mega">
            <a href="#">Level 1 - Mix of varying content and children</a>
            <div class="mega">
                <ul>
                    <li class="has-mega">
                        <a href="#">Level 2</a>
                        <div class="mega">
                            <ul>
                                <li class="has-mega">
                                    <a href="#">Level 3</a>
                                    <div class="mega">
                                        <h2>Heading</h2>
                                        <p>Any content can go here</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="has-mega">
                        <a href="#">Level 2</a>
                        <div class="mega">
                            <h2>Heading</h2>
                            <p>Any content can go here</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">Level 2</a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="has-mega">
            <a href="#">Level 1 - Mix of children</a>
            <div class="mega">
                <ul>
                    <li class="has-mega">
                        <a href="#">Level 2</a>
                        <div class="mega">
                            <ul>
                                <li>
                                    <a href="#">Level 3</a>
                                </li>
                                <li>
                                    <a href="#">Level 3</a>
                                </li>
                                <li>
                                    <a href="#">Level 3</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">Level 2</a>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <a href="#">Level 1 - No drop content at all</a>
        </li>
    </ul>
</nav>
4

0 回答 0