Bootstrap: Dropdown-Menü

[marctrix]

Hej alle,

ich habe mal ein drop-down bei bootstrap gesehen, dass sich auf dem Desktop tatsächlich ähnlich wie ein select verhalten hat, auf dem iPhone aber die iOS-typische Bedienung nicht gekillt hat, sondern die typische Gebetsmühle hervorbrachte. Jetzt finde ich das nich mehr, weiß auch nicht, ob das Beispiel aus der aktuellen Version oder dem Vorgänger war.

Hat das jemand parat? Wollte mal sehen, wie die das gelöst haben.

Kann aber auch gerne eine andere Lösung sein, die ich benutzen darf. Opensource wäre wichtig.

Marc

[Christian Kruse]

Hallo marctrix,

ich habe leider keine fertige Komponente zur Hand, die sich so verhält wie du es beschrieben hast. Aber ich weiss, wie ich das implementieren würde, wenn dir das hilft? Im Grunde ist es auch nicht so schwer, das kriegt man sogar[tm] mit Jquery in relativ wenig Code hin. Du ersetzt das <select> durch deine eigene Variante, und in der Mobile-Variante leitest du das click-Event weiter an das (versteckte) select.

Welchen Codepath du gehen solltest (Desktop oder Mobile), das kannst du mit matchMedia prüfen.

Hilft dir das weiter?

LG,
CK

[marctrix]

Hej Christian,

ich habe leider keine fertige Komponente zur Hand, die sich so verhält wie du es beschrieben hast. Aber ich weiss, wie ich das implementieren würde, wenn dir das hilft? Im Grunde ist es auch nicht so schwer, das kriegt man sogar[tm] mit Jquery in relativ wenig Code hin. Du ersetzt das <select> durch deine eigene Variante, und in der Mobile-Variante leitest du das click-Event weiter an das (versteckte) select.

Welchen Codepath du gehen solltest (Desktop oder Mobile), das kannst du mit matchMedia prüfen.

Hilft dir das weiter?

Leider nein, weil ich das selber nicht kann. Aber vielen Dank! - Die Erklärung bestätigt, dass ich mit der Idee, das genauso umzusetzen, nicht falsch liege.

Wobei - ich würde das nicht von der Auflösung (im Beispiel 400px) abhängig machen wollen, sondern von dem verwendeten OS (also iOS oder Android - mehr gibt es ja leider nicht mehr)…

Ich hätte mir die Funktionalität halt gerne aus Bootstrap raus geholt/ nachgebaut…

Vielleicht noch zum Hintergrund: wenn sich ein Dropdown-Menü wie auf dem Desktop verhält, lässt es sich unter iOS (und vermutlich unter Android)

1. mit den Fingern (bestenfalls) nicht so gut bedienen
2. anders bedienen, als vom Nutzer auf dem jeweiligen OS erwartet/ gewohnt

Marc

[Christian Kruse]

Hallo marctrix,

Wobei - ich würde das nicht von der Auflösung (im Beispiel 400px) abhängig machen wollen, sondern von dem verwendeten OS (also iOS oder Android - mehr gibt es ja leider nicht mehr)…

Nein, das würde ich nicht tun. Damit hast du wieder eine Browser-Weiche, keine Feature-Detection.

Ich hätte mir die Funktionalität halt gerne aus Bootstrap raus geholt/ nachgebaut…

Das gibt es mWn so nicht in Bootstrap, wenn du das gesehen hast, dann wird das vermutlich eine externe Komponente gewesen sein.

LG,
CK

[marctrix]

Hej Christian,

Ich hätte mir die Funktionalität halt gerne aus Bootstrap raus geholt/ nachgebaut…

Das gibt es mWn so nicht in Bootstrap, wenn du das gesehen hast, dann wird das vermutlich eine externe Komponente gewesen sein.

Ich dachte auch, das gäbe es so nicht in Bootstrap, dann hat mir ein Entwickler gesagt: Doch und ich habe mich während des Telefonates, das schon ein paar Monate zurückliegt mit dem Handy durch die Bootstrap-Doku geklickt und hatte dann doch irgendwann die „Gebetsmühle“ (iOSler wissen, was ich meine).

