在
网站建设前要考虑：网站的主要导航对其可用性和可访问性至关重要。然而导航系统看似复杂，除了最简单的网站外，所有网站都必须处理这个问题。
当我们开始创建主题时，我们知道它需要是可用的、可访问的、健壮的和美观的。所有这些目标都带来了重大挑战。为了可用性，我们希望包括类似于互联网上许多网站的二级导航下拉菜单。这些二级导航下拉菜单需要在悬停、单击和触摸时打开。
可访问性是 Drupal 的核心门。我们知道它必须达到或超过 WCAG 2.1 AA 标准。不仅仅是满足标准，我们希望我们的主题能够为那些需要使用辅助技术的人带来乐趣。而且，因为我们不控制内容，所以菜单系统需要非常健壮。我们不知道内容编辑会输入一项还是数百项！我们无法控制文本的长度。我们还支持国际化，包括支持从右到左的语言，例如阿拉伯语。除了这个功能之外，菜单还需要漂亮。我们的设计师做了很棒的模拟工作，然后我们集成了一些基本的 CSS 过渡来添加轻微的淡入、垂直变换的动画。
Olivero 的菜单以标准<nav>元素开始。我们添加了一个aria-labelledby属性，指向一个视觉隐藏（但屏幕阅读器可以访问）h2元素的 ID。这会将导航名称传达给使用屏幕阅读器的人，以便他们区分不同的导航元素。如果用户按标题导航，它还使用户能够找到此菜单。
子菜单在悬停、单击和点击时打开。但是，我们需要确保这些事件不会同时触发（就像在触摸设备上一样），因为如果菜单瞬间打开和关闭，就好像什么都没发生！我们还需要考虑辅助技术，例如点扫描工具，它们可能会快速连续触发这两个事件。为了适应所有这些，我们侦听一个touchstart事件，如果存在，则跳过mouseover事件处理。如果以及当事件处理时，我们会在半秒mouseover内禁止该事件执行任何操作。click最后，当点击事件处理时，我们会显示子菜单。逻辑有点复杂，但它适用于任何辅助技术。
因为主题无法控制用户输入多少菜单项，所以我们必须容纳无限量。我们构建了一个选项，可以在所有屏幕宽度下打开移动菜单（可以容纳无限项）。但是仍然存在边缘情况，可能有足够的中等宽度项目来触发菜单换行或溢出。为了适应这种情况，当主菜单空间不足时，我们切换到移动菜单。为此，我们设置了一个调整大小的观察者来触发检查文本是否被换行。如果是，我们启用移动菜单并记住何时转换回桌面版本（如果视口被放大）。
