Frage zum Wiki-Artikel „37.186.10.92“

[Rolf B]

Hallo Werner,

dass die Dropdown-Menüs nicht funktionieren, liegt daran, dass <main> die "nach unten" hinaushängenden Boxen der Navigations <li> Elemente überlagert und deswegen der Hover-Effekt verloren geht. Das ist auch im Wiki-Beispiel unsauber. Vermutlich wurde da nicht mehr recht dran gearbeitet, weil eine Dropdown-Navigation nur mit CSS keine ordentliche Lösung erzeugt - wie auch im Wiki erwähnt wurde.

Wie auch immer - um die Navigation "hochzuheben", braucht sie einen z-index, und weil z-index nur für positionierte Elemente greift, braucht sie auch noch ein position:relative. Das wäre in deiner design.css in den Block ab Zeile 27 einzufügen:

nav {
   ...
   position: relative;
   z-index: 1;
}

Dazu kommt das Problem, dass Du den Navigations-Listenpunkten ein float:left verpasst hast. Das beißt sich mit dem Dropdown-Konzept, weil es die Listitems auf volle Höhe zwingt und das Verstecken mit Visibility nicht mehr funktioniert. Das float:left muss weg - das Nebeneinandersetzen der <li> erfolgt über das display:flex am ul Element.

Damit würde die Dropdown-Navigation besser funktionieren. Wenn Dir das generelle Design dieser Navigation nicht gefällt - über Details kann man sicher reden 😉

Das, was Du Dir wünschst, ist aber meiner Meinung auch für Maus-/Touch User schwer bedienbar. Wenn ich auf einen Menüpunkt mit Unterpunkten klicke, soll die Menüzeile ersetzt werden. Klicke ich auf einen Menüpunkt ohne Unterpunkte, wechsle ich gleich zur neuen Seite? Das ist nicht wirklich intuitiv.

Es fehlt für die Untermenüs dann auch eine "zurück" Funktion, mit der man die Hauptmenüleiste wieder erhält. Ich stelle mir das für jemanden, der die Seite über einen Screenreader ansurft, schwer bedienbar vor (die Bedienbarkeit ist bei reinen CSS Menüs ohnehin die größte Hürde).

Wie auch immer - das dürfte mit CSS nicht umsetzbar sein. Das sehe ich nur mit JavaScript lösbar. Und auch kein triviales Script.

Rolf