HTML/Tutorials/Navigation/Grundstruktur

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
● HTML
● CSS


Unter einer Navigation versteht man gewöhnlich in Abgrenzung zu anderen Navigationstechniken die Haupt-Navigation einer Webseite, mit der sie bequem die Unterseiten des Projekts erreichen können.

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. Auf Desktop-Computern setzten sich mit JavaScript und später CSS realisierte Drop-Down-Menüs durch, die beim Befahren mit der Maus auf- und zuklappten.


Beachten Sie: Durch die steigende Verbreitung von Mobilgeräten, bei denen der Viewport zu schmal für solche Menüs ist und die ohne Maus auch nicht auf :hover-Zustände reagieren, sind solche Drop-Down-Menüs allerdings nur teilweise zugänglich. Auf mobilen Geräten sollten Benutzer in einem toggle-Menü zwischen einer Seitenansicht ohne Navigation und der ausgeklappten, seitenumspannenden Navigation umschalten können. Dabei sollte aus Gründen der Zugänglichkeit nicht nur die Sichtbarkeit der Bildschirmversion, sondern auch eine Kennzeichnung aktiver und versteckter Bereiche durch aria-Attribute vorgenommen werden. Eine solche Umsetzung kann jedoch nur mit JavaScript vorgenommen werden.

HTML-Aufbau[Bearbeiten]

Für die Navigationsleiste wird im Allgemeinen eine Aufzählungsliste verwendet. Hiermit haben Sie 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 Sie über CSS formatieren können: ul, li und a.

nav[Bearbeiten]

Damit wir das Menü unabhängig von anderen Listen und Verweisen formatieren können, setzen wir es in das HTML5-Element nav.

ein einfaches Menü ansehen …
<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.

Hinweis

Navigationsleisten und Menüs mit Verweisen sollten mit dem nav-Element umschlossen werden.

Das menu-Element war für Werkzeugleisten und Toolbars vorgesehen und ist obsolet.

Verlinke nicht auf die aktuelle Seite[Bearbeiten]

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.

CSS-basiertes Dropdown-Menü ansehen …
<nav>
  <ul>
    <li><a href="#">Seite 1</a></li>
    <li aria-current="page"><a href="#">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 Attributsselektor kann dieser Menü-Punkt mit CSS formatiert werden.

Einfache Menüs[Bearbeiten]

HTML-Struktur[Bearbeiten]

Für unsere Navigation verwenden wir die im oben besprochene Aufzählungsliste. Hiermit haben Sie 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 Sie über CSS formatieren können: ul, li und a.

ein einfaches Menü ansehen …
<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>
      <li><a href="#">Seite 5</a></li>
      <li><a href="#">Seite 6</a></li>
  </ul>
</nav>

Verweise zu Schaltfläche machen[Bearbeiten]

Damit wir jetzt anklickbare Schaltflächen bekommen, stylen wir die einzelnen Elemente mit CSS:

  • Entfernen der Aufzählungszeichen
  • Breite und Innenabstand
  • Hintergrund- und Textfarbe
Empfehlung: Um eine einheitliche Darstellung zu erreichen, können Sie zunächst die unterschiedlichen Voreinstellungen der Browser für Listen überschreiben (siehe auch Normalisierung).
ein einfaches Menü mit CSS, das den ausgewählten Link zeigt ansehen …
  nav ul {
    list-style: none; 	  
    width: 10em;
    border: 1px solid;
    background-color: silver;

  }
  nav li {
    margin: 0.5em; 
    border: 1px solid;
    background-color: #eee;
  }
  nav a {
    text-decoration: none; 
    font-weight: bold;
    color: gold; 
    background-color: darkblue;
  }
  nav a:focus,
  nav a:hover,
  nav a:active {    
    text-decoration:underline;
  }
In diesem Menü sind die einzelnen Elemente eingefärbt:
  • nav ul erhält einen silbernen Hintergrund und eine Breite von 10em. Mit list-style: none werden die Aufzählungspunkte entfernt. Beachten Sie den großen Innenabstand links vor den Listenelementen, der mit einer Festlegung von padding später entfernt wird.
  • nav li erhält einen grauen Hintergrund und mit margin einen Außenabstand zu den anderen Listenelementen
  • nav a verliert mit text-decoration: none; seine Unterstreichung und wird nun dunkelblau mit goldener Schrift dargestellt. Es fehlt allerdings noch das typische Balken-Aussehen, da a als Inline-Element nur den für seinen Inhalt erforderlichen Raum einnimmt.
  • nav a:focus, nav a:hover; Wenn Sie einen Link mit Maus oder Tastatur anwählen, wird die Unterstreichung wieder eingeblendet.
Beachten Sie: In diesem Beispiel sind Verweise durch die farbigen Schaltflächen als solche erkennbar. Ausgewählte Verweise sind nur durch den geänderten cursor bei Geräten mit Mausbedienung und die Unterstreichung erkennbar.
Kennzeichnen Sie Links als solche immer mit mindestens zwei gut erkennbaren Merkmalen wie z.B. Unterstreichung oder blaue Textfarbe!

Rollover-Effekt[Bearbeiten]

Linkelemente können per Maus oder per Tastatur ausgewählt werden. Über die Pseudoklasse :hover bzw. :focus können Sie ausgewählte Elemente selektieren und ihre Formatierung ändern.

Rollover-Effekt ansehen …
    nav a {
      display: block;
      padding: 0.4em;
      text-decoration: none; 
      font-weight: bold;
      border: 1px solid darkblue;
      border-radius: 10px;
      box-shadow: 0 5px 10px white inset;
      color: gold; 
      background-color: darkblue; 
      transition: all .25s ease-in;	  
    }

  nav li[aria-current] a {
	background-color: firebrick; 
    color: gold;
  }
	
    nav a:focus,
    nav a:hover,
    nav li[aria-current] a:focus,
    nav li[aria-current] a:hover {    
      color: darkblue; 
      background-color: gold;
    }
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, so dass ein Nachglüh-Effekt entsteht.

Neu in diesem Beispiel hinzugekommen ist auch, dass die aktuelle Seite nicht verlinkt wird. Dies erleichtert die Benutzbarkeit, da der Standort erkennbar ist und nicht mit einem (in diesem Fall ja nutzlosen) Link verwechselt werden kann. Hierzu wird das Link-Element für den aktuellen Menüpunkt durch ein aria-Attribut ergänzt.

Vertikal oder horizontal?[Bearbeiten]

Sie können 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.

horizontale Formatierung der Listenelemente
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. Achten Sie darauf, dass in den Menütexten kein Zeilenumbruch stattfindet. Falls die Menüpunkte Leerzeichen enthalten, können Sie mithilfe von white-space: nowrap; den automatischen Zeilenumbruch verbieten.

Responsive Navigation[Bearbeiten]

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.

Responsive Navigation ansehen …
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 ul wird mit display: flex; zum Flex-Container, in dem die Kindelemente durch flex-direction: column; untereinander angeordnet werden.
  • nav li erhält mit font-size: 1.5em eine 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 li erhält wieder die „normale“ Schriftgröße
Dieses Beispiel verzichtet auf feste Breiten. Diese werden je nach Platz vom Brwoser festglegt!
Empfehlung: Öffnen Sie dieses Beispiel mit Rechtsklick in einem neuen Tab und verändern Sie die Größe des Browserfensters.