Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

HTML/Tutorials/Navigation/Grundstruktur

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
15min
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.

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

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.

Beispiel: 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.

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.

Um diese Forderung umzusetzen, gibt es mindestens die in der folgenden Tabelle dargestellten Möglichkeiten.

HTML CSS Bemerkungen
<li><a href="#">
  <!-- normaler Menüpunkt -->
<li class="current"><a href="#">
  <!-- aktuelle Seite -->
nav li { }
  /* normaler Menüpunkt */
nav li.current { } 
  /* aktuelle Seite */
Eine Klassenbezeichnung ist im allgemeinen nicht notwendig, der häufig anzutreffende Klassenbezeichner "active" wäre sogar verkehrt.
<li><a href="#">
  <!-- normaler Menüpunkt -->
<li><span>
  <!-- aktuelle Seite -->
nav li { }
  /* normaler Menüpunkt */
nav span { } 
  /* aktuelle Seite */
<li><a href="#">
  <!-- normaler Menüpunkt -->
<li>
  <!-- aktuelle Seite -->
nav li { }
  /* aktuelle Seite */
nav a { } 
  /* normaler Menüpunkt */
Diese Variante erfordert ein Umdenken im CSS. Man stylt zuerst das Spezielle und dann das Allgemeine.
<li><a href="#">
  <!-- normaler Menüpunkt -->
<li><a>
  <!-- aktuelle Seite -->
nav a { }
  /* aktuelle Seite */
nav a[href] { } 
  /* normaler Menüpunkt */
Auch in diesem Fall stylt man vom Speziellen zum Allgemeinen. Semantisch nicht ganz exakt, denn ein Link-Element ohne href-Attribut ist kein Link.

Diese Möglichkeiten arbeiten zum Teil mit Klassennamen. Diese haben den Nachteil, dass sie nicht von Screenreadern und Suchmaschinen gelesen werden können.


Beispiel: 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.

responsive Menüs für mobile Endgeräte[Bearbeiten]

Wie schon in der Einleitung erwähnt, müssen Navigationen auf jedem Ausgabegerät gut benutzbar sein. Eine wie im CSS-Dropdown-Tutorial 50em breite Menüleiste lässt sich auf mobilen Endgeräten natürlich nicht gut darstellen, bzw. effektiv bedienen. Dazu müssen wir einige Anpassungen vornehmen, die weitgehend ohne JavaScript auskommen.

geänderte Darstellung für schmale Viewports[Bearbeiten]

Mobile Endgeräte versuchen, die Webseite meist komplett auf ihrem kleinen Bildschirm darzustellen. Deshalb muss zuerst der Viewport innerhalb der Meta-Angaben festgelegt werden:

<meta name="viewport" content="width=device-width, initial-scale=1">

Dies verhindert, dass die komplette Webseite in den kleinen Bildschirm gezoomt wird, stattdessen wird eine an die Bildschirmgröße angepasste Seite dargestellt. Jetzt können mit media queries Formate für unterschiedliche Bildschirmgrößen definiert werden.

Beispiel: Gerüst einer responsiven Webseite
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Webseite</title>
  <style>
    body {
      max-width:75em;      
      margin: 0 auto; 
    }
    nav li {
      display: inline;
    }

    @media screen and (max-width: 60em) {
      nav li {
        display: block;
        width: 50%;
      }
    }

    @media only screen and (max-width : 30em) {
      nav li {
        width: 100%;
    }
  }
</style>	
</head>
<body>
  ...
</body>
</html>
Der erste body-Regelblock zentriert den Inhaltsbereich. Dieser ist für sehr große Bildschirme auf 75em begrenzt. Wird der Viewport schmaler, passt sich der Inhaltsbereich an, sodass immer alles sichtbar bleibt.

Bei Viewports unter 60em dehnt sich die Navigation auf 100% aus, die einzelnen Elemente werden zweispaltig dargestellt.

Für Smartphones mit einer Auflösung von 30em und weniger werden die Listenelemente der Navigation untereinander auf 100% Breite dargestellt.

