响应式下拉菜单栏_建立响应式下拉菜单的6个最佳实践

响应式下拉菜单栏

创建响应式下拉菜单是一项棘手的任务。 在设计和开发阶段，您必须做出许多决定。 推荐的解决方案通常取决于您正在构建的网站或应用程序的特征。 但是，对于所有类型的响应下拉菜单，也推荐一些常规最佳实践。

1.使用移动优先设计

问题

尽管先为台式机屏幕设计菜单然后将其适应较小的视口似乎比较容易，但通常情况并非如此，尤其是在菜单具有下拉菜单的情况下。

如果您首先设计用于台式机的菜单，它可能会很快变得复杂，并且最终可能会在移动设备上出现一个非常长的菜单，用户仅需不断滚动就可以滚动，而没有到达终点！

解

您可以使用min-width媒体查询而不是max-width min-width媒体查询来实现移动优先设计：

@media all and (min-width: 960px) {
    // ...
}

使用min-width媒体查询时，移动设计将是默认设置，您将通过先移动到平板电脑然后移动到台式机屏幕来添加规则（或者在某些情况下，甚至不需要为平板电脑单独设计） 。

从性能的角度来看，这也很重要。 如果使用移动优先设计，则智能手机（经常通过计量数据连接或不连续的wifi访问您的网站）必须评估较少的样式规则，因为它们可以跳过媒体查询块。

2.重新排序菜单项

问题

在许多情况下，您可能希望在移动设备，平板电脑和台式机屏幕上以不同的顺序显示菜单和子菜单项，但希望保持HTML大纲的逻辑性和可访问性。

解

使用order属性，可以更改菜单项的可视顺序，同时保持DOM不变。

根据经验，HTML大纲中的菜单项应遵循最适合屏幕阅读器和其他辅助技术用户的顺序。 不要忘记，搜索引擎机器人也只类似于HTML阅读器，而看不到视觉顺序，因此它也类似于屏幕阅读器。

这是一个由号召性用语按钮和菜单链接组成的菜单示例。 我们希望号召性用语（CTA）出现在移动设备和平板电脑上的菜单开头，以及桌面设备上的菜单结尾。 在HTML中，菜单链接将排在最前面（但是，这不是必须的，因为在某些情况下，您可能想将号召性用语按钮放在屏幕阅读器用户的前面）。

<nav>
        <ul>
            <li class="mlink">Menu Link 1</li>
            <li class="mlink">Menu Link 2</li>
            <li class="mlink">Menu Link 3</li>
            <li class="cta">CTA 1</li>
            <li class="cta">CTA 2</li>   
        </ul>
    </nav>

由于order的默认值为0，因此您不必为第一个元素更改它。 对于视觉顺序中的第二个元素，其值为1。对于第三个元素，其值为2，依此类推。 请注意， order也可以取负值。 因此，CSS如下所示：

ul {
    display: flex;
}
.mlink {
    order: 1;
}
&