Problem mit Script

[Gunnar Bittersmann]

@@Felix Riesterer

[tastaturbedienbares Honeycomb-Menü]

Ein paar Anmerkungen:

• 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.

• 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.

• 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.

• Bei Tastatursteuerung sind die Links bei dir auch bei geschlossenem Menü in der Tab-Folge; das sollten sie aber nicht sein. 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.)

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

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

• Von den Berechnungen der Breite und Positionen der Sechsecke stehen nicht die Ergebnisse in nicht nachvollziehbaren Zahlen im Code, sondern die Formeln selbst – mit custom properties. So lassen sich --height und --gap an einer Stelle ändern, ohne dass irgendwas anderes angepasst werden muss. (Auch der Wert √3 ist als custom property hinterlegt. Statt --SQRT3 hätte ich übrigens auch --√3 schreiben können. Auf die Berechnung der Wurzel mit CSS hab ich hier verzichtet. Wie das geht, hab ich in der letzten Viertelstunde meines Vortrags auf dem Webkongress Erlangen erzählt.)

• 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). 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. Weil der Button ohne JavaScript keine Funktion hat, wird dieser erst mit JavaScript eingeblendet.

• 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.)

• Damit die Transition funktioniert, darf das Ausblenden des Menüs nicht über display: none erfolgen (Default für [hidden]), sondern über visibility: hidden.

• 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.

  Das Löschen des hidden-Attributs darf man aber nicht einfach ans click-Event des Buttons binden, da dies nur geschen darf, wenn die Transition wirklich ausgeführt wird, nicht aber, wenn z.B. ein Nutzer in seinem Browser Animationen ausgestellt hat. Ansonsten würde – da dann ja kein transitionend feuert – der Folgewert nicht gesetzt werden. Als möglichen Workaround hatte ich bei transitionend ein Flag gesetzt und damit ab dem zweiten Aufklappen die Transition ermöglicht.

  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.

LLAP 🖖