Anchor

Die Seitenindizes folgen dem Scrollen und markieren den Abschnitt, in dem sich die Person befindet.

Auf dieser Seite

Playground

Aktueller Teil

Hintergrund

HTML

<nav class="feitio-anchor" aria-label="Beispielverzeichnis"><p class="title">Auf dieser Seite</p><ul><li><a href="#playground" aria-current="location"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Wann verwenden</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Beispiele</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Barrierefreiheit</a></li></ul></nav>

Wann verwenden

Bei langen Seiten mit mehreren Abschnitten: Dokumentation, eine Anleitung, eine Richtlinie.

Wann nicht verwenden

Kurze Seiten mit einem oder zwei Abschnitten: die Seite passt bereits dem Auge.
Zum Wechseln zwischen Seiten: Navigation.

Beispiele

Der Index

Die Überschriften der Seite (h2 und h3 darunter). Der aktuelle Abschnitt ist in Tinte und fettdruck, mit dem handgezeichneten Pfeil davor. Diese Seite hat ihre eigene, rechts auf breiten Bildschirmen.

Code anzeigen

HTML

<nav class="feitio-anchor" aria-label="Nesta página">
  <p class="title">Nesta página</p>
  <ul>
    <li><a href="#quando">…Quando usar</a></li>
    <li><a href="#exemplos" aria-current="location">…Exemplos</a>
      <ul><li><a href="#ex-mobile">…No mobile</a></li></ul>
    </li>
  </ul>
</nav>

On this page

Auf Mobilgeräten

Der gleiche Index erscheint in einem geschlossenen "On this page" Details oben im Inhalt. Ein Tippen auf einen Abschnitt scrollt zu diesem und schließt die Liste.

Code anzeigen

HTML

<details class="toc-mobile">
  <summary>…Nesta página</summary>
  <nav class="feitio-anchor">…</nav>
</details>

Anatomie

Title: "On this page".
Section: ein Link pro h2, in weicher Tinte.
Current section: Tinte, fettdruck und der handgezeichnete Pfeil. Kein Seitenstreifen.
Subsection: die h3s, einen Schritt weiter.

States

Scrolling: der markierte Abschnitt ändert sich dabei, mit der Übergangsbewegung; am Ende der Seite bleibt der letzte markiert.
Tap on a section: die Seite scrollt sanft zu ihr, und die Adresse folgt.
Index taller than the screen: es scrollt von selbst, mit ScrollFade.

Do and don't

Der aktuelle Abschnitt mit Tinte, fettdruck und dem Pfeil.

Don’t

Der orangefarbene Seitenstreifen: das Markenzeichen jedes generischen Doksites.

Ein benanntes <nav>; der aktuelle Abschnitt mit aria-current="location".
Bei Berührung geht der Fokus zum Abschnittstitel.

Attribute

Attribut	Werte	Zum Zweck
`class="feitio-anchor"`	im `<nav>`	Die Liste der Abschnitte, wobei der aktuelle markiert ist.
`aria-current="location"`	am aktuellen Abschnitt	Tinte, Fett und Pfeil; festgelegt durch das Skript.
`id`	an jedem `h2` und `h3`	Ohne ein `id` bleibt der Überschriftsabschnitt außerhalb des Indexes.