Navigation/Grundstruktur
Unter einer Navigation versteht man gewöhnlich in Abgrenzung zu anderen Navigationstechniken die Haupt-Navigation einer Webseite, mit der man bequem die Unterseiten des Projekts erreichen kannst. Ursprünglich als reine Liste einzelner Links angelegt, wuchs mit steigendem Umfang der Webprojekte das Bedürfnis, die Links zu sortieren und übersichtlich zu präsentieren.
Dieses Kapitel zeigt, wie eine Navigation aufgebaut werden sollte. Diese Grundstruktur wird in den folgenden Kapiteln als Grundlage für umfangreichere Navigationen verwendet.
Inhaltsverzeichnis
HTML-Aufbau
Für die Navigationsleiste wird im Allgemeinen eine Aufzählungsliste verwendet. Hiermit hast Du nicht nur ein strukturelles Element, das dem Sinn einer Navigation, nämlich der Auflistung von Verweisen, recht gut entspricht, sondern auch gleich drei verschachtelte Elemente, die Du über CSS formatieren kannst: ul, li und a.
Damit wir das Menü unabhängig von anderen Listen und Verweisen formatieren können, setzen wir es in ein nav-Element.
<nav>
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
</ul>
</nav>
Bei komplexeren Webprojekten können die Listen beliebig verschachtelt werden.
Verlinke nicht auf die aktuelle Seite
Um Nutzer eine Orientierung zu geben, auf welcher Seite sie sich gerade befinden, sollte die aktuelle Seite deutlich gekennzeichnet und nicht anklickbar sein.
Früher wurde das Navigationselement der aktuellen Seite mit einem Klassennamen oder einem span-Element anstatt des Links gekennzeichnet. Diese Lösungen haben den Nachteil, dass sie nicht von Screenreadern und Suchmaschinen gelesen werden können.
<nav>
<ul>
<li><a href="seite_1.html">Seite 1</a></li>
<li><a href="" aria-current="page">aktuelle Seite</a></li>
...
</nav>
Die aktuelle Seite wird mit dem ARIA-Attribut aria-current="page" ausgezeichnet. So können auch Suchmaschinen und Screenreader erkennen, dass dies die aktuelle Seite ist. Mit dem Attributselektor kann dieser Menü-Punkt mit CSS formatiert werden.
Seit Januar 2024 fügen wir ein leeres href-Attribut ein.
--Matthias Scharwies (Diskussion) 17:06, 23. Jan. 2024 (CET)Oben oder unten?
Wo sollte ich die Navigation im Markup der Webseite platzieren? Oben wäre sie gleich erreichbar - falls Sie unten wäre, könnten Nutzer gleich auf die Inhalte zugreifen und die Navigation könnte per CSS beliebig positioniert werden.
Es ist eine Konvention, dass Inhaltsverzeichnisse am Anfang eines Buches stehen. Auch bei Webseiten sucht der Nutzer von oben links nach unten rechts und erwartet die Navigation oben.[1][2] (Dass sie nicht die halbe Seite einnehmen und mit CSS entsprechend formatiert werden sollte, wird in den Folgekapiteln besprochen.)
Die visuelle Reihenfolge sollte der Reihenfolge im DOM entsprechen; andernfalls dürften sehende Tastaturnutzer und sehende Screenreader-Nutzer ziemlich verwirrt sein. Um Nutzer von Screenreadern gleich zum Inhalt zu führen, kannst Du Skip-Links verwenden.
Einfache Menüs mit CSS
Für unsere Navigation verwenden wir die oben besprochene Aufzählungsliste. Hiermit hast Du nicht nur ein strukturelles Element, das dem Sinn einer Navigation, nämlich der Auflistung von Verweisen, recht gut entspricht, sondern auch gleich drei verschachtelte Elemente, die Du über CSS formatieren kannst: ul, li und a.
<nav>
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="" aria-current="page">aktuelle Seite</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
<li><a href="#">Seite 5</a></li>
<li><a href="#">Seite 6</a></li>
</ul>
</nav>
Verweise zu Schaltfläche machen
Damit wir jetzt anklickbare Schaltflächen bekommen, stylen wir die einzelnen Elemente mit CSS:
- Entfernen der Aufzählungszeichen
- Breite und Innenabstand
- Hintergrund- und Textfarbe
nav ul {
list-style: none;
// Safari hack, see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
width: 10em;
border: thin solid;
background-color: silver;
}
nav li {
margin: 0.5em;
border: thin solid;
background-color: #eee;
}
nav a {
text-decoration: none;
font-weight: bold;
color: var(--accent1-color);
background-color: var(--background-color);
}
[aria-current=page]{
background: var(--accent2-color);
}
nav a:focus,
nav a:hover,
nav a:active {
text-decoration:underline;
}
:root {
--background-color: midnightblue;
--accent1-color: gold;
--accent2-color: darkred;
--text-color: black;
}
In diesem Menü sind die einzelnen Elemente eingefärbt:
-
nav ulerhält einen silbernen Hintergrund und eine Breite von 10em. Mitlist-style: nonewerden die Aufzählungspunkte entfernt. Beachte den großen Innenabstand links vor den Listenelementen, der mit einer Festlegung von padding später entfernt wird.
-
nav lierhält einen grauen Hintergrund und mit margin einen Außenabstand zu den anderen Listenelementen -
nav averliert mittext-decoration: none;seine Unterstreichung und wird nun dunkelblau mit goldener Schrift dargestellt. Es fehlt allerdings noch das typische Balken-Aussehen, daaals Inline-Element nur den für seinen Inhalt erforderlichen Raum einnimmt. nav a:focus, nav a:hover;Wenn Du einen Link mit Maus oder Tastatur anwählst, wird die Unterstreichung wieder eingeblendet.- Im :root-Selektor werden die Farben als custom properties definiert. So kannst Du die Navigation mit nur wenigen Handgriffen an ihr Farbschema anpassen.
Kennzeichne Links als solche immer mit mindestens zwei gut erkennbaren Merkmalen wie z.B. Unterstreichung oder blaue Textfarbe!
Rollover-Effekt
Linkelemente können per Maus oder per Tastatur ausgewählt werden. Über die Pseudoklasse :hover bzw. :focus kannst Du ausgewählte Elemente selektieren und ihre Formatierung ändern.
nav a {
display: block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
border: thin solid var(--background-color);
border-radius: .5em;
color: var(--accent1-color);
background-color: var(--background-color);
transition: all .25s ease-in;
}
nav li[aria-current] a {
background-color: var(--accent2-color);
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
color: var(--background-color);
background-color: var(--accent1-color);
}
Durch display: block nimmt das Linkelement die gesamte zur Verfügung stehende Breite (=Breite des Listenelements innerhalb der 10em breiten Liste) ein.
Ausgewählte Verweise werden durch eine Änderung der Hintergrundfarbe (sowie dazu passend der Schriftfarbe) gekennzeichnet. Hierdurch ergibt sich ein Rollover-Effekt. Um dies eleganter wirken zu lassen, wird die Farbänderung bei :hover oder :focus durch transition um 0.25 Sekunden verzögert, sodass ein Nachglüh-Effekt entsteht.
Nachträglich eingefügte Listenelemente erschweren den Nutzern die schnelle Orientierung!
Vertikal oder horizontal?
Du kannst eine Navigationsleiste mit wenigen Menüpunkten auch horizontal anordnen (Quernavigation). Hierfür existieren mehrere verschiedene Möglichkeiten mit unterschiedlichen Vor- und Nachteilen. Die einfachere Möglichkeit ist, die li-Elemente per display: inline darzustellen. Dies ermöglicht auch deren Zentrierung über eine auf das Eltern-Element angewandte Eigenschafts-/Wertkombination von text-align: center.
nav ul {
text-align: center;
/* weitere Angaben */
}
nav li {
display: inline-block;
/* weitere Angaben */
}
Einen Nachteil hat diese Methode jedoch: Bei einem Umbruch der Navigationsleiste in zu kleinen Browserfenstern kommt es zu Überlagerungen. Dieser Effekt kann zwar auch bewusst zu gestalterischen Zwecken eingesetzt werden, verschlechtert allerdings die Nutzbarkeit. Achte darauf, dass in den Menütexten kein Zeilenumbruch stattfindet. Falls die Menüpunkte Leerzeichen enthalten, kannst Du mithilfe von white-space: nowrap; den automatischen Zeilenumbruch verbieten.
Besser wäre es, wenn sich die Navigation bei einem genügend großen Viewport horizontal anordnen würde, auf kleineren Geräten jedoch weiterhin untereinander positioniert würde.
Dafür eignen sich Grid Layout oder Flexbox.
nav ul {
display: flex;
flex-direction: column;
}
nav li {
list-style: none;
margin: 0.5em;
padding: 0;
font-size: 1.5em;
}
@media (min-width: 45em) {
nav ul {
flex-direction: row;
}
nav li {
font-size: 1em;
}
}
-
nav ulwird mitdisplay: flex;zum Flex-Container, in dem die Kindelemente durchflex-direction: column;untereinander angeordnet werden. -
nav lierhält mitfont-size: 1.5emeine größere Schriftgröße, dass die Schaltflächen auch auf kleinen Viewports groß genug sind. - In einer media query wird für größere Viewports ab 45em Breite eine andere Formatierung festgelegt:
-
flex-direction: row;wechselt auf horizontale Darstellung innerhalb einer Reihe. -
nav lierhält wieder die „normale“ Schriftgröße
-
Dieses Beispiel verzichtet auf feste Breiten. Diese werden je nach Platz vom Browser festglegt!
Information: Flyout oder Dropdown?
Zu Zeiten des pixelgenauen Layouts gab es nun zwei Varianten:
- Bei einem Flyout-Menü „fliegen“ die Untermenüs aus der vertikalen Struktur horizontal nach rechts heraus
- Bei einem Dropdown-Menü „fallen“ die Untermenüs aus der horizontalen Reihe vertikal „herunter“
In unserem Beispiel wird das Dropdown-Menü auf schmalen Bildschirmen aber auch vertikal angeordnet!
Weblinks
- ↑ Erwartungskonformität (kommdesign.de).
- ↑ Dialogprinzipien wurden überarbeitet und heißen jetzt Interaktionsprinzipien Usability-Norm ISO 9241-110 in neuer Auflage erschienen
- ↑ Fixing Lists! (scottohara.me)
