domingo, 7 de abril de 2013

Adapta tus menus CSS a pantallas tactiles/dispositivos moviles

Los menús CSS

El uso de menús desplegables, usando CSS, está muy extendido en la actualidad, pudiendo encontrarse en muchas páginas web. En su gran mayoría, estos menús se diseñaron pensando en ordenadores de sobremesa, equipados con ratón.

Para desplegar un menú con el ratón basta con pasar el puntero por encima de él. Gracias al selector :hover del CSS se detecta cuando el puntero está encima del menú. Esto vale para ordenadores de sobremesa, porque para pantallas táctiles esto no funciona siempre así.

¿Que pasa en IOS?


En iOS el evento hover es lanzado antes del evento click, con lo cual conseguimos desplegar el menú con un clic.



¿Que pasa en Android?


En Android al hacer un clic no nos lanza el evento hover previamente, lo lanza justo después, pero como mientras tanto procesa el clic, el resultado es que se recarga la página y el despliegue del menú dura un suspiro.


La solución

Una solución es basar el despliegue de los menus en javascript por medio del evento onclick.

Pero hay una solución más simple: onclick="return false", algo así: <a href='#' onclick="return false"><span>MENU1</span></a>. Esto hace que el clic no se procese pero que se lanze un evento hover.

El resumen de esta entrada es:
"Si el menú desplegable de tu página web no funciona en dispositivos móviles prueba con onclick="return false" en el link del menú."

3 comentarios:

  1. No me funcionó.

    :/

    ¿Qué otra alternativa hay?

    ResponderEliminar
    Respuestas
    1. No conozco otra manera de resolverlo. ¿Tu página esta online para que se pueda ver?. Si es un menú CSS basado en el selector :hover debería funcionar.

      Eliminar
  2. A mí sí que me funcionó.
    Muchas gracias.

    ResponderEliminar