Mobiles Menü funktioniert nicht richtig

[Matthias Scharwies]

Herzlich willkomen bei SELFHTMl,

ich versuche zur Zeit, ein mobile Menü für meine Homepage zu erstellen.

Sehr gut!

normalerweise würde ich bei so langen Code-Abschnitten das hier posten:

Warum online-Beispiele besser als das Posten von Code sind!

Dazu habe ich den untenstehenden freien Code gefunden und entsprechend modifiziert. Auf einem normalen Heimcomputer funktioniert das ganze auch einwandfrei.

Jein, hast Du Dir Dein Menü einmal vorlesen lassen? - Es gibt eine Konvention, wie ein Menü aufgebaut werden sollte und warum man z.B. nicht auf die aktuelle Seite verlinkt:

Navigation/Grundstruktur

Wenn man z.B. über "Dropdown 1" mit der Maus fährt, öffnet sich das Untermenü. Beim Verlassen schließt es sich wieder.

Auf mobilien Geräten ist das anders. Da muss man auf den entsprechenden Untermenüpunkt klicken. Dieser öffnet sich auch problemlos. Jedoch können die dann nachfolgenden Menüpunkte nicht mehr korrekt angewählt. Klickt man z.B. nach dem Öffnen von Dropdown 1 auf Drowdown 2, schließt sich Dropdown 1 und die Datei "9.htm" wird ausgeführt. Normalerweise sollte sich aber dann nur Dropdown 2 öffnen. Gibt es eine Möglichkeit, das zu beheben?

Ja, aber unser Tutorial hat das auch (noch) nicht ganz hingekriegt! 😟

Hier ist das Ergebnis:

Beispiel:CSS_Menu9.html

Könntest du hier mal den Beta-Tester spielen?

Problem war nach dem Aufklappen mit der Tastatur wieder eine parallele :hover-Funktionalität herzubringen.

Aus einer PN an meinen Kollegen:

Ich glaube, ich hab's gelöst:

HTML:

li

    a
    button aria-expanded
    ul

CSS

 nav li:hover > ul {
  visibility: visible;
  height: auto;
} 
 nav li button:hover ~ ul {
  visibility: hidden;
  height: 0;
} 
 nav li button:hover ~ ul.visible,
.visible  { 
  visibility: visible;
  height: auto;
}

nav li:hover > ul ist der klassische Umschalter für li:hover, wenn man auf a, aber auch auf li >ul hovert.

Ohne :has() und ohne :not() schaltet nav li button:hover ~ ul das wieder aus, wenn auf dem button gehovert wird. Ich hatte da mit anderen Positionen des Button nach der ul experimentiert.

Wenn ich jetzt die ul mit Button aufklicke, muss ich nav li button:hover ~ ul.visible wieder auf visible schalten. Den ersten und dritten Regelsatz kann ich später zusammenfassen.

Das dazugehgörige Tutorial

Navigation/Dropdown-Menü

ist imho aufschlussreich, enspricht aber in manchen Erklärungen aber noch nicht dem verbesserten Beispiel.

Was fehlt

Wenn man mehrere Ebenen hat, bzw. vom letzten Menüpunkt aus Submenüs öffnet, müssten die sich nach links öffnen. Dort müsste man mit ein bisschen JS testen, wo sich das Menü befindet und entsprechend umschalten.

Herzliche Grüße

Matthias Scharwies