Und nu finde ich es nicht mehr. - Hätte gerne gewusst, wie das gemacht ist, aber: Ich gebe auf…

Marc

[Christian Kruse]

Hallo marctrix,

Ich dachte auch, das gäbe es so nicht in Bootstrap, dann hat mir ein Entwickler gesagt: Doch und ich habe mich während des Telefonates, das schon ein paar Monate zurückliegt mit dem Handy durch die Bootstrap-Doku geklickt und hatte dann doch irgendwann die „Gebetsmühle“ (iOSler wissen, was ich meine).

Hm. Das würde mich interessieren. Ich habe gerade aber auch nochmal „durchgeklickt,“ kann aber nichts finden.

Und nu finde ich es nicht mehr. - Hätte gerne gewusst, wie das gemacht ist, aber: Ich gebe auf…

Kannst du nicht nochmal nachfragen?

LG,
CK

[marctrix]

Hej Christian,

Kannst du nicht nochmal nachfragen?

Ich weiß nciht mehr, mit wem ich geredet habe…

Das Facepalm gebe ich mir selber… 😟

Marc

[Christian Kruse]

Hallo marctrix,

Ich weiß nciht mehr, mit wem ich geredet habe…

Das Facepalm gebe ich mir selber… 😟

😂 das Alter, das Alter.

LG,
CK

[marctrix]

Hej Christian,

Ich weiß nciht mehr, mit wem ich geredet habe…

Das Facepalm gebe ich mir selber… 😟

😂 das Alter, das Alter.

Vielleicht - es war einfach eine Telefonkonferenz mit mehreren Entwicklern aus mehreren Teams, die ich nicht sehen konnte. Ich bin da als Accessibility Consultant bei einem großen Projekt und bekomme die ersten Ergebnisse hoffentlich bald zum Review.

Wenn ich dann noch an den Thread hier denke und dort das hier gesuchte wiederfinde, poste ich es gerne.

😉

Marc

[Christian Kruse]

Hallo marctrix,

(also iOS oder Android - mehr gibt es ja leider nicht mehr)…

das stimmt übrigens nicht. Es gibt z.B. noch SailfishOS (vor allem in Indien und Russland verbreitet, vereinzelt aber auch in Europa) oder Ubuntu Touch.

LG,
CK

[Gunnar Bittersmann]

@@marctrix

ich habe mal ein drop-down bei bootstrap gesehen, dass sich auf dem Desktop tatsächlich ähnlich wie ein select verhalten hat, auf dem iPhone aber die iOS-typische Bedienung nicht gekillt hat, sondern die typische Gebetsmühle hervorbrachte.

“But even though selct boxes look like menus and behave like them, end even though they are sometimes referred to as menus, they aren’t true menus.
Select boxes are for input.”
—Adam Silver in Form Design Patterns, S. 238

Ist vielleicht nicht die beste Idee, ein Formularelement als Navigationselement zu missbrauchen. Das wäre kein ehrliches Nutzerinterface.

“Things to avoid: … Using checkboxes and select boxes for buttons and menu components.” (S. 260)

LLAP 🖖

[marctrix]

Hej Gunnar,

Ist vielleicht nicht die beste Idee, ein Formularelement als Navigationselement zu missbrauchen. Das wäre kein ehrliches Nutzerinterface.

Das war auch nicht die Idee. Es geht ja darum, dass die select sich nicht vernünftig gestalten lassen. Also wird das per JS (meinen kurzen Tests nach zu urteilen barrierefrei) durch semantisch aussagefreies (dann aber mit aria-Attributen angerichtetem) html ersetzt. Trotzdem scheint auch die select-Box noch zugänglich zu sein. Und ja, das ganze soll Teil eines Formulars sein, ich weiß aber jetzt wie gesagt nicht mehr, welche bootstrap-Komponente das war.

Deswegen bin ich mir bei den Details unsicher. Würde es mir einfach gerne noch mal genauer anschauen, weil es auf den ersten Blick mal ganz gut aussah, falls meine Erinnerung mich nicht täuscht.

Marc