2012-02-24 3 views
23

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

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

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

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

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

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

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

+1

Вы получите ответы только на основании мнения по этому предмету, чтобы получить прямой ответ, почему бы не связаться с основными разработчиками бутстрапа? Вот твиттер-дескрипторы разработчиков: [@mdo] (http://twitter.com/mdo), [@fat] (http://twitter.com/fat). –

+0

Я определенно интересуюсь главным мнением разработчиков, но также интересуюсь мнениями других людей и тем, как люди используют панель навигации Bootstrap в случае, о котором я говорил выше. – iagdotme

ответ

17

Это было сделано просто потому, что наведите указатель мыши на устройства с сенсорным экраном.

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

+1

Спасибо. Комментарий к github в основном отвечает на вопрос. Я вижу основные преимущества при использовании одного и того же меню на мобильном устройстве, так как вы не видите ниспадающее меню при наведении указателя мыши на мобильном устройстве. Однако это не решает проблемы доступности и семантики, которые я поднимал выше. Я свяжусь с Марком Отто об этом, упомянув этот пост в своем блоге! – iagdotme

0

Есть много CSS и JS хаки там для этой функции, но все они что-то ломают.

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

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

0

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

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

How to make Twitter Bootstrap menu dropdown on hover rather than click

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

Смежные вопросы