Website-Navigation und CSS: Das „Current-Problem“

Die Navigationsdarstellung von Websites profitiert oft davon, wenn die jeweils sichtbare Webseite im Navigationskontext angezeigt und visuell mitgeteilt wird, dass man sich auf ihr befindet:

Da weder HTML noch CSS für diese Usability-Aufgabe eine standardisierte Lösung anbieten, hat sich bei Webdesignern eingebürgert, den Link der jeweils sichtbaren Seite mit der CSS ID „current“ zu versehen und in der CSS-Deklaration a#current besondere Farb- und Hover-Eigenschaften zuzuweisen. Problematisch dabei ist, dass die Auszeichnung des Links in automatischer Form nicht ganz einfach zu realisieren ist oder sie – aufwändig und fehlerträchtig – händisch erfolgen muss. Es existieren mehrere Lösungsansätze für das Problem, mittels Javascript, Includes oder PHP, alle mit mehr oder weniger großen Nachteilen und oft recht großem Overhead.

Ein weiterer Lösungsvorschlag

Für das CMS eines meiner Kunden waren alle mir bekannten Lösungen unbrauchbar, und ich musste neue Wege suchen. Die dort nun realisierte Lösung skizziere ich hier; ich kann mir vorstellen, dass sie für viele Konstellationen die einfachste Lösung darstellt.

1. Jede Webseite erhält eine eindeutige Identifikationsnummer

Je nach technischem Kontext bieten sich hierfür beispielsweise fortlaufende Nummern an, das Erstellungsdatum, Pfad plus Dateinamen, jeweils eventuell als Hash bzw. als Kurz-URL. Diese Zuordnung der Identifikationsnummer kann manuell erfolgen oder dynamisch; in vielen Content Management Systemen lassen sich solche Nummern mit PHP über vordefinierte Variablen aus der Datenbank holen, bei manchen CMS ist bereits der Dateiname eindeutig und kann als ID verwendet werden.

2. Aus der Identifikationsnummer wird ein ID-Selektor

Diese CSS-Deklaration erfolgt in Form eines eingebetteten Stylesheets im Head-Bereich der Seite. Der ID-Selektor beschreibt die optische Veränderung, die der „current“ Link erhalten soll. Hier ein Beispiel für die Webseite mit der Identifikationsnummer nr002:

<style type=“text/css“><!– a#nr002 {color:#999;} //–></style>

3. Links werden mit den korrespondierenden ID-Selektoren versehen

<a id=“nr001″ href=“hosen.html“>Hosen</a>
<a id=“nr002″ href=“buecher.html“>Bücher</a>
<a id=“nr003″ href=“tassen.html“>Tassen</a>
…

Zusammenfassung

Generell werden also bei dieser Methode Links mit eindeutigen Identifikationsnummern als IDs gekennzeichnet (z.B. <a id=“nr002″ …). Da diese Links nicht mehr weiter verändert werden müssen (kein id=“current“), können sie ohne Probleme durch das CMS erzeugt werden. Eine CSS-Deklaration (internes Stylesheet im Head) erfolgt nur im aktuellen Dokument für die ID des jeweiligen Dokuments (z.B. a#nr002 { color: #999; }). Es erfolgt keine zusätzliche Deklaration der ID-Selektoren in externen Stylesheets, und die jeweils nicht als „current“ darzustellenden IDs sind nicht deklariert.