Problem mit Script

[Felix Riesterer]

Lieber Gunnar,

Ein paar Anmerkungen:

vielen Dank! Wieder etwas dazu gelernt.

• Der Zustand des Toggle-Buttons sollte in seinem aria-expanded-Attribut festgehalten werden, dann haben auch Nutzer assisitver Technologien (wie Screenreader) was davon. Das lässt sich dann auch zum Stylen verwenden; eine Klasse "open" braucht man nicht. Fürs ul-Element auch nicht; das lässt sich als nachfolgendes Geschwisterelement des Buttons selektieren.

Da sieht man, dass ich in Sachen ARIA (oder a11y) noch recht unbeleckt bin. Natürlich kann man sich so die Klasse sparen, aber assistive Technologien haben davon noch viel mehr als ich.

• Deine Animation läuft wegen der Änderung des z-Indexes nicht flüssig. Besser geht’s so: dafür sorgen, dass der Button immer vor den Menüpunkten ist und die sich einfach dahinterschieben. Die dürfen dann natürlich nicht −1 als z-Index haben, da die Links ja clickbar sein müssen. Button und Listitems in denselben Stapelkontext bringen, dann genügt z-index: 1 für den Button.

Ähm, das verstehe ich nicht. Wie bringe ich sie in denselben Stapelkontext?

• Deine Sechsecke sind darüber und darunter nicht clickbar, wohl aber neben den Schrägen (rechteckige Clickfläche). Die Sechsecke setzt man besser (und einfacher!) mit clip-path: polygon() um – und dann ist auch nur die Sechseckfläche clickbar.

Diese Tricks sind mir noch unbekannt. Ich gestalte mit CSS nicht auf diesem künstlerischen Niveau. Mein Beispiel basiert völlig auf dem CSS-Code des OP. Und wie sieht es mit der Unterstützung durch die Browser aus? Wie sieht hier z.B: eine graceful degradation aus?

• Bei Tastatursteuerung sind die Links bei dir auch bei geschlossenem Menü in der Tab-Folge; das sollten sie aber nicht sein.

Warum nicht? Wer nix sieht, braucht auch den Klapp-Mechanismus nicht. Dann dürfen die Links gerne durch-tab-bar sein. Findest Du nicht?

Entweder man setzt bei geschlossenem Menü für alle Links tabindex="-1" und bei geöffnetem Menü tabindex="0" – oder man versteckt das Menü richtig (hidden-Attribut), sodass die Links nicht mehr erreichbar sind. (Das aber nicht gleich beim Click auf den Button, denn die Transition soll ja erstmal laufen. Da muss man auf Transition-Events lauschen.)

Ist das den Aufwand wirklich wert?

• Deine Transition läuft um einiges zu langsam. Val Head rät: Wenn man denkt, es sei gut, die Zeit nochmal durch 2 teilen.

Auch hier blieb ich bei der Vorgabe durch den Code im OP. Aber gut zu wissen, dass es diese Faustregel gibt!

Ich hab die Überlegungen in ☞ mein Beispiel beehive navigation einfließen lassen.

Sehr chic! Gefällt mir sehr gut.

• Von den Berechnungen [...] die Formeln selbst – mit custom properties.

Wie sieht es hier mit der Browser-Unterstützung aus? Und wie degradiert das gracefully?

• Da das nur in Browsern funktioniert, die custom properties unterstützen (also nicht im IE ≤ 11), wird ebendies mit @supports() abgefragt und das Menü nur in modernen Browsern als Bienenwabe gestylt (progressive enhancement).

Aha! Sehr wichtiger Hinweis. Finde ich gut. Wer IE will, will keinen neumodischen Schnickschnack, sondern leiden. :-/

Und da das Auf-/Zuklappen nur mit JavaScript funktioniert, erfolgt das Styling über den Attributsensor [data-javascript-enabled="true"] nur, wenn das JavaScript auch ausgeführt wird und dieses Attribut gesetzt wurde.

Ja, so weit bin ich in meinem Beispiel leider noch nicht gegangen. Das hätte ich aber sollen.

Weil der Button ohne JavaScript keine Funktion hat, wird dieser erst mit JavaScript eingeblendet.

Warum nicht mit JS ins DOM gesetzt?

• Zur Änderung der Position der Menüpunkte beim Auf-/Zuklappen muss nicht die transform-Eigenschaft geändert werden, sondern lediglich --radius. (Bei transition muss allerdings transform angegeben werden.)

Also kann man auch custom properties transformieren lassen... cool!

• Damit die Transition funktioniert, darf das hidden-Attribut für die Dauer der Transition nicht gesetzt sein. Deshalb wird es beim transitionrun-Event gelöscht (da kein Delay im Spiel ist, ginge auch transitionstart) und erst beim Eintreten von transitionend auf den entsprechenden Folgewert gesetzt. Das funktioniert im Firefox, aber nicht im Chrome 73, der zwar transitionend kennt, aber nicht transitionrun und transitionstart.

Ohweh, das sind für mich noch alles böhmische Dörfer.

Der entsprechende Code ist jetzt auskommentiert; nach Update auf 74 kann auch Chrome transitionrun und transitionstart. Update des Safari steht noch aus, ebenso der Test im Edge.

Ich sehe also, dass die Unterstützung für alle Browser in Deinem Beispiel nicht gegeben ist. Aber ob meines in einem IE läuft, habe ich auch nicht getestet. War mir irgendwie völlig egal... ;-)

Liebe Grüße,

Felix Riesterer.