Какова была идея реализации выпадающего меню в Twitter Bootstrap? - PullRequest
27 голосов
/ 24 февраля 2012

Я смотрел на фреймворк Bootstrap в Твиттере, и я действительно впечатлен. Однако я не понимаю, как работает выпадающее меню навигации.

Во-первых, чтобы увидеть дочерние ссылки, вы должны нажать на родителя. Я вижу преимущества этого, но почему бы не использовать более традиционный подход при наведении курсора по умолчанию?

Во-вторых, кажется, что мышление позади выпадающего меню Twitter Bootstrap освещает родительские страницы. Я, наверное, не очень хорошо объясняю это ... Скажем, у вас есть простая структура веб-страницы:

  • Дом
  • О
    • Команда
  • Услуга
    • Веб-дизайн
    • Хостинг
    • Домены
  • Контакт

В традиционной структуре выпадающего меню вам нужно будет навести курсор на «about» и «services», и появится выпадающее меню, содержащее дочерние ссылки (например, «Веб-дизайн», «Хостинг» и т. Д.). Однако вы также можете нажать на родительскую страницу (т. Е. «О нас» и «Услуги») и посетить их.

С Bootstrap у вас не может быть родительской страницы в структуре, вы должны использовать тег привязки ("#"). Когда вы нажимаете эту кнопку, вы видите страницы в раскрывающемся списке. Это не хорошо, если есть родительская страница. Это также не очень хорошо с точки зрения семантики (что означает «#») и доступности (javascript выключен, программы чтения с экрана и т. Д.).

Я, наверное, что-то упустил, но может кто-нибудь объяснить причину этого, особенно в отношении родительских страниц и семантического html / accessibility?

Ответы [ 4 ]

25 голосов
/ 28 февраля 2012

Марк Отто ( @ mdo ), один из главных разработчиков Bootstrap, ответил в своем блоге:

http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

20 голосов
/ 25 февраля 2012

Это было сделано просто потому, что всплывающие меню плохо работают на устройствах с сенсорным экраном.

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

0 голосов
/ 28 ноября 2017

Дизайнерское решение было принято людьми в Твиттере, см. http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

Если вы посмотрите на количество людей, которые ищут решение, чтобы вернуть зависание (около 1000 положительных / около 700000 единиц по состоянию на 2017-2011 годы):

Как сделать так, чтобы всплывающее меню Twitter Bootstrap при наведении курсора вместо нажатия

Вы можете видеть, что решение не делает всех счастливыми. Особенно, если вы мигрируете веб-страницы, в которых много лет назад находились меню при наведении, было бы неловко, когда какой-то фреймворк «принуждал» их к новому стилю.

0 голосов
/ 27 июня 2015

Существует множество CSS и js-хаков для этой функциональности, но все они что-то ломают.

Я против использования hover, но если это кому-то действительно нужно, то делайте это правильно. Я сделал плагин, который использует только API-интерфейс Bootstrap javascript без какого-либо взлома, поэтому он работает на всех устройствах без ущерба для удобства использования:

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

...