Menú desplegable de dispositivos móviles (táctil) en css/jquery

Question

He estado leyendo muchos temas sobre este tema, un menú desplegable que es amigable en dispositivos móviles. Muchas veces se considera mejor tener una acción que no sea de desplazamiento en el menú desplegable. Existen soluciones provisionales, una de las cuales es que el hipervínculo principal para el elemento desplegable debe vincularse a un hashtag.

Esto hace que funcione en dispositivos móviles, pero para el usuario de escritorio normal, esto sería confuso. Así que la solución sería tener un menú desplegable normal para usuarios de escritorio en el que el primer hipervínculo también se vincula a una página. Para usuarios de dispositivos móviles, al tocar un elemento se abrirá el menú desplegable, pero un segundo toque en el elemento principal abrirá la página correspondiente.

he visto el siguiente sitio y de alguna manera su menú funciona exactamente igual que: http://www.hgtv.com/ Puede ver esto en una tableta y haga clic en el menú principal, toque ese tema de nuevo y usted sabrá lo que quiero decir.

Pero, ¿cómo puedo encontrar o descargar la configuración similar exacta para mi propio sitio?

Gracias de antemano

Answer 1

Usted va a tener que manejar varios eventos para conseguir que la funcionalidad en ambos navegadores móviles y de escritorio.

Si mira ese menú de ejemplo, se desplaza para expandir mientras que en el dispositivo móvil desea un clic/toque para expandir.

Una forma en que trataría de lograr esto sería tener el oyente 'hover' para el escritorio pero usar un oyente de eventos 'touch' para el móvil.

Para hacer esto, tendrá que agregar un evento personalizado como 'touch' a jQuery. Ver el post de abajo para una forma de hacerlo:

How to recognize touch events using jQuery in Safari for iPad? Is it possible?

Answer 2

prueba este: http://suanaikyeo.com/blog/make_dropdown/

ya probarlo y que está funcionando tanto para vuelo estacionario y haga clic en evento ..

Answer 3

Aquí es una técnica independiente del dispositivo (no estoy seguro de cuánto puedo confiar en la detección de funciones para esto ... muchos navegadores modernos informan de soporte para eventos táctiles incluso si la interfaz es mouse) Solía ​​hacer que los menús de desplazamiento sobre las pantallas táctiles se esperaran (es decir, evitar el contacto) evento de "clic" prematuro en el enlace del menú superior cuando solo queremos el primer clic t o activar un vuelo estacionario).

El truco consiste en reconocer que un evento de toque con el mouse + clic ocurrirá uno encima del otro ... es decir, el evento de desplazamiento será seguido casi de inmediato por el evento de clic. Podemos detectar esto y evitar que el clic se produzca ... solo permite que se active el clic si ha transcurrido un cierto lapso de tiempo desde el evento de desplazamiento.

Al probar en una computadora de escritorio, nunca pude obtener el tiempo transcurrido más rápido que 150ms entre pasar el mouse y hacer clic sin importar qué tan rápido hice clic. Cuando se prueba en un iPad (4ª generación), el tiempo transcurrido entre el vuelo & y el clic siempre fue de 7 - 8 ms. Así que elegí un tiempo límite de 50 ms para permitir hacer clic. La función de jQuery que escribí es la siguiente (esto supone una lista anidada menú estándar CSS vuelo estacionario):

function initNav(){ 
    // make drop-downs work properly with touchscreens by preventing instant hover-click 
    $(some_selector_for_your_top_level_list_items).each(function(){ 
     var li = $(this); 
     li.mouseover(function(){ 
     // store time of hover event 
     li.data('hoverTime', new Date().getTime()); 
     }); 
     li.children('a').click(function(){ 
     // only allow click if at least 50ms has elapsed since hover 
     return (new Date().getTime() - li.data('hoverTime')) > 50; 
     }); 
    }); 
    } 

Trabajando como un encanto hasta el momento.Es posible que 50 ms sean demasiado bajos para dispositivos mucho más lentos.

Para los que no sean JS, seguirá teniendo el comportamiento de desplazamiento de CSS predeterminado como alternativa.

Espero que esto ayude a las personas, ya que no pude encontrar una buena solución que no involucrara la detección de características cuestionables y/o la reescritura de su comportamiento CSS hover usando JS.

Answer 4

Aquí es lo que tengo trabajo:

function isTouchDevice(){ 
    return typeof window.ontouchstart !== 'undefined'; 
} 

jQuery(document).ready(function(){ 
    /* If mobile browser, prevent click on parent nav item from redirecting to URL */ 
    if(isTouchDevice()) { 
     // 1st click, add "clicked" class, preventing the location change. 2nd click will go through. 
     jQuery("#menu-main-menu > li > a").click(function(event) { 
      // Perform a reset - Remove the "clicked" class on all other menu items 
      jQuery("#menu-main-menu > li > a").not(this).removeClass("clicked"); 
      jQuery(this).toggleClass("clicked"); 
      if (jQuery(this).hasClass("clicked")) { 
       event.preventDefault(); 
      } 
     }); 
    } 
}); 

estoy usando esto para mi sitio de WordPress. En los navegadores de escritorio (navegadores no táctiles), cuando se hace clic en el elemento del menú principal, irá directamente a la ubicación del enlace. Cuando está suspendido, mostrará el menú desplegable.

Para dispositivos móviles (navegadores táctiles), cuando se toca el elemento del menú principal, se ampliará el menú desplegable, y si se hace clic de nuevo irá a la nueva ubicación. También agregué una línea de código "restablecer" para que esta parte funcione: si toca el primer elemento del menú principal (expandiendo el menú desplegable), toque el segundo elemento del menú principal (expandiendo el segundo menú desplegable), luego toque el primer menú principal elemento de nuevo, todavía se comportará como un menú desplegable hasta que vuelva a hacer clic. Sin esta línea, simplemente pasaría directamente a la nueva ubicación.