Menü-Manipulation via CSS

[Rolf B]

Hallo Beginner,

das könnte mit der Pseudoklasse :hover auf dem ul-Element lösbar sein. Aber es ist nur eine Scheinlösung, denn nun beginnt die große weite Welt jenseits des "Desktop-mit-Maus" Tellerrands.

• Du musst darauf achten, dass die "..." Verkürzung vor einem Screenreader versteckt wird
• Ist deine "..." Verkürzung responsiv? Versteckt sie auf schmalen Viewports genug, und zeigt sie auf breiten Viewports alles, was geht? Dieses Problem hast Du auch auf Desktops, wenn Du schmale und breite Fenster erzeugst. Was passiert, wenn Du das Fenster verbreiterst (oder ein Smartphone von Portrait auf Landscape-Format drehst), dann muss sich die ... Verkürzung anpassen.
• Was machst Du mit unbemausten Anwendern?
  • Bei Tastaturanwendern hilft Dir ggf. in aktuellen Browsern die Pseudoklasse :focus-within weiter.
  • Bei Touchscreen-Anwendern wird es schwieriger. Wie klappen die die 3 Punkte auf?

Ich denke, dafür brauchst Du eine fette Prise JavaScript. Willst Du Dir das antun? Hier stellen wir eine zugängliche Dropdown-Navigation vor. Das ist nicht genau das, was du suchst (weil Du ja <li> in ein Dropdown verschieben willst), aber zumindest eine Kostprobe, was auf Dich zukommen könnte.

Rolf