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.