Unterstreichung des Tabs für die Ankerpositionierung

In einem Tab-Menü sollten Sie den Nutzenden visuelle Hinweise darauf geben, auf welcher Seite sie sich befinden. Eine Möglichkeit besteht darin, den Tab zu unterstreichen. Mit der Ankerpositionierung können Sie eine flüssige Animation zwischen den Positionen der Unterstreichung erstellen. Das funktioniert nicht, wenn beim Ändern des aktiven Tabs eine neue Webseite geladen wird.

Sie können diesen Effekt auch verwenden, um einen animierten Punkt hinzuzufügen, der den aktiven Tab in einer vertikalen Tab-Leiste anzeigt.

Erstellen Sie die Unterstreichung mit einem ::before-Pseudoelement für das <ul>-Element, das die <li>-Elemente enthält. Die Verwendung eines Pseudoelements ist die bevorzugte Methode, da das DOM dadurch sauber bleibt und keine zusätzlichen Elemente für rein dekorative Effekte hinzugefügt werden müssen.

ul::before {
  /* Use a pseudo-element on the container to represent the animated indicator */
  content: '';
}

Machen Sie das aktive Listenelement zu einem Anker, indem Sie das Attribut anchor-name hinzufügen, dessen Wert mit -- beginnt.

li.active {
  /* Make a unique anchor-name for the active element. */
  anchor-name: --active;
}

Verbinden Sie die Unterstreichung mit dem Anker des aktiven Elements. Verwenden Sie dazu einen position-anchor, der mit dem anchor-name des Ankers übereinstimmt, und legen Sie position: absolute fest.

ul::before {
  /* Tether the underline to the active element. */
  position: absolute;
  position-anchor: --active;
}

Positionieren Sie die Unterstreichung relativ zum Anker mithilfe der Inset-Eigenschaften und der anchor()-Funktionen.

ul::before {
  /* DO NOT use position-area, which can not be transitioned. */
  /* Use calc() to offset the top slightly */
  inset-block-start: calc(anchor(bottom) + .1lh);
  inset-inline-start: anchor(left);
  inset-inline-end: anchor(right);
}

Fügen Sie eine Höhe und andere visuelle Stile hinzu.

ul::before {
  /* Apply your project's styles for the indicator */
  block-size: .25lh;
  background: red;
}

Fügen Sie schließlich einen Übergang für die inset-Eigenschaften hinzu.

ul::before {
  @media (prefers-reduced-motion: no-preference) {
    /* MANDATORY: The transition must be wrapped in a prefers-reduced-motion media query to respect user preferences. */
    transition: inset .2s;
  }
}

Dies ist nur ein visueller Indikator und kein Ersatz für die Festlegung der entsprechenden ARIA-Werte aria-current="page" oder aria-selected.

<!-- MANDATORY: Provide explicit assistive technology state alongside the visual tab underline -->
<nav aria-label="Primary">
  <ul>
    <li class="active">
      <a href="/home" aria-current="page">Home</a>
    </li>
    <li>
      <a href="/about">About</a>
    </li>
  </ul>
</nav>

Fallback-Strategien

Wenn die Ankerpositionierung im Browser nicht unterstützt wird, verwenden Sie ein border-bottom, um eine Unterstreichung hinzuzufügen. Es wird nicht animiert.

ul li.active {
  @supports not (position-anchor: auto) {
    /* Choose a color appropriate to the app theme. */
    border-bottom: .25lh var(--primary) solid;
  }
}