Cómo transformar "Menu" (:hover) a (:hover/click) para que funcione en Tablet y iPad?

Tienes que cambiar el selector por el elemento que tiene el :hover

En el ejemplo que te puse: '#nav li:has(ul)' es el selector que has de sustituir por el tuyo.

Es decir, si lo que tiene el hover es en tu caso #menu, debes de poner lo siguiente:

$( '#menu' ).doubleTapToGo();

Pero no he visto tu html, igual no es #menu, tiene que ser el elemento que contiene el :hover, revisa tu CSS y lo sabrás.

Un saludo,
Sam

Hola Samuel. Gracias por tu pronta respuesta.

Si. Lo hice tal cual.

Puse antes de la etiqueta </body>
----
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="_js/doubletaptogo.min.js"></script>
<script>
$( function()
{
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>
----
Yo creo que no funciona porque tengo los 2 menú de la página principal hechas con la etiqueta #menu y #menu2 y no con #nav como sale especificado.

Intenté cambiando la función:
$( '#nav li:has(ul)' ).doubleTapToGo();

a

$( '#menu li:has(ul)' ).doubleTapToGo();

Pero no dio resultado. Seguramente hay que hacer algo más complejo que yo no manejo. De todas maneras, gracias por la información.

¿Te leíste el enlace en el que explica su funcionamiento?. Pone claramente lo que tienes que hacer:

considering the markup above, the plugin should be only applied to the items that are parents – in order to avoid double-tap requirement on drop-down-less items:

$( '#nav li:has(ul)' ).doubleTapToGo();

Samuel, Muchas gracias!

Tengo una duda.

En mi caso, estoy terminando un sitio web hecho sin "responsibe design". --> www.pascheagroindustrial.cl

Apliqué el JavaScript "DoubleTapToGo.js" en el index.html (antes de la etiqueta </body> ) pero no dio resultado. Estoy seguro de que me falta cambiar algo pero no se qué puede ser. ¿Quizás modificar el CSS del menú? Porque sigo haciendo click en el menú "Categorías" pero no se despliega el "Submenú 1" ni Submenú 2" (en tablets y iPads).

Ojalá me puedan ayudar.

Saludos

Hola,

Los dispositivos iOS tienen una peculiaridad, y es que el navegador, "transforma" nativamente los hovers por pulsaciones (o tap), es decir, si tienes un elemento que se despliega en el hover y se navega con click, en un dispositivo táctil de Apple, Safari transformará el hover en un tap y para navegar, otro tap.

Es una solución que me parece válida para dispositivos táctiles, el problema surge en dispositivos táctiles no iOS, como Android. No he encontrado un navegador para Android que tenga esta funcionalidad, para ello has de utilizar un JS que detecte el tipo de navegador empleado en ese dispositivo y en ese caso simular el mismo comportamiento.

El script que utilizo para esto se llama "DoubleTapToGo.js". Aquí una explicación de su funcionamiento.

He utilizado este script en desarrollos web responsive, dándome resultados consistentes en navegadores de escritorio como Firefox, Chrome, IE y en dispositivos táctiles Android (navegadores Chrome y Firefox) e iOS (Safari). No lo he probado en navegadores más minoritarios como Opera, Dolphin, etc.