Responsive Navigation mit Submenü

Wichtig bei Menüs oder Links auf Smartphone ist, dass die anklickbare Fläche groß genug ist und ein Mindestabstand von 2 Pixeln besteht. Die kleinste anklickbare Fläche (touchevent) sollte 48x48 Pixel betragen (Retina Display halbiert auf 24 x 24 Pixel). Auch bei normalen Textlinks sollte man darauf achten, dass diese groß genug sind. (siehe auch Web Content Accessibility Guidelines 2.2) Meine folgenden Beispiele müssten dahingehend noch angepasst werden. Sie sind nicht dazu gedacht sie 1 zu 1 zu kopieren. Beachte auch, dass mouseover Events auf dem Smartphone nicht funktionieren.

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.

Menue 1 sehr simples Menü mit Checkbox Hack
Menue 2 gestyltes Menü mit Checkbox Hack Menue 2a Fontello Pictogramm
Menue 3 responsive Menü mit Checkbox Hack
Menue 4 simples Dropdown Menü
Menue 5 gestyltes horizontales Dropdown Menü
Menue 6 vertikales Dropdown Menü für Smartphone
Menue 7 Responsive Dropdown Menü
Menue 8 Respnosive Dropdown Menü mit Checkbox Hack
Menue 9 Variante mit animierten Menü beim Smartphone
Aufklappen mit details und summary
Komplette responsive Navigation für mehrere Seiten / download siehe auch :not

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.

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 den HTML Elementen summary & details

siehe auch HTML Tipp

Seit HTML5 gibt es die Möglichkeit mit summary und details etwas Aufklappbares zu definieren.

<details>
<summary>Tiere</summary>
<ul><li><a href="hahn.html">Hahn</a></li></ul>
</details>

Im Beispiel wird zuerst nur das summary angezeigt mit einem Pfeil. Der Rest erscheint nach Anklicken.

Vögel

Fische

Säugetiere

Vertikales drop-down Menü

Wenn man ein vertikales drop-down Menü erstellt, wobei das Untermenü seitlich aufklappen soll, indem man es mit position: absolute, positioniert muss man aufpassen, dass das Elternelement nicht unter dem Untermenü liegt. Würde im folgenden Beispiel das nav Element eine standardmäßige Breite von 100% haben, würde das untergeordnete ul wieder einklappen, sobald man das übergeordnete li verlässt.

siehe Beispiel

Mega Menü mit Flexbox

siehe dieses Beispiel

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

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 |

List-o-matic (veraltet)

Die folgenden Beispiele lassen sich heutzutage einfacher mit flexbox realisieren.

Beispiel 1 | Beispiel 2 | Beispiel 3 |