CSS-Navigationsleisten
Die Layout-Lektion skizzierte Seitenbereiche. Eine Navigationsleiste ist der Linkstreifen, mit dem Menschen zwischen diesen Bereichen und Seiten wechseln. Starte mit einer semantischen Linkliste, lege sie in eine ruhige Zeile und ergänze Hover-Hinweise — verschachtelte Dropdown-Menüs gehören in die nächste Lektion.
Ein Navigations-Werkzeugkasten
📊 Navigation auf einen Blick
| Baustein | Alltagaufgabe |
|---|---|
nav |
Landmarke für primäre/sekundäre Site-Links |
ul / li / a |
Strukturierte Zielliste |
| Listen-Reset | Aufzählungspunkte und Standard-Einzug für Leisten entfernen |
| Horizontale Zeile | Flex oder inline-block, damit Links nebeneinander sitzen |
| Hover / aktuell | Feedback für Zeiger und „Sie sind hier“ |
| Vertikale Nav | Dieselbe Liste gestapelt — nützlich in Sidebars |
Navigation sind weiterhin Links. Lass Fokus-Outlines sichtbar, gib komfortables Padding und verstecke Bedeutung nicht in anonymen Div-Haufen.
Semantische Liste in nav
Wickle das Menü in nav und halte Ziele als echte Anker in einer Liste. Screenreader und dein zukünftiges Ich danken für die Struktur.
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: inherit;
}
Horizontale Leiste mit Flex
Eine einfache Flex-Zeile macht aus der Liste eine Leiste. Gap und Padding schlagen enge Klickflächen. (Tiefere Flexbox-Kunst kommt später — für eine saubere Navbar reicht das.)
.navbar .nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
align-items: center;
}
.navbar .nav a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
Hover- und Aktuell-Hinweise
Gib Feedback bei Hover und markiere die aktuelle Seite mit einer Klasse. Entferne :focus-Outlines nie als „Aufräumen“.
.nav a:hover {
background: #f0f4ff;
border-radius: 0.35rem;
}
.nav a.is-current {
font-weight: 700;
color: #0b5fff;
}
Vertikale Seitennavigation
Dieselbe Liste kann in einer Sidebar stapeln. Halte Abstände großzügig, damit jeder Link leicht treffbar bleibt.
.sidenav .nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sidenav .nav a {
padding: 0.55rem 0.75rem;
}
Eine ruhige Navigations-Gewohnheit
Nutze nav + Liste + lesbares Padding. Bevorzuge Flex-Zeilen für horizontale Leisten. Lass Mega-Menüs und Dropdowns für die nächste Lektion. Verwechsele eine Linkleiste nicht mit der kompletten Seitenlayout-Hülle.
.site-nav { /* landmark wrapper */ }
.site-nav__list { /* the ul */ }
.site-nav__link { /* each a */ }
.site-nav__link.is-current { /* active page */ }
Selbst ausprobieren
- Baue
nav > ul.nav > li > aund setze Listenstile zurück. - Lege Links in eine horizontale Flex-Zeile mit Padding und Gap.
- Ergänze
:hoverund einen.is-current-Stil. - Dupliziere die Liste als vertikale Sidenav-Variante.
- Schreibe einen Satz: Was gehört in die Dropdowns-Lektion statt hierher?
Häufige Fehler
- Winziges Padding, das Touch- und Mausziele verfehlt
- Fokus-Outlines dauerhaft entfernen
- Div-Suppe statt
navund Listen - Verschachtelte Dropdown-Mega-Menüs in dieser Lektion bauen
- Die Navbar als gesamtes Website-Layout behandeln
Zusammenfassung
- Navigationsleisten sind strukturierte Linklisten in
nav - Setze Aufzählungen zurück, dann anordnen mit Flex (oder inline-block)
- Hover- und Aktuell-Stile führen, ohne Fokus zu töten
- Vertikale Nav ist dieselbe Liste gestapelt
- Dropdown-Menüs warten auf die nächste Lektion
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt