Question

我对如何分割大型菜单以使用HTML 5概述模型感到困惑。我已经创建了一个jsfiddle来显示准系统标记（请忽略css，这只是针对此问题的大脑转储）并且也会粘贴下面的html。

与<section />标记相比，我的混淆取决于列表项的逻辑关联。在提供的html中，您将看到我仅使用<div />和<ul />来构建标记。如果我通过一个概述工具运行这个，我会得到一堆内容，没有明确的结构。在实际菜单中，内容区域中大约有20个标题。我无法真正控制这些标题是什么（即它们是<h2 />还是<h3 />等等。

任何人都可以给我一些关于从哪里开始的指导。我已经尝试在<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>

如何使用HTML 5分割大型菜单

0 个答案: