Responsive Navigation mit Submenü

Mit den folgenden Beispielen wird ein responsive Navigationsmenü mit Submenü aufgebaut. In der Smartphone Ansicht kann man über ein Hamburger Menü die Navigation ein und ausblenden. Es wird kein Javascript verwendet. Das Ein und Ausblenden ist auch als Checkbox Hack bekannt. Die Beispiele 1 - 3 beschäftigen sich mit dem Checkbox Hack. Die Beispiele 4 - 5 mit einem Menü mit Submenü. Das Beispiel 8 kombiniert beides. Weiter Infos zu den Themen und ältere Beispiele findet man darunter.

  1. Menue 1 sehr simples Menü mit Checkbox Hack
  2. Menue 2 gestyltes Menü mit Checkbox Hack
  3. Menue 3 responsive Menü mit Checkbox Hack
  4. Menue 4 simples Dropdown Menü
  5. Menue 5 gestyltes horizontales Dropdown Menü
  6. Menue 6 vertikales Dropdown Menü für Smartphone
  7. Menue 7 Responsive Dropdown Menü
  8. Menue 8 Respnosive Dropdown Menü mit Checkbox Hack
  9. Menue 9 Variante mit animierten Menü beim Smartphone

Checkbox Hack und Hamburger Menü

siehe auch

Hier 3 Beispiele mit einem Selektor und der Pseudoklasse checked sowie dem siblings selector ohne Javascript. Folgenden Beispielen liegt diese HTML Syntax zugrunde.

HTML

<nav class="dropdown">
<input type="checkbox" id="checkbox_toggle">
<label for="checkbox_toggle"><img src="bars-solid.svg" alt="toggle menue"/></label>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</nav>

CSS

      nav > input{
            display: none;
        }
        ul{
            display: none;
        }
        input[type=checkbox]:checked ~ ul {
            display: block
        }

Das input Element (die Checkbox) im nav Element wird nicht angezeigt. Das betrifft jedoch nicht das label Element. Die ul unordered List wird beim Start auch nicht angezeigt.

Dann folgt die Pseudo Klasse checked, mit der man überprüfen kann, ob das Input- / Checkbox- Element ausgewählt wurde oder nicht. Darauf folgt der general siblings oder Geschwister Selektor und verweist auf ul. Das bedeutet, wenn ul und input das gleiche Elternelement haben und wenn input ausgewählt wurde, wird die ul angezeigt.

Beispiel 1 ist bewusst einfach gehalten.
Beispiel 2 zeigt ein Menü für ein Smartphone.
Beispiel 3 ist responsive zeigt die Smartphone Version von Beispiel 2, wenn die Bühne verkleinert ist. Bei größerem Viewport bekommt ul display:flex und ordnet die li Elemente somit horizontal an.

 

Verschiedene Beispiele / teilweise veraltet

siehe auch meine Beispiele unter Selektoren Tipps und Tricks
weitere Beispiele unter Flex Menüs und Layouts

Hier einige Beispiel für ein responsive Menü

Im folgenden Beispiele für die einzelnen Breakpoints

Ausgangsdatei | Smart 1 | Smart 2 | Tablet | Desktop

Im folgenden 3 verschiedenen Varianten für ein responsive Menue

Version 1 | Version 2 | Version 3

Links mit Mouseover Effekt

Mit der Pseudoklasse :hover kann man aus einfachen Links schöne Menüpunkte machen. Damit nicht nur die Schrift sondern das Element anklickbar ist, weist man dem Link die Eigenschaft display:block zu. Siehe dazu auch die CSS3 Beispiele zum Thema Button.

Beispiel 1 | Beispiel 2 | Beispiel 3 | Beispiel 4 |

 

Aufklappbares Menü Flexbox

Durch geschicktes Setzen der Pseudoklassen :hover : acitve : focus kann man in einem Menü, die Unterpunkte einblenden. Doch hier muss man aufpassen, damit das aufgeklappte Menü nicht die nachfolgenden Elemente nach unten verschiebt. Diese Menüs funktionieren auch auf Smartphones und Tablets, jedoch nicht auf die gleiche Art, denn hier klappt das Menü erst wieder zu, wenn man auf ein anderes Element klickt.

sehr einfaches Beispiel

Horizontales Drop Down Menü mit flexbox. Das einfache Beispiel wird nun mittels display:flex horizontal angeordnet. Siehe Erklärungen auf der Beispielseite.

Beispiel

List-o-matic (veraltet)

Die folgenden Beispiele lassen sich heutzutage einfacher mit flexbox realisieren.

Beispiel 1 | Beispiel 2 | Beispiel 3 |

Komplettes Menü einblenden

Für die Anzeige auf kleinen Bildschirmen ist es üblich, dass ein Menü erst durch Buttonklick eingeblendet wird. Das lässt sich ohne Javascript mittels CSS regeln. Der Trick ist, dass man innerhalb von Nachfahren Selektoren eine Linkpseudoklasse einsetzt. Jedoch wird diese nicht am Ende, der Nachfahrenselektoren gesetzt, sondern irgendwo innerhalb der Hierachie.

<nav><div>Show Menue<ul>....</ul></div></nav>

Mit folgender Anweisung kann man das Menü einblenden, indem man die Reihe mit der Textstelle "Show Menue" berührt.

nav div ul{display:none;}
nav div:hover ul{display:block;}

sehr einfaches Beispiel

| Beispiel 1 | Beispiel 2 | Beispiel 2

Drop Down Menü mit Javascript

Mittels Javascript und dem Dokument Objekt Modell kann man Style Sheets zuweisen. Siehe dazu meinen Tipp Javascript.

Beispiel 1 | Beispiel 2 | Beispiel 3 | Beispiel 4

Menü auslagern / nth-child mit PHP

In diesem Beispiel wird ein Menü erstellt, welches auf jeder Seite mittels iframe eingebunden ist. Der Menüpunkt, der zur Seite gehört, wird mittels CSS und nth-Child Selektor ausgewählt und hervorgehoben. Da das Menü einmalig in einer extra Seite definiert wird, welche im iframe eingebunden ist, muss die Zuweisung der richtigen Seitennummer, bzw. Menünummer, bzw. nth-child Nummer dynamisch per PHP zugwiesen werden. Weitere Erklärungen findet man in den einzelnen Seiten oder auf dieser Seite zum Thema inlcude.

Beispiel mit Iframe | Beispiel mit include