Sabit Konumlandırma Sekmesi Alt Çizgisi

Sekme menüsünde, kullanıcılara hangi sayfada olduklarına dair görsel ipuçları vermeniz gerekir. Sekmenin altını çizmek bu seçeneklerden biridir. Sabit konumlandırma sayesinde alt çizginin konumları arasında yumuşak bir animasyon oluşturabilirsiniz. Etkin sekme değiştirildiğinde yeni bir web sayfası yükleniyorsa bu özellik çalışmaz.

Bu efekti, dikey sekme çubuğundaki etkin sekmeyi belirtmek için animasyonlu bir nokta eklemek amacıyla da kullanabilirsiniz.

<li> öğelerini içeren <ul> üzerinde bir ::before sözde öğesi kullanarak alt çizgiyi oluşturun. DOM'u temiz tuttuğu ve yalnızca dekoratif efektler için fazladan öğe eklemeyi önlediği için sözde öğe kullanmak tercih edilen yaklaşımdır.

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

Değeri -- ile başlayan anchor-name özelliğini ekleyerek etkin liste öğesini bir bağlantı haline getirin.

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

Alt çizgiyi, bağlantı noktasındaki anchor-name ile eşleşen bir position-anchor ile etkin öğe bağlantı noktasına bağlayın ve position: absolute yapın.

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

İç metin özelliklerini ve anchor() işlevlerini kullanarak alt çizgiyi bağlantı noktasına göre konumlandırın.

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

Yükseklik ve diğer görsel stilleri ekleyin.

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

Son olarak, inset özelliklerine bir geçiş ekleyin.

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

Bu yalnızca görsel bir göstergedir ve uygun aria-current="page" veya aria-selected aria değerlerini ayarlamanın yerini almamalıdır.

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

Yedek stratejiler

Sabit konumlandırma tarayıcıda desteklenmiyorsa alt çizgi eklemek için border-bottom kullanın. Animasyonlu olmayacaktır.

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