HTML/Tutorials/Navigation richtig erstellen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

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.

Inhaltsverzeichnis

[Bearbeiten] HTML-Aufbau

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 ist für Werkzeugleisten und Toolbars vorgesehen.

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.

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

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.

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

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.

[Bearbeiten] toggle-Menü

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.

[Bearbeiten] Wie erzeuge ich ein Navicon?

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

[Bearbeiten] Position

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.

[Bearbeiten] Fazit

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.

[Bearbeiten] Siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML