Navigation

Diese Navigation sollte auf allen Geräten funktionieren. Auf kleinen Bildschirmen, stehen die Navigationselemente untereinander und können mit dem Burger-Menü ein und ausgeblendet werden.

Es ist eine Navigation mit Drop-Down Menü. Die Unterpunkte werden per Mausberührung (mouse-over, hover) eingeblendet. Auf Geräten mit Touch Events muss man stattdessen die Oberpunkte anklicken.

Auf kleinen Bildschirmen werden die Unterpunkte eingeblendet, wenn die Seite des übergeordneten Elements geladen ist oder wenn eine Seite eines Unterpunktes geladen ist. Die Unterpunkte anderer Seiten sind ausgeblendet.

Mittels Javascript wird ermittelt, ob die Seite auf einem Touch-Screen geladen ist. In dem Fall würde das Drop-Down Menü welches mit CSS und :hover eingeblendet wird, nicht so gut funktionieren. Daher werden in dem Fall auch die Unterpunkte der jeweiligen Rubrik angegzeigt. Außerdem wird das Burger Menü eingeblendet, um die komplette Navigation ein und auszublenden. Das geschieht per Javascript.

HTML

Die Navigation ist in einem nav-Element eingebettet. Sie besteht aus 2 ineinander verschachtelteten ungeordneten Listen ul.

Der Link, der auf die gerade geöffnete Seite verweist, hat folgenden Wert im href Attribut: href="javascript:void()" Dadurch wird keine Aktion ausgeführt, wenn man den Link anklickt.

Das übergeordnete li Element einer geladenen Seite hat die Klasse aktuell. Wenn die Seite aus einem untergeordneten Menü stammt, wird das entsprechende übergeordnet li-Element mit der Klasse aktuell ausgezeichnet.

Damit wird der aktuelle Listenpunkt anders eingefärbt. Außerdem dient er dazu, die aktuellen Unterpunkte in bestimmten Situationen einzublenden.

CSS

Zeile 23

Die übergeordnete ul bekommt display:flex.
Die li-Elemente werden dadurch horizontal angeordnet und mit justify-content verteilt.

Zeile 31

Die a-Elemente werden als display: inline-block ausgezeichnet, damit man ihnen eine Breite und padding zuweisen kann.

Zeile 46

Die untergeordneten Listen werden ausgeblendet und bekommen position: absolute, damit sie beim Einblenden über dem Inhalt liegen und der Inhalt nicht nach unten verschoben wird.

Zeile 52

Die untergeordneten Listen werden eingeblendet, wenn das übergeordnete li Element mit der Maus berührt wird.

Zeile 58

Auf jeder Seite wird das aktuelle, übergeordnete li Element mit der Klasse .aktuell ausgezeichnet. Wenn die Seite aus einem untergeordneten Menü stammt, wird das entsprechende übergeordnet li-Element mit der Klasse .aktuell ausgezeichnet.
Diese bekommt in CSS eine bestimmte Hintergrundfarbe, damit die aktuelle Rubrik erkennbar ist.

Zeile 64

siehe Info Checkbox Hack

Zeile 78

Im Gegensatz zu den anderen Checkbox Hack Beispielen von mir, wird hier schon in der großen Ansicht das Ein- und Ausblenden mittels aktivierter Checkbox erzeugt. Beim Einblenden bekommt die nav>ul {display:flex;} Auf einem Rechner mit Maus ohne Touch Events kommt dieser Checkbox Hack gar nicht zum Tragen, da das Label Element gar nicht eingeblendet wird und somit keine Möglichkeit besteht die Navigation ein und auszublenden. Nur bei einem Bildschirm mit Touch Screen wird das Label mit dem Burger Symbol eingeblendet, so dass ich das Menü dann ein und ausblenden lässt. In dem Fall sollten allerdings die li Elemente als Flex-Items nebeneinander liegen.

Zeile 88

Erst in der kleinen Ansicht wird die untergeordnete Liste mit display: block eingeblendet.

Zeile 94

Alle untergeordneten ul Listen werden erstmal eingeblendet.

Zeile 100

Alle untergeordneten Listen, die nicht ein Nachfolger des li Elements mit der Klasse .aktuell sind werden ausgeblendet. Dieser komplexe Selektor mit .not() führt auch dazu, dass die Unterpunkte nicht eingeblendet werden, wenn man sie berührt oder im Touchscreen anklickt. Das liegt an der Spezifität.

Javascript

Das Listenelement mit der Klasse .aktuell wird in der Variablen aktuell hinterlegt.

Die untergeordnete ul-Liste, die ein Nachfolger des li mit der Klasse .aktuell ist wird in der Variablen liUl hinterlegt.

Das Label Element welches das Hamburger Symbol hat wird in der Variablen burger hinterlegt.

Zeile 8

Die Zeile if ('ontouchstart' in window) gibt true zurück, wenn es ein Screen mit Touch Events ist. Alles was folgt bezieht sich auf einen Bildschirm der mit Touch Events arbeitet. Damit bei großen Bildschirmen mit touch Events die aktuellen Unterpunkte eingeblendet werden.

Das Untermenü, welches auf .aktuell folgt, wird eingeblendet. Außerdem wird es auf position:static gesetzt anstatt auf position:absolute weil Inhalt unter der Navigation nicht überdeckt werden soll.

Das label Element mit dem Burger Symbol wird eingeblendet. Dadurch hat man die Möglichkeit die Navigation ein und auszublenden.