Navigasyon ve Okuma

Sidemenu

Uzun dokümanlarda section h2[id], h3[id], h4[id] başlıklarından otomatik yan menü üretir. İstenirse h2 içindeki rozet veya kategori etiketiyle üst seviye gruplar oluşturur.

Kod

Dikkat

• Başlıklarda id olmalıdır.
• Varsayılan içerik kapsayıcısı .containerdır.
• HTML iskeletinde #sidenav, #sidenavOverlay, #sidenav-body eksik olmamalıdır.
• Grup etiketi kullanılıyorsa groupSelector ilgili h2 içindeki elementi seçmelidir.

Search

Ctrl+K veya arama butonu ile sayfa içi arama modalı açar. Bu sayfanın sağ üstündeki arama butonu canlı örnektir.

Kod

Çıktı

Scroll Top

Sayfa aşağı kaydırıldığında sağ altta başa dön butonu gösterir. Bu sayfada da canlı olarak aktiftir.

Reading Progress

Uzun makale ve teknik dokümanlarda kullanıcının okuma ilerlemesini sayfanın üstündeki ince çizgiyle gösterir. Bu rehberin en üstündeki çizgi canlı örnektir.

Kod

Çıktı

Navigation Progress

Bir bağlantıya tıklandıktan sonra yeni sayfa açılana kadar ekranın altında ince bir ilerleme çizgisi gösterir. Üstteki Reading Progress okuma konumunu, alttaki Navigation Progress ise sayfa geçişinin sürdüğünü anlatır.

Kod

Ek HTML elementi veya yapılandırma gerekmez. Script, göstergeyi sayfaya otomatik ekler ve normal bağlantı tıklamalarını dinler.

Çalışma Akışı

1. Kullanıcı aynı sekmede açılan normal bir sayfa bağlantısına tıklar.
2. Gösterge ekranın altında belirir ve yeni sayfa yüklenirken ilerler.
3. Yeni sayfa açıldığında veya kullanıcı geri/ileri geçmişinden döndüğünde gösterge temizlenir.

Bu gösterge gerçek indirme yüzdesini ölçmez; bağlantı tıklaması ile yeni sayfanın açılması arasındaki bekleme süresine görünür geri bildirim verir.

Davranış

• Aynı sekmede açılan HTTP ve HTTPS bağlantılarında çalışır.
• Yeni sekme, indirme, e-posta, telefon ve sayfa içi anchor bağlantılarını yok sayar.
• Okuma ilerlemesiyle karışmaması için ekranın altında konumlanır.
• prefers-reduced-motion tercihini destekler.
• Tarayıcının geri/ileri önbelleğinden dönüldüğünde göstergeyi otomatik temizler.