Das „Active“-Dilemma

Der CSS-Standard kennt die Pseudo-Klasse :active, mit der ein „aktiver“ Link markiert wird. Das funktioniert. Zumindest so lange der Link angeklickt wird. Damit ein Link auf der Seite selbst dauerhaft als „hier bist du“ angezeigt wird, muss dafür entsprechend Code auf der Seite stehen.

Damit Besuchende wissen, in welchem Bereich einer Webseite sie gerade sind, ist eine Markierung in der Seitensteuerung hilfreich. „:active“ wäre dafür bei genauerer Betrachtung ungeeignet. Das gilt lediglich für genau eine Referenz, Bereiche können jedoch unbestimmt viele Dateien enthalten.

Lösung via PHP

Mit einer Yaml-Variable gruppe kann ein Leer-Array mit einem passenden Eintrag gefüllt werden:

<?php $m = array_fill⟨0, 5, ''⟩; isset⟨$gruppe⟩?$m[$gruppe]='class="active" aria-current="page" ':''; ?>
<nav>
<div><a <?php echo $m[0] ?>href="/">Start</a></div>
<div><a <?php echo $m[1] ?>href="/grundlagen/index">Grundlagen</a></div>
<div><a <?php echo $m[2] ?>href="/editor/index">Editor</a></div>
<div><a <?php echo $m[3] ?>href="/tipps/index">Tipps & Tricks</a></div>
</nav>

Ein leeres Array bekommt für den gewünschten Menüeintrag einen Inhalt.

Lösung ohne Skript

Die vorangegangene PHP-Lösung kann mit einer „Variablengruppe“, bei der es in jeder Datei lediglich eine davon gibt, nachgebildet werden:

<nav>
<div><a  href="/">Start</a></div>
<div><a  href="/grundlagen/index">Grundlagen</a></div>
<div><a  href="/editor/index">Editor</a></div>
<div><a  href="/tipps/index">Tipps & Tricks</a></div>
</nav>

Im Yaml-Header jeder Datei wird die Marke mittels einer „gruppeX“-Variable der Navigation zugewiesen:

---
…
gruppe3:class="active" aria-current="page"
…
---

Welchen Namen die Variable und die Klasse tatsächlich bekommt, ist dabei unerheblich. Maßgeblich ist: Fehlende Variablen werden entfernt, die „gesetzte“ Variable wird ausgefüllt. Das entspricht dem Verhalten des PHP-SKripts, doch diese Variante funktioniert gleichermaßen offline ohne PHP-Interpretation.