Falls Ihr Menü nur aus 3 oder 4 Links besteht, reicht diese Lösung völlig aus. Bei größeren Menüs würde die Startseite nur aus der Navigation bestehen. Damit dort aber interessante Inhalte erreicht werden, soll die Navigation ausgeblendet werden und nur bei Bedarf geöffnet werden.

toggle-Menü[Bearbeiten]

Um Platz für Inhalte zu schaffen, soll die Navigation nur bei Bedarf eingeblendet werden. Deshalb erweitern wir unser Menü um ein toggle-Menü, mit dem zwischen der mobilen und der Desktop-Ansicht hin und hergeschaltet werden kann. Auf kleinen Bildschirmen ist nur ein Navicon mit einem Link auf das Menü sichtbar.

Wie erzeuge ich ein Navicon?[Bearbeiten]

Im allgemeinen Gebrauch haben sich als Symbol oder Icon für einen Navigations-Button drei waagerechte Striche durchgesetzt. Deshalb wird ein solches Menü auch oft „Burgermenü“ oder „Hamburgermenü“ genannt. Sie können bei Verwendung der Zeichencodierung utf-8 entweder direkt „☰“ oder mit &#9776; eingegeben werden.

Beispiel ansehen …
<button href="#menu" id="nav-link">
  &#9776; Menu
</button>

Leider ist diese Darstellung oft nicht besonders optimal, da die drei Balken unterschiedlich dick erscheinen. Die Verwendung eines Icon Fonts könnte hier Abhilfe schaffen.

Eine Alternative wäre die Darstellung mithilfe einer Grafik, evtl. auch als Sprite-Grafik oder SVG-Icon.

Eleganter weil ohne zusätzliches Markup wäre die Verwendung eines Pseudoelements.

Beispiel ansehen …
#navlink {
	font-size: 2em;
	text-decoration: none;
	position: relative;
	display: inline-block;
	width: 1px;
	overflow: hidden;
	padding-left: 1em;
	margin-right: 2rem;
}
			
#navlink::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1em;
	height: 0.2em;
	border-top: 0.6em double blue;
	border-bottom: 0.2em solid blue;
}
<a id="navlink" href="#mobilenav" title="Navigation">Navigation</a>
Das Linkelement enthält einen aussagekräftigen Linktext. Wegen width: 1px in Verbindung mit overflow: hidden ist dieser auf Bildschirmen nicht sichtbar, wird von Screenreadern aber erkannt. Auch dieser Teil einer Navigation ist mit der Tastatur bedienbar

responsive Menüs für mobile Endgeräte[Bearbeiten]

Wie schon in der Einleitung erwähnt, müssen Navigationen auf jedem Ausgabegerät gut benutzbar sein. Eine 50em breite Menüleiste eines Dropdown-Menüs lässt sich auf mobilen Endgeräten natürlich nicht gut darstellen, bzw. effektiv bedienen. Dazu müssen wir einige Anpassungen vornehmen, die weitgehend ohne JavaScript auskommen.

geänderte Darstellung für schmale Viewports[Bearbeiten]

Mobile Endgeräte versuchen, die Webseite meist komplett auf ihrem kleinen Bildschirm darzustellen. Deshalb muss zuerst der Viewport innerhalb der Meta-Angaben festgelegt werden:

<meta name="viewport" content="width=device-width, initial-scale=1">

Dies verhindert, dass die komplette Webseite in den kleinen Bildschirm gezoomt wird, stattdessen wird eine an die Bildschirmgröße angepasste Seite dargestellt. Jetzt können mit media queries Formate für unterschiedliche Bildschirmgrößen definiert werden.

Beispiel: Gerüst einer responsiven Webseite
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Webseite</title>
  <style>
    body {
      max-width:75em;      
      margin: 0 auto; 
    }
    nav li {
      display: inline;
    }

    @media screen and (max-width: 60em) {
      nav li {
        display: block;
        width: 50%;
      }
    }

    @media only screen and (max-width : 30em) {
      nav li {
        width: 100%;
    }
  }
</style>	
</head>
<body>
  ...
