Podkreślenie karty pozycjonowania kotwicy

W menu kart należy podać użytkownikom wskazówki wizualne dotyczące strony, na której się znajdują. Jednym ze sposobów jest podkreślenie karty. Dzięki pozycjonowaniu zakotwiczonemu możesz utworzyć płynną animację między pozycjami podkreślenia. Nie działa to, gdy zmiana aktywnej karty powoduje wczytanie nowej strony internetowej.

Możesz też użyć tego efektu, aby dodać animowaną kropkę wskazującą aktywną kartę na pionowym pasku kart.

Utwórz podkreślenie za pomocą pseudoelementu ::before w elemencie <ul>, który zawiera elementy <li>. Użycie pseudoelementu jest preferowanym podejściem, ponieważ pozwala zachować czystość DOM i uniknąć dodawania dodatkowych elementów w celu uzyskania efektów czysto dekoracyjnych.

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

Ustaw aktywny element listy jako kotwicę, dodając właściwość anchor-name, której wartość zaczyna się od --.

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

Połącz podkreślenie z kotwicą aktywnego elementu za pomocą position-anchor, który pasuje do anchor-name na kotwicy, i ustaw position: absolute.

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

Ustaw podkreślenie względem kotwicy, używając właściwości wstawki i funkcji anchor().

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);
}

Dodaj wysokość i inne style wizualne.

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

Na koniec dodaj przejście we właściwościach inset.

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;
  }
}

Jest to tylko wskaźnik wizualny i nie może zastępować ustawienia odpowiednich wartości aria aria-current="page" lub 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>

Strategie zastępcze

Jeśli przeglądarka nie obsługuje pozycjonowania kotwicy, użyj border-bottom, aby dodać podkreślenie. Nie będzie animowany.

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