Đường gạch dưới thẻ định vị neo

Trong trình đơn thẻ, bạn nên cung cấp gợi ý trực quan cho người dùng về trang họ đang truy cập. Một cách là gạch dưới thẻ. Với tính năng định vị neo, bạn có thể tạo ảnh động mượt mà giữa các vị trí của đường gạch dưới. Điều này không hoạt động khi việc thay đổi thẻ đang hoạt động tải một trang web mới.

Bạn cũng có thể sử dụng hiệu ứng này để thêm một dấu chấm động nhằm cho biết thẻ đang hoạt động trong thanh chứa thẻ dọc.

Tạo đường gạch dưới bằng cách sử dụng phần tử giả ::before trên <ul> chứa các phần tử <li>. Bạn nên sử dụng phần tử giả vì phần tử này giúp DOM luôn gọn gàng và tránh thêm các phần tử bổ sung chỉ để trang trí.

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

Đặt mục danh sách đang hoạt động làm neo bằng cách thêm thuộc tính anchor-name có giá trị bắt đầu bằng --.

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

Liên kết đường gạch dưới với neo mục đang hoạt động bằng position-anchor khớp với anchor-name trên neo và đặt thành position: absolute.

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

Đặt vị trí của đường gạch dưới so với điểm neo bằng cách sử dụng các thuộc tính lồng ghép và hàm 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);
}

Thêm chiều cao và các kiểu hình ảnh khác.

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

Cuối cùng, hãy thêm hiệu ứng chuyển đổi vào các thuộc tính 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;
  }
}

Đây chỉ là chỉ báo trực quan và không được thay thế cho việc đặt các giá trị aria aria-current="page" hoặc aria-selected thích hợp.

<!-- 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>

Chiến lược dự phòng

Nếu trình duyệt không hỗ trợ tính năng định vị neo, hãy sử dụng border-bottom để thêm dấu gạch dưới. Nó sẽ không được tạo ảnh động.

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