</body>
</html>
Der erste body-Regelblock zentriert den Inhaltsbereich. Dieser ist für sehr große Bildschirme auf 75em begrenzt. Wird der Viewport schmaler, passt sich der Inhaltsbereich an, sodass immer alles sichtbar bleibt.

Bei Viewports unter 60em dehnt sich die Navigation auf 100% aus, die einzelnen Elemente werden zweispaltig dargestellt.

Für Smartphones mit einer Auflösung von 30em und weniger werden die Listenelemente der Navigation untereinander auf 100% Breite dargestellt.

Falls Ihr Menü nur aus 3 oder 4 Links besteht, reicht diese Lösung völlig aus. Bei größeren Menüs würde die Startseite nur aus der Navigation bestehen. Damit dort aber interessante Inhalte erreicht werden, soll die Navigation ausgeblendet werden und nur bei Bedarf geöffnet werden.

toggle-Menü[Bearbeiten]

Um Platz für Inhalte zu schaffen, soll die Navigation nur bei Bedarf eingeblendet werden. Deshalb erweitern wir unser Menü um ein toggle-Menü, mit dem zwischen der mobilen und der Desktop-Ansicht hin und hergeschaltet werden kann. Auf kleinen Bildschirmen ist nur ein Navicon mit einem Link auf das Menü sichtbar.

Wie erzeuge ich ein Navicon?[Bearbeiten]

Im allgemeinen Gebrauch haben sich als Symbol oder Icon für einen Navigations-Button drei waagerechte Striche durchgesetzt. Deshalb wird ein solches Menü auch oft „Burgermenü“ oder „Hamburgermenü“ genannt. Sie können bei Verwendung der Zeichencodierung utf-8 entweder direkt „☰“ oder mit &#9776; eingegeben werden.

Beispiel ansehen …
<button href="#menu" id="nav-link">
  &#9776; Menu
</button>

Leider ist diese Darstellung oft nicht besonders optimal, da die drei Balken unterschiedlich dick erscheinen. Die Verwendung eines Icon Fonts könnte hier Abhilfe schaffen.

Eine Alternative wäre die Darstellung mithilfe einer Grafik, evtl. auch als Sprite-Grafik oder SVG-Icon.

Eleganter, weil ohne zusätzliches Markup, wäre die Verwendung eines Pseudoelements.

Beispiel ansehen …
#navlink {
	font-size: 2em;
	text-decoration: none;
	position: relative;
	display: inline-block;
	width: 1px;
	overflow: hidden;
	padding-left: 1em;
	margin-right: 2rem;
}
			
#navlink::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1em;
	height: 0.2em;
	border-top: 0.6em double blue;
	border-bottom: 0.2em solid blue;
}
<a id="navlink" href="#mobilenav" title="Navigation">Navigation</a>
Das Linkelement enthält einen aussagekräftigen Linktext. Wegen width: 1px in Verbindung mit overflow: hidden ist dieser auf Bildschirmen nicht sichtbar, wird von Screenreadern aber erkannt. Auch dieser Teil einer Navigation ist mit der Tastatur bedienbar

Position[Bearbeiten]

Eine elegante Alternative zum Aufklappmechanismus ist das Positionieren der Navigation im Footer. Bei größeren Viewports wird sie in der oberen Menüleiste absolut positioniert. Mittels media queries wird dies bei kleinen Viewports auf eine relative Position geändert, die dann über das Navicon angeklickt werden kann.

Alternativ könnte man diese Änderung der Reihenfolge der Elemente mit der CSS-Eigenschaft flexbox erreichen.

Fazit[Bearbeiten]

Bei Touchscreens gibt es logischerweise keinen :hover-Zustand wie bei einer Maus, die ja erst mit dem Klick eine weitere Aktion auslöst. Dies betrifft die Navigation insofern, dass Untermenüs jetzt nicht mehr durch :hover aufgeklappt werden können, sondern entweder mit einem eigenen Link geöffnet werden müssen oder von vornherein dargestellt werden, was große Dropdown-Menüs mit mehreren Ebenen schwer lesbar macht.

Hier empfiehlt sich der Einsatz einer JavaScript-Lösung.


Siehe auch[Bearbeiten]