构建侧边导航栏组件

有关如何构建自适应滑出式侧边栏的基础概览

Adam Argyle

在本文中，我想与您分享如何为 Web 原型化一个响应式、有状态、支持键盘导航、在有和无 JavaScript 的情况下都能正常运行且可跨浏览器使用的侧边导航栏组件。试用演示版。

如果您更喜欢视频，请观看此帖子的 YouTube 版本：

概览

构建自适应导航系统非常困难。有些用户会使用键盘，有些用户会使用功能强大的桌面设备，有些用户则会使用小屏幕移动设备进行访问。访问者应该都能打开和关闭菜单。

桌面版到移动版响应式布局演示
iOS 和 Android 上的浅色和深色主题下拉菜单

网站策略

在这次组件探索中，我很高兴能够结合使用一些关键的 Web 平台功能：

  1. CSS :target
  2. CSS 网格
  3. CSS 转换
  4. 适用于视口和用户偏好的 CSS 媒体查询
  5. 适用于 focus 的 JS 用户体验增强

我的解决方案有一个边栏，并且仅在“移动”视口大小小于或等于 540px 时切换。 540px 将成为我们在移动互动布局和静态桌面布局之间切换的断点。

CSS :target 伪类

一个 <a> 链接将网址哈希设置为 #sidenav-open，另一个将其设置为空（''）。最后，一个元素具有与哈希匹配的 id：

<a href="#sidenav-open" id="sidenav-button" title="Open Menu" aria-label="Open Menu">

<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>

<aside id="sidenav-open">
  …
</aside>

点击其中任一链接都会更改网页网址的哈希状态，然后我使用伪类显示和隐藏侧边栏：

@media (max-width: 540px) {
  #sidenav-open {
    visibility: hidden;
  }

  #sidenav-open:target {
    visibility: visible;
  }
}

CSS 网格

以前，我只使用绝对或固定位置的侧边栏布局和组件。不过，借助网格的 grid-area 语法，我们可以将多个元素分配给同一行或同一列。

堆栈

主要布局元素 #sidenav-container 是一个网格，用于创建 1 行和 2 列，其中每行和每列各有一个名为 stack 的元素。当空间受限时，CSS 会将 <main> 元素的所有子元素分配给相同的网格名称，将所有元素放入同一空间，从而创建一个堆叠。

#sidenav-container {
  display: grid;
  grid: [stack] 1fr / min-content [stack] 1fr;
  min-height: 100vh;
}

@media (max-width: 540px) {
  #sidenav-container > * {
    grid-area: stack;
  }
}

<aside> 是包含侧边导航栏的动画元素。它有 2 个子项：名为 [nav] 的导航容器 <nav> 和名为 [escape] 的背景 <a>，用于关闭菜单。

#sidenav-open {
  display: grid;
  grid-template-columns: [nav] 2fr [escape] 1fr;
}

调整 2fr 和 1fr，找到适合菜单叠加层及其负空间关闭按钮的比例。

演示了更改比例后会出现的情况。

CSS 3D 转换和过渡

我们的布局现在在移动设备视口大小下采用堆叠方式。在添加一些新样式之前，它会默认叠加在我们的文章上。下面是我在下一部分中力求实现的一些用户体验：

  • 添加打开和关闭动画
  • 仅在用户同意的情况下使用动画
  • 为 visibility 添加动画，以免键盘焦点进入屏幕外元素

在开始实现动画时，我会先考虑无障碍功能。

无障碍动作

并非所有用户都希望获得滑出动画体验。在我们的解决方案中，通过调整媒体查询中的 --duration CSS 变量来应用此偏好设置。此媒体查询值表示用户的操作系统动作偏好设置（如果有）。

#sidenav-open {
  --duration: .6s;
}

@media (prefers-reduced-motion: reduce) {
  #sidenav-open {
    --duration: 1ms;
  }
}
演示了应用和未应用时长时的互动效果。

现在，当侧边栏滑动打开和关闭时，如果用户希望减少动作，我会立即将元素移至视图中，在不动作的情况下保持状态。

转换、转换、平移

侧边导航栏收起（默认）

为了将移动设备上侧边栏的默认状态设为屏幕外状态，我使用 transform: translateX(-110vw) 来定位该元素。

请注意，我向 -100vw 的典型屏幕外代码添加了另一个 10vw，以确保侧边栏的 box-shadow 在隐藏时不会窥探主视口。

@media (max-width: 540px) {
  #sidenav-open {
    visibility: hidden;
    transform: translateX(-110vw);
    will-change: transform;
    transition:
      transform var(--duration) var(--easeOutExpo),
      visibility 0s linear var(--duration);
  }
}
侧边导航栏

当 #sidenav 元素与 :target 匹配时，将 translateX() 位置设置为 homebase 0，然后观察 CSS 如何在更改网址哈希时将元素从“out”位置 -110vw 滑动到“in”位置 0 上方 var(--duration)。

@media (max-width: 540px) {
  #sidenav-open:target {
    visibility: visible;
    transform: translateX(0);
    transition:
      transform var(--duration) var(--easeOutExpo);
  }
}

过渡可见性

现在的目标是在菜单处于展开状态时，将其隐藏起来，以免系统将焦点置于屏幕外菜单。我通过在 :target 发生变化时设置可见性转换来实现这一点。

  • 进入时，不要转换可见性；立即显示，以便我看到元素滑入并接受焦点。
  • 在退出时，转换可见性，但延迟转换，以便在转换结束时切换为 hidden。

无障碍功能用户体验增强

此解决方案需要更改网址才能管理状态。当然，此处应使用 <a> 元素，它可以免费获得一些出色的无障碍功能。我们将为互动元素添加标签，以清晰说明其意图。

<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>

<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
  <svg>...</svg>
</a>
旁白和键盘互动体验的演示。

现在，我们的主要互动按钮在鼠标和键盘上都明确说明了其用途。

:is(:hover, :focus)

借助这个实用的 CSS 函数伪选择器，我们可以将悬停样式与聚焦样式共享，从而快速实现包容性。

.hamburger:is(:hover, :focus) svg > line {
  stroke: hsl(var(--brandHSL));
}

添加 JavaScript

按 escape 即可关闭

键盘上的 Escape 键应该可以关闭菜单，对吗？我们来接线。

const sidenav = document.querySelector('#sidenav-open');

sidenav.addEventListener('keyup', event => {
  if (event.code === 'Escape') document.location.hash = '';
});
浏览器历史记录

为了防止打开和关闭互动将多个条目堆叠到浏览器历史记录中，请将以下 JavaScript 内嵌到关闭按钮中：

<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)"></a>

这会在关闭时移除网址历史记录条目，使其看起来就像从未打开过菜单。

专注模式用户体验

以下代码段可帮助我们在打开或关闭后将焦点放在“打开”和“关闭”按钮上。我希望让切换变得简单。

sidenav.addEventListener('transitionend', e => {
  const isOpen = document.location.hash === '#sidenav-open';

  isOpen
      ? document.querySelector('#sidenav-close').focus()
      : document.querySelector('#sidenav-button').focus();
})

侧边栏打开后，将焦点移至关闭按钮。当侧边栏关闭时，将焦点移至“打开”按钮。我通过在 JavaScript 中对元素调用 focus() 来实现此目的。

总结

现在您已经知道我是如何做到的，您会怎么做呢？这会带来一些有趣的组件架构！ 谁将制作包含槽位的第一个版本？🙂

让我们多元化我们的方法，了解在 Web 上构建的所有方式。创建一个 Glitch，然后在推特上向我发送您的版本，我会将其添加到下方的社区混剪部分。

社区混剪作品