Menú desplegable en iPad

Estoy usando CSS para un menú desplegable en un sitio que estoy construyendo. Cuando pasa el cursor sobre una pestaña principal, el menú desplegable se desvanece usando la propiedad de transición de CSS3. El problema que tengo es que la pestaña principal se vincula a otra página, por lo que cuando toca una pestaña principal en el iPad, lo lleva a la página en lugar de mostrar el menú desplegable, lo que causa problemas de usabilidad.

¿Hay alguna manera de hacer que el menú desplegable aparezca en el primer toque y el segundo toque lo lleve a la página principal?

Aquí está el HTML que estoy usando para mostrar el menú:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="http://www.apple.com">Team</a>
      <ul>
        <li><a href="http://www.apple.com">Our Workers</a></li>
        <li><a href="http://www.apple.com">Join Us</a></li>
      </ul>
     </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Y aquí hay un enlace jsFiddle: http://jsfiddle.net/A64QU/197/

Gracias de antemano, agradezco cualquier ayuda.​

preguntado el 12 de junio de 12 a las 17:06

2 Respuestas

Está en el camino correcto con un diseño que invoca el menú en el primer toque y la página principal en el segundo toque. Esto funcionará solo en dispositivos con pantalla táctil o a veces con pantalla táctil en los que el usuario no siempre puede "pasar el mouse" y es fundamental para los usuarios que tienen dificultades para mantener el cursor firme sobre el menú, por lo que lo recomiendo sobre un menú de pasar el mouse para mostrar diseño independientemente de si se trata de Mobile Safari, Internet Explorer o cualquier otro navegador.

Para hacer lo que pide, maneje el evento de clic en el <a> etiquetas (por ejemplo, use jQuery: http://api.jquery.com/click/) y ocultar/mostrar el menú de esa manera (podría usar la alternancia de jQuery o mostrar/ocultar). Luego extienda el código para considerar si el menú se muestra u oculta para determinar si debe evitar <a> el comportamiento predeterminado de la etiqueta y mostrar el menú (por ejemplo, jQuery's preventDefault: http://api.jquery.com/event.preventDefault/) o permitir el comportamiento predeterminado de hacer clic en <a> ocurrir: navegar a la <a href> URL.

Tenga en cuenta que, con este enfoque, es posible que también deba proporcionar una forma para que el usuario descarte el menú una vez que esté abierto (y bloquee alguna parte de la página). A menudo, esto se hace con un controlador de clics en el nivel del documento.

No recomiendo tratar de implementar una retención táctil en su lugar, ya que esto no es muy conocido por los usuarios. En mi experiencia con las pruebas de usuarios, la mayoría no intentará esto, incluso en cosas que parecen ser un menú.

Respondido el 06 de diciembre de 12 a las 03:12

No hay "desplazamiento" en la metáfora de la interfaz de usuario táctil, aunque hay un evento equivalente que se ha denominado touchhold en la interfaz de usuario de jQuery Mobile; se dispara cuando el dedo permanece presionado sobre la pantalla táctil durante un tiempo determinado, por ejemplo, 500 ms, 700 ms, lo que sea. Algo similar sucede en el teclado virtual del iPad cuando mantienes presionado un dedo sobre ciertas teclas, la tecla [a], por ejemplo: obtienes una ventana emergente de formas variantes de [a] (diéresis, acentuado, etc.).

Puede conectar las cosas para que el código de apertura del menú se invoque en touchhold en lugar de en el evento de toque, y luego haga que los elementos de menú individuales escuchen el evento de toque. Usted mismo tendría que anular los eventos táctiles de Mobile Safari escribiendo el javascript requerido o instalar una biblioteca de interfaz de usuario que implemente este comportamiento.

Respondido el 12 de junio de 12 a las 17:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.