with css navigation suckerfish

with - Menús desplegables de CSS: "Mejor"? ¿Más rico en funciones?



superfish min js (9)

No podrá obtener un menú desplegable de CSS puro con la funcionalidad que necesita. Tendrás que usar algún tipo de Javascript. O bien una biblioteca como JQuery que se ha mencionado o modificando el código de Suckerfish para usar onclick en lugar de onmouseover / out.

Pero yendo por una ruta de Javascript podría facilitar a un grupo de personas ("usuarios con dificultades de coordinación") pero dificultar a los demás (cualquiera que tenga Javascript desactivado por algún motivo).

Es posible que desee considerar agregar algunas alternativas: menú flotante controlado por el mouse para aquellos que se sienten cómodos con el mouse; control basado en teclado a través de teclas de acceso y similares para otros.

Estoy en la desafortunada posición de tener que implementar un menú desplegable en cascada en un sitio que estoy construyendo. Estoy buscando una solución estilo Suckerfish que se base principalmente en CSS y funcione en un conjunto simple de UL y LI anidados.

Hijo de Suckerfish parece ser el camino a seguir, pero no me gusta la forma en que simplemente desaparece en el momento en que mueves el mouse, ya que los usuarios con dificultades de coordinación tendrán una pesadilla navegando por el sitio (o simplemente no molestarán, pero ya que es un sitio corporativo, hay algunos que probablemente tendrán que usar lo que implemente).

Hay buenas características que ni siquiera pensé necesitar, pero los dos elementos principales que estoy buscando son:

  1. Varios niveles utilizando una estructura UL / LI anidada
  2. Retraso pequeño (¿posiblemente configurable?) Antes de desaparecer cuando el menú está "mouseout" -ed, incluso si está provisto por algún JavaScript adicional.

Como dijo Lee Theobald, drop / down necesita Javascript, y Jquery es una gran opción. Pero por el lado de la accesibilidad, eche un vistazo a " Listamatic " una gran lista de menús y especial esta anidada .

Estoy usando la solución implementada en el sitio de Steve Gibson grc.com . Hace todo lo que necesito y no usa javascript . Sin embargo, la demora que estás buscando no está, por lo que probablemente necesites agregar algo de Javascript para eso.

No veo una manera de agregar demoras fuera de JavaScript, pero si vas a usar JavaScript, también puedes usar un menú controlado por JavaScript.

Si sigue un patrón de navegación semánticamente correcto y lo configura para que su visualización sea normal (por ejemplo, estática) cuando JavaScript no está presente, debería estar de acuerdo con lo que use.

Se trata de su público objetivo, ¿quién es más grande? ¿JS-disabled o usuarios con dificultades de coordinación? Supongo que estos últimos requieren la prioridad (si no es por el uso porcentual, entonces las leyes de discapacidad).

Le sugiero encarecidamente que utilice superfish , la adaptación jQuery del menú de suckerfish. Tiene muchas características (y la demora es una de ellas), agrega algunas capacidades de animación sofisticadas y se degrada al menú normal de suckerfish con gracia. Tampoco necesita ningún marcado adicional.

Mi primera recomendación es una ya hecha: el menú CSS de Steve Gibson . No utiliza JavaScript, es compatible con plataformas tan diferentes como lo que obtendrá, y es relativamente fácil de implementar.

Si eso no funciona, mi recomendación basada en JS va a mygosuMenu . Lo he usado durante bastante tiempo en todos mis proyectos antes de encontrar el menú de Steve. Es altamente configurable; y el estilo, la estructura y el código del menú están separados. Es una tabla HTML básica que puede personalizar mediante CSS al contenido de su corazón.

Todavía tengo dos sitios que usan este último:

Parte del problema de coordinación puede deberse a un mal diseño. Asegúrese de tener botones bastante grandes con, si es posible, superposición en todos los lados. Idealmente, un botón de navegación superior tendría un menú desplegable que aparecería centrado debajo de él (en lugar de alineado a la izquierda). Los submenús de la lista desplegable seguirían un patrón similar. He encontrado que este nivel de error de relleno acomoda a los usuarios descoordinados, y le ahorra la molestia de programar en javascript.

Cada sitio es diferente, por supuesto, así que presento esto más como una solución alternativa de ''qué pasaría si''.