Navigationsleisten-Animation

[Matthias Scharwies]

Servus! Herzlich willkommen bei SELFHTML!

Link zum Thema: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Dropdown-Men%C3%BC#Submen.C3.BC_ausblenden

Überschrift auf der Page vom Link: Submenü ausblenden

Ich möchte die Animation allerdings ohne die Verschiebung des unteren Seiteninhalts! Der untere Seiteninhalt soll also einfach (in der Tiefe) unter dem Submenü bleiben und sich nicht verschieben.

Ich habe das Wiki-Beispiel mal angepasst:

Im Normalzustand (kleine Bildschirme) bleibt alles so wie's war:

nav > ul {
  list-style:none;
  display: flex;
  flex-direction: column;
} 

Ab einer gewissen Breite (45em) befindet sich die Navigation nebeneinander und benötigt nur eine Zeile:

@media (min-width: 45em) {
  nav > ul {	
    flex-direction: row; 
	height: 3em; 
  }
}

Deshalb habe ich der ul eine feste Höhe von 3em gegeben. Das reicht.

Wenn Du jetzt hoverst, klappt das .submenü auf, allerdings über dem Seiteninhalt, weil es z-index:1000 hat.

Was nicht funktioniert: Du kannst dieses Menü nicht mit der Tastatur (Tab-Tasten) bedienen.

Datum der Veröffentlichung: 03.11.2019

Steht auch über deinem Post!

Herzliche Grüße

Matthias Scharwies