Navigation erstellen: Von einer Seite zu vielen

vom 07.11.2022 von Oliver Misch

Eine Homepage mit nur einer Seite ist wie eine Wohnung mit nur einem Zimmer, geht, aber irgendwann will man Türen. In diesem Teil bekommt deine Seite Unterseiten und ein Menü das sie verbindet.

Schritt 1: Unterseiten anlegen

Leg neben deine index.html zwei weitere Dateien in denselben Ordner: projekte.html und kontakt.html. Beide bekommen dasselbe Grundgerüst wie die Startseite, nur mit eigenem title und eigener h1. Untereinander verlinkt wird mit relativen Pfaden, also einfach dem Dateinamen: href="projekte.html".

Schritt 2: Das Menü als Liste

In den header jeder Seite

<nav aria-label="Hauptnavigation">
    <ul>
        <li><a href="index.html">Start</a></li>
        <li><a href="projekte.html">Projekte</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
</nav>

Warum eine Liste im nav-Element? Weil ein Menü inhaltlich genau das ist: eine Liste von Zielen. Screenreader können den Block dann als Navigation ansagen und überspringen. Das Menü kommt identisch in alle drei Dateien, ja, dreimal einfügen, bei Handarbeit ohne Baukasten gehört das dazuu.

Schritt 3: Mit Flexbox in die Reihe

Ins CSS

nav ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
nav a {
    display: block;
    padding: 8px 14px;
    text-decoration: none;
    color: #008080;
}
nav a:hover, nav a:focus {
    background: #008080;
    color: white;
}

Drei Handgriffe passieren hier: list-style: none entfernt die Aufzählungspunkte, Flexbox stellt die Punkte nebeneinander, und die Links werden per display: block zu ordentlich großen Klickflächen mit Hover-Effekt.

Schritt 4: Zeigen wo man ist

Auf jeder Seite markierst du den eigenen Menüpunkt, am saubersten mit aria-current="page" am jeweiligen Link. Das transportiert die Information auch an Hilfstechnik, und stylen lässt es sich direkt:

nav a[aria-current="page"] {
    background: #008080;
    color: white;
}

Fertig ist ein Menü nach allen Regeln der Kunst. Als nächstes füllen wir die Seiten: Bilder einbinden wartet.

Der Skip-Link: Abkürzung für Tastatur und Screenreader

Wer mit Tab durch eine Seite wandert, muss sich sonst auf jeder Unterseite erst durchs komplette Menü drücken. Die Lösung ist ein Sprunglink als allererstes Element im body:

<a class="skip" href="#inhalt">Zum Inhalt springen</a>
...
<main id="inhalt">

.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus {
    left: 8px;
    top: 8px;
}

Der Link parkt unsichtbar außerhalb des Bildschirms und erscheint genau dann, wenn er per Tastatur fokussiert wird, beim ersten Tab-Druck. Sehende Mausnutzer bemerken ihn nie, Tastaturnutzer sparen auf jeder Seite ein Dutzend Tab-Drücke. Auch dieses Wiki hat einen, drück auf einer beliebigen Seite einfach mal Tabb.

Wie viele Menüpunkte verträgt ein Menü?

Die ehrliche Antwort: weniger als man denkt. Fünf bis sieben Hauptpunkte gelten als Obergrenze, bevor Besucher nur noch überfliegen statt lesen. Wächst die Seite darüber hinaus, wird gruppiert statt angebaut: Verwandte Themen unter einem Oberbegriff bündeln und die Feinnavigation auf die Bereichsseiten verlagern, so wie es die Sitemap dieses Wikis mit seinen neun Silos vormachtt.