HTML/Tutorials/Navigation/Dropdown-Menü

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

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

In diesem Kapitel lernen Sie Funktionsweise einer Dropdown-Navigation kennen, die sich mit Maus und Tastatur auf- und zuklappen lässt. Dabei passt sie sich responsiv an alle Viewports an.

Empfehlung: Folgender Artikel ist als Grundwissen zu empfehlen:

Menüs mit mehreren (geschachtelten) Ebenen[Bearbeiten]

Navigationen bei größeren Webprojekten enthalten in vielen Fällen keine sequenzielle Auflistung von Links, sondern verteilen diese auf verschiedene Navigationsebenen.

verschachtelte Listen[Bearbeiten]

Zur logischen Abbildung dieser Struktur eignen sich verschachtelte Listen.

verschachtelte Listen (ohne CSS) ansehen …
<nav>
  <ul>
    <li><a href="#">Seite 1</a></li>

    <li><a href="#">Seite 2</a>
      <ul>
        <li><a href="#">Seite 2a</a></li>
        <li><a href="#">Seite 2b</a></li>
      </ul>
    </li>

    <li aria-current="page"><a href="#">aktuelle Seite</a></li>

    <li><a href="#">Seite 4</a>
      <ul>
        <li><a href="#">Seite 4a</a></li>
        <li><a href="#">Seite 4b</a></li>
        <li><a href="#">Seite 4c</a></li>
      </ul>
    </li>

    <li><a href="#">Seite 5</a></li>
    <li><a href="#">Seite 6</a></li>
  </ul>
</nav>
In das zweite und vierte li-Element ist hier eine weitere Liste eingefügt, da Listen wie ul oder ol selbst keine anderen Elemente als li als direktes Nachfahrenelement enthalten dürfen.

Selbst ohne CSS wird die Struktur von verschachtelten Listen über die Browser-Voreinstellungen sehr gut deutlich.

Mit der Tastatur können alle Links ausgewählt werden.


verschachtelte Listen (mit CSS) ansehen …
nav > ul {
 ...
} 

@media (min-width: 45em) {
  nav > ul {	
    ...  
  }
}
Die Formatierung der ersten Navigationsebene bleibt erhalten. Damit nur die Elemente der ersten Ebene angesprochen werden, werden sie über den Kindselektor nav > ul selektiert.
Die Listen der zweiten Ebene erhalten eine Klasse submenu.

Flyout oder Dropdown?[Bearbeiten]

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“

Submenü ausblenden[Bearbeiten]

Kennzeichen eines Dropdown-Menüs ist, dass das Submenü im Originalzustand ausgeblendet ist und erst beim Auswählen mit der Maus über die Pseudoklasse :hover oder mit der Tastatur über :focus selektiert und sichtbar gemacht wird.

Navigationsleiste mit mehreren Ebenen ansehen …
/*     submenu navigation links      */
nav .submenu { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
}
nav .submenu li { 
  display: block; 
  width: 15em;
}
 
/**     Show the submenu on hover, focus     **/
nav li:hover  .submenu,
nav li:active  .submenu, 
nav li:focus  .submenu { 
  visibility: visible;
  height: auto;
}
Die Listen der zweiten Ebene erhalten eine Klasse submenu, die im Normalzustand mit visibility: hidden ausgeblendet ist.

Listenelemente, die als Kindelement ein Submenü beinhalten, erhalten einen tabindex="0", damit sie antabbar sind.

Wenn Sie mit der Maus oder über die Tastatur ausgewählt werden, wird das Submenü eingeblendet; die folgenden Listenpunkte rutschen nach unten.

Achtung!

Das Beispiel funktioniert nicht wie gewünscht.
  • Man kann zwar die Submenüs über das tabindex des li-Elements sichtbar machen, die Listeneinträge jedoch nicht mit der Tastatur durchtabben.
  • Wenn man über den Geschwisterselektor a:hover ~ .submenu selektiert, wird das Submenu ein- , sobald der erste Listenpunkt angewählt wird, aber doch wieder ausgeblendet.

Eine touch- und tastaturbedienbare Variante lässt sich nur mit JavaScript erreichen:

--Matthias Scharwies (Diskussion) 08:09, 31. Okt. 2017 (CET)

vertikales Flyout-Menü[Bearbeiten]

Dieses Menü kann mit wenigen Handgriffen zu einem vertikalen Flyout-Menü umgebaut werden:

vertikales Flyout-Menü ansehen …
  nav ul {
    margin: 0;
    padding: 0;
    text-align: center;
  }

  nav li {
    list-style: none;
    position: relative;
    margin: 0; 
    padding: 0;
  }

  nav ul ul {
    position: absolute;
    top: -0.4em; 
    left: 8em;
  }

Durch den Verzicht auf nav li {float:left} ordnen sich die Menüpunkte untereinander an. Die absolute Position von nav ul ul gleicht mit top: -0.4em; das padding des Elternelements aus und wird mit left: 8em; rechts neben das Elternelement positioniert.

Diese Art der Navigation ist heute etwas verpönt, da dem Inhaltsbereich die ganze Breite zukommen soll. Lesestudien haben ergeben, dass Nutzer intuitiv links anfangen, neue und wichtige Informationen zu suchen und so von der Navigation eher abgeschreckt werden.

Vorteil dieser Art der Navigation ist, dass lange Links einfach integriert werden können, die in einer horizontalen Navigation nicht untergebracht werden könnten. Ein weiteres Plus ist das einfache Erweitern nach unten, welches aber nach mehreren Änderungen schnell zu lang und unübersichtlich werden kann. Beide Vorteile bergen also Gefahren, die Navigation unübersichtlich und schlecht benutzbar werden zu lassen.

Empfehlung: Ordnen Sie Ihre Seiten in einer klaren und logischen Struktur mit nur wenigen Menüpunkten. Erweitern Sie diese nur im Notfall.


Exkurs: Elemente ausblenden (Alternativen zu display:none)[Bearbeiten]

Das Ausblenden der Untermenüs mit display: none; (und Einblenden mit display: block;) sollte man vermeiden, weil das die Inhalte für Benutzer von Screenreadern versteckt.

Eine Alternative ist es, die Untermenüs mit margin-left:-9999px; außerhalb des sichtbaren Bereichs zu verschieben und von dort wieder einfliegen zu lassen. Allerdings erzeugen die Browser dann ein zwar unsichtbares, aber riesengroßes Element, was die Performance der Seite negativ beeinflusst.

Ein anderer Weg könnte sein, das Untermenü mit text-indent unsichtbar zu machen:

text-indent blendet Element aus
nav ul ul {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

Vorteil ist, dass der Text immer vom Element wegfließt und so auch bei langen Texten nie hereinragen kann und das kein 9999px großer Container gezeichnet werden muss. Gerade auf mobilen Geräten ist die Performance deutlich besser.

Eine dritte Möglichkeit schiebt den Menüpunkt mit einem negativen z-index hinter die Seite. Damit er auch tatsächlich verschwindet, bekommt er noch eine Schriftgröße von Null.

font:0/0; und z-index blenden Element aus
nav ul ul {
   font: 0/0 serif;   /* Unternavigation ausblenden */
   z-index: -1;
}

nav ul li:hover ul {
   font: inherit;     /*  Unternavigation einblenden */
   z-index: auto;   
  }

Fazit[Bearbeiten]

Sie können die hier vorgestellten Navigationen mit der Maus ansteuern und bedienen. Mit der Tastatur können Sie nur die dargestellten, aber nicht die ausgeblendeten Verweise ansteuern.

Eine wirklich zugängliche Variante erreichen Sie nur mit JavaScript: