2012-02-24 19 views
23

He estado buscando en el framework Bootstrap de Twitter y estoy realmente impresionado. Sin embargo, no entiendo la forma en que funciona el menú de navegación desplegable.¿Cuál fue el pensamiento detrás de la implementación del menú desplegable en Twitter Bootstrap?

En primer lugar, para ver enlaces secundarios, debe hacer clic en el elemento primario. Puedo ver los beneficios de esto, pero ¿por qué no tener el menú desplegable más tradicional como enfoque predeterminado?

En segundo lugar, parece que el pensamiento detrás del menú desplegable de Twitter Bootstrap ilumina las páginas principales. Probablemente no estoy explicando que muy bien ... Say, que tiene una estructura simple página Web:

  • Inicio
  • Sobre
    • El equipo
  • Servicios
    • Diseño Web Hosting
    • Dominios
  • contacto

En una estructura de menú desplegable tradicional, que le pasa sobre "sobre" y "servicios" y en el menú desplegable que contienen los enlaces secundarios (por ejemplo, "Diseño web", "Alojamiento", etc.) aparecerán. Sin embargo, también podría hacer clic en la página principal (es decir, "Acerca de" y "Servicios") y visitarlos.

Con Bootstrap no puede tener una página primaria en la estructura, debe usar la etiqueta delimitadora ("#"). Al hacer clic en esto, verá las páginas en el menú desplegable. Esto no es bueno si hay una página principal. Tampoco es genial desde un punto de vista semántico (¿qué significa "#"?) Y de accesibilidad (javascript desactivado, lectores de pantalla, etc.).

Probablemente me haya perdido algo, pero ¿alguien puede explicar el razonamiento detrás de esto particularmente en lo que respecta a páginas padre y html/accesibilidad semántica?

+1

Solo recibirá respuestas basadas en la opinión sobre este tema, así que para obtener una respuesta directa, ¿por qué no ponerse en contacto con los principales desarrolladores del programa de arranque? Aquí están los identificadores de Twitter de los desarrolladores: [@mdo] (http://twitter.com/mdo), [@fat] (http://twitter.com/fat). –

+0

Definitivamente estoy interesado en la opinión de los desarrolladores principales, pero también me interesan las opiniones de otras personas y cómo las personas están utilizando la barra de navegación Bootstrap en el caso que destaqué anteriormente. – iagdotme

Respuesta

17

Se ha hecho de esta manera simplemente porque los menús de desplazamiento no funcionan bien en los dispositivos con pantalla táctil.

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

+1

Gracias. El comentario sobre github básicamente responde la pregunta. Puedo ver las principales ventajas cuando utilizo el mismo menú en un dispositivo móvil, ya que no puede ver un menú desplegable al pasar el mouse haciendo clic en un dispositivo móvil. Sin embargo, esto no resuelve los problemas de accesibilidad y semántica que planteé anteriormente. Me pondré en contacto con Mark Otto sobre esto ya que mencionó esta publicación en su blog. – iagdotme

0

Hay muchas CSS y JS hacks que hay para esta funcionalidad, pero todos ellos están rompiendo algo.

Estoy en contra de utilizar el vuelo estacionario, pero si alguien realmente lo necesita, hágalo correctamente.Hice un plugin que está utilizando sólo el Bootstrap Javascript API sin ningún tipo de corte, por lo que funciona en todos los dispositivos, sin frenar la usabilidad:

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

0

La decisión de diseño fue hecho por la gente de Twitter ver http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

Si nos fijamos en el número de personas que buscan una solución para conseguir flotar hacia atrás (unos 1000/700000 algunas pocas cabezas positivos a partir de 2017-11):

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

puede ver que la decisión no hace felices a todos. Especialmente si migra páginas web que tienen menús desplegables desde hace muchos años, es incómodo que un framework lo "fuerce" a un nuevo estilo.

Cuestiones relacionadas