Navigationsleisten-Animation

[T-N]

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

Problem: Genau wie die "Animation" in der Vorschau auf der oben genannten Website angezeigt wird, passiert das auch in meinem Browser - was ja auch vollkommen richtig ist :)

Die Animation verläuft wie folgt: Maus hovert über der Schaltfläche mit Untermenü; Untermenü klappt sich aus und der Seiteninhalt, welcher sich unter der Leiste befindet, wird für die "aufgeklappt-sein-Zeit" nach unten verschoben.

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 freue mich auf Vorschläge - Vielen Dank ~ T-N

Datum der Veröffentlichung: 03.11.2019

[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

[Gunnar Bittersmann]

@@Matthias Scharwies

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

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

Nein, das tut es nicht. z-index ist wirkungslos.

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

Dann hätte das Beispiel im Wiki nichts zu suchen!

Es ist aber tastaurbedienbar. Wenn auch nicht gut. Wie’s besser geht: es ist angerichtet.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Link zum Thema: HTML/Tutorials/Navigation

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

Nein, das tut es nicht. z-index ist wirkungslos.

Stimmt! :-( Gibt's da bei Flexbox eine Möglichkeit, außer dem Inhalt (hier: div) ein z-index:-1 zu geben?

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

Dann hätte das Beispiel im Wiki nichts zu suchen!

Es ist aber tastaurbedienbar. Wenn auch nicht gut.

Wie’s besser geht: es ist angerichtet.

Danke; habe Den Link ins 5. Kapitel eingefügt!

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Dann hätte das Beispiel im Wiki nichts zu suchen!

Das ganze ist Teil eines Kurses HTML/Tutorials/Navigation :

1. Konzepte (von @beatovich - eine eher theoretische Abhandlung; kann übersprungen werden)
2. Grundstruktur
   • nav, ul, li + a
   • aktuelle Seite kennzeichnen
   • :hover und :focus
3. Dropdown-Menü
   • ul und ul ul
   • Dropdown oder Flyout
   • Exkurs: Elemente ausblenden
4. Skip-Links
   • Hamburger-Icon
   • Pullout-Menü
5. zugängliche Dropdown-Navigation

Der Kurs ist in sich noch nicht ganz stimmig, da er aus verschiedenen Teilen zusammengefügt wurde.

Ich habe jetzt Kapitel 2 + 3 imho zufriedenstellend gegliedert.

Kap 4 Skiplinks und Pullout-Menü müssen noch überarbeitet werden.

Kap 5: JavaScript/Tutorials/zugängliche_Dropdown-Navigation müsste ein erklärtes Beispiel (das von Gunnar?) bekommen.

Hätte jemand Lust, sich dort auszutoben?

Herzliche Grüße

Matthias Scharwies