Was war der Gedanke hinter der Implementierung des Dropdown-Menüs in Twitter Bootstrap? [closed]

Lesezeit: 3 Minuten

Benutzer-Avatar
iagdotme

Ich habe mir das Bootstrap-Framework von Twitter angesehen und bin wirklich beeindruckt. Ich verstehe jedoch nicht, wie das Dropdown-Navigationsmenü funktioniert.

Um untergeordnete Links anzuzeigen, müssen Sie zunächst auf die übergeordneten Links klicken. Ich kann die Vorteile davon sehen, aber warum nicht den traditionelleren Drop-down-on-Hover-Ansatz als Standard verwenden?

Zweitens scheint das Denken hinter dem Dropdown-Menü von Twitter Bootstrap übergeordnete Seiten zu beleuchten. Ich erkläre das wahrscheinlich nicht sehr gut … Angenommen, Sie haben eine einfache Webseitenstruktur:

  • Heim
  • Um
    • Die Mannschaft
  • Dienstleistungen
    • Web-Design
    • Gastgeber
    • Domänen
  • Kontakt

In einer traditionellen Dropdown-Menüstruktur würden Sie den Mauszeiger über „Über“ und „Dienste“ bewegen und das Dropdown-Menü mit den untergeordneten Links (z. B. „Webdesign“, „Hosting“ usw.) würde erscheinen. Sie können jedoch auch auf die übergeordnete Seite (dh „Über“ und „Dienste“) klicken und diese besuchen.

Mit Bootstrap können Sie keine übergeordnete Seite in der Struktur haben, Sie müssen das Anker-Tag (“#”) verwenden. Wenn Sie darauf klicken, sehen Sie dann die Seiten in der Dropdown-Liste. Dies ist nicht gut, wenn es eine übergeordnete Seite gibt. Es ist auch aus semantischer Sicht (was bedeutet “#”?) und Zugänglichkeit (Javascript deaktiviert, Screenreader usw.) nicht großartig.

Ich habe wahrscheinlich etwas verpasst, aber kann jemand den Gedanken dahinter erklären, insbesondere in Bezug auf übergeordnete Seiten und semantisches HTML/Barrierefreiheit?

  • Sie erhalten nur Antworten, die auf Meinungen zu diesem Thema basieren. Um eine klare Antwort zu erhalten, warum wenden Sie sich nicht an die Hauptentwickler des Bootstrap? Hier sind die Twitter-Handles der Entwickler: @mdo, @fett.

    – Andrés Ilich

    24. Februar 2012 um 18:32 Uhr

  • Ich bin definitiv an der Hauptmeinung der Entwickler interessiert, aber auch an den Ansichten anderer Leute und daran, wie Leute die Bootstrap-Navigationsleiste in dem oben hervorgehobenen Fall verwenden.

    – iagdotme

    24. Februar 2012 um 21:00 Uhr

Dies wurde einfach so gemacht, weil Hover-Menüs auf Touchscreen-Geräten nicht gut funktionieren.

https://github.com/twitter/bootstrap/issues/1029

  • Vielen Dank. Der Kommentar auf github beantwortet im Grunde die Frage. Ich sehe die Hauptvorteile, wenn ich dasselbe Menü auf einem Handy verwende, da Sie beim Hovern kein Dropdown-Menü sehen können, indem Sie auf ein Handy klicken. Dies löst jedoch nicht die oben angesprochenen Zugänglichkeits- und Semantikprobleme. Ich werde Mark Otto diesbezüglich kontaktieren, da er diesen Beitrag in seinem Blog erwähnt hat!

    – iagdotme

    27. Februar 2012 um 22:13 Uhr

Die Designentscheidung wurde von den Leuten bei Twitter getroffen http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

Wenn Sie sich die Anzahl der Personen ansehen, die nach einer Lösung suchen, um den Schwebeflug zurückzubekommen (etwa 1000 positiv / etwa 700000 wenige ab 2017-11):

So erstellen Sie ein Dropdown-Menü für das Twitter Bootstrap-Menü, wenn Sie den Mauszeiger bewegen, anstatt darauf zu klicken

Sie können sehen, dass die Entscheidung nicht alle glücklich macht. Besonders wenn Sie Webseiten migrieren, die seit vielen Jahren Hover-Menüs haben, ist es unangenehm, von einem Framework zu einem neuen Stil “gezwungen” zu werden.

Es gibt viele CSS- und js-Hacks für diese Funktionalität, aber alle machen etwas kaputt.

Ich bin gegen die Verwendung von Hover, aber wenn jemand das wirklich braucht, dann richtig. Ich habe ein Plugin erstellt, das nur die Bootstrap-Javascript-API ohne Hack verwendet, sodass es auf allen Geräten funktioniert, ohne die Benutzerfreundlichkeit zu beeinträchtigen:

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

1063470cookie-checkWas war der Gedanke hinter der Implementierung des Dropdown-Menüs in Twitter Bootstrap? [closed]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy