@@Felix Riesterer > [[tastaturbedienbares Honeycomb-Menü](https://felix-riesterer.de/self/honey/)] 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**{:@en}](https://codepen.io/gunnarbittersmann/pen/NmZxdJ) 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*{:@en}. 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*{:@en} 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](https://www.video.uni-erlangen.de/clip/id/9481) erzählt.) * Da das nur in Browsern funktioniert, die *custom properties*{:@en} unterstützen (also nicht im IE ≤ 11), wird ebendies mit `@supports()` abgefragt und das Menü nur in modernen Browsern als Bienenwabe gestylt (*progressive enhancement*{:@en}). 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 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@Felix Riesterer > [[tastaturbedienbares Honeycomb-Menü](https://felix-riesterer.de/self/honey/)] 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 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**{:@en}](https://codepen.io/gunnarbittersmann/pen/NmZxdJ) 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*{:@en}. 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*{:@en} 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](https://www.video.uni-erlangen.de/clip/id/9481) erzählt.) * Da das nur in Browsern funktioniert, die *custom properties*{:@en} unterstützen (also nicht im IE ≤ 11), wird ebendies mit `@supports()` abgefragt und das Menü nur in modernen Browsern als Bienenwabe gestylt (*progressive enhancement*{:@en}). 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 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@Felix Riesterer > [[tastaturbedienbares Honeycomb-Menü](https://felix-riesterer.de/self/honey/)] 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 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**{:@en}](https://codepen.io/gunnarbittersmann/pen/NmZxdJ) 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*{:@en}. 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*{:@en} 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](https://www.video.uni-erlangen.de/clip/id/9481) erzählt.) * Da das nur in Browsern funktioniert, die *custom properties*{:@en} unterstützen (also nicht im IE ≤ 11), wird ebendies mit `@supports()` abgefragt und das Menü nur in modernen Browsern als Bienenwabe gestylt (*progressive enhancement*{:@en}). 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 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 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 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann

@@Felix Riesterer > [[tastaturbedienbares Honeycomb-Menü](https://felix-riesterer.de/self/honey/)] 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 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**{:@en}](https://codepen.io/gunnarbittersmann/pen/NmZxdJ) 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*{:@en}. 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*{:@en} 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](https://www.video.uni-erlangen.de/clip/id/9481) erzählt.) * Da das nur in Browsern funktioniert, die *custom properties*{:@en} unterstützen (also nicht im IE ≤ 11), wird ebendies mit `@supports()` abgefragt und das Menü nur in modernen Browsern als Bienenwabe gestylt (*progressive enhancement*{:@en}). 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 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`. * 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 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 🖖 -- *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann