Doble click para evitar pulsar en tablets el menú

15 de noviembre de 2019
15 de noviembre de 2019 Riskoo

Doble click para evitar pulsar en tablets el menú

Buenas tardes, me sucede un problema y es que el menú que tengo actualmente en una de mis webs , cuando estoy desde la tablet no funciona de forma adecuada.

¿Por qué no funciona de forma adecuada el menú?

Pues bien, al ser una pantalla tactil y no haberse collapsado al no ser un móvi, sigue el menú en horizontal pero no se despliega el submenú al no existir en los modos tactiles el :hover

Entonces la idea es que para los elementos del menú que tengan submenú haya que darle un primer click para abrir y luego otro para ir al destino.

 

menu desplegable en tablet

 

Para ello vamos a seguir los siguientes pasos:

1º Crear un archivo javascript con la siguiente información

;(function(e,t,n,r){e.fn.doubleTapToGo=function(r){if(!(«ontouchstart»in t)&&!navigator.msMaxTouchPoints&&!navigator.userAgent.toLowerCase().match(/windows phone os 7/i))return false;this.each(function(){var t=false;e(this).on(«click»,function(n){var r=e(this);if(r[0]!=t[0]){n.preventDefault();t=r}});e(n).on(«click touchstart MSPointerDown»,function(n){var r=true,i=e(n.target).parents();for(var s=0;s<i.length;s++)if(i[s]==t[0])r=false;if(r)t=false})});return this}})(jQuery,window,document);
 
Lo llamaremos doubletaptogo.min.js también podéis descargarlo desde aquí https://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/doubletaptogo.js
 
 
2º Iremos a la plantilla de nuestra página , mientras más genérica mejor por ejemplo el primer index.php que tenga información del head .
 
Insertaremos dentro del head lo siguiente. Cuidado con el formato del texto
<script src=«doubletaptogo.min.js«></script>
 
 
Luego abajo justo antes del </body> . Yo he usado la llamada JQuery pero si acepta tu plantilla el $ puedes hacer referencia a Jquery así.
 
<script>

  jQueryfunction()
  {
    jQuery‘.navbar li:has(ul)’ ).doubleTapToGo();
  });

</script>
 

 3º Por último debemos de ver la estructura de nuestro menú, ver alguna de las clases que tenga el nav . En mi caso la clase es navbar por lo que pondré en el script de arriba .navbar . Lo que aparece después del .navbar es para que solo se habrán los que tengan submenú haciendo referencia a si tiene o no un <ul> 

 

 

<nav  class=«main navbar navbar-default navbar-we-mega-menu mobile-collapse hover-action» data-menu-name=«main» data-block-theme=«natiboo_laguiadelmotor_theme» data-style=«Default» data-animation=«None» data-delay=«» data-duration=«» data-autoarrow=«» data-alwayshowsubmenu=«» data-action=«hover» data-mobile-collapse=«0»>
    <div class=«container-fluid»>
      <ul  class=«we-mega-menu-ul nav nav-tabs»>
  <li  class=«we-mega-menu-li» data-level=«0» data-element-type=«we-mega-menu-li» description=«» data-id=«views.coches.page_1» data-submenu=«0» hide-sub-when-collapse=«» data-group=«0» data-class=«» data-icon=«» data-caption=«» data-alignsub=«» data-target=«»>
      <a class=«we-mega-menu-li» title=«» href=«/coches» target=«»>
      
      Coches

          </a>
    
</li><li  class=«we-mega-menu-li dropdown-menu» data-level=«0» data-element-type=«we-mega-menu-li» description=«» data-id=«views.noticias.page_1» data-submenu=«1» hide-sub-when-collapse=«» data-group=«0» data-class=«» data-icon=«» data-caption=«» data-alignsub=«» data-target=«»>
      <a class=«we-mega-menu-li» title=«» href=«/noticias» target=«»>
      
      Noticias

          </a>
    <div  class=»we-mega-menu-submenu» data-element-type=»we-mega-menu-submenu» data-submenu-width=»» data-class=»» style=»width: px»>
  <div class=«we-mega-menu-submenu-inner»>
    <div  class=«we-mega-menu-row» data-element-type=«we-mega-menu-row» data-custom-row=«0»>
  <div  class=«we-mega-menu-col span12» data-element-type=«we-mega-menu-col» data-width=«12» data-block=«» data-blocktitle=«0» data-hidewhencollapse=«» data-class=«»>
  <ul class=«nav nav-tabs subul»>
  <li  class=«we-mega-menu-li» data-level=«1» data-element-type=«we-mega-menu-li» description=«» data-id=«acedb12c-3cae-404b-9dfd-5f0690e9000f» data-submenu=«0» hide-sub-when-collapse=«» data-group=«0» data-class=«» data-icon=«» data-caption=«» data-alignsub=«» data-target=«»>
      <a class=«we-mega-menu-li» title=«» href=«/noticias/actualidad» target=«»>
      
      Actualidad

          </a>
    
</li><li  class=«we-mega-menu-li» data-level=«1» data-element-type=«we-mega-menu-li» description=«» data-id=«e7ef502e-ce0d-4612-9230-65e7dea246b2» data-submenu=«0» hide-sub-when-collapse=«» data-group=«0» data-class=«» data-icon=«» data-caption=«» data-alignsub=«» data-target=«»>
      <a class=«we-mega-menu-li» title=«» href=«/noticias/novedades» target=«»>
      
      Novedades

          </a>
    
</li><li  class=«we-mega-menu-li» data-level=«1» data-element-type=«we-mega-menu-li» description=«» data-id=«8d553108-2ed4-4a27-994e-3083e5d113d4» data-submenu=«0» hide-sub-when-collapse=«» data-group=«0» data-class=«» data-icon=«» data-caption=«» data-alignsub=«» data-target=«»>
      <a class=«we-mega-menu-li» title=«» href=«/noticias/clasicos» target=«»>
      
      Clásicos

          </a>
    
</li>
</ul>
</div>

</div>

  </div>
</div>
</li><li  class=«we-mega-menu-li» data-level=«0» data-element-type=«we-mega-menu-li» description=«Eventos» data-id=«c1e82ad2-fab7-4824-be8b-50008d89fd72» data-submenu=«0» hide-sub-when-collapse=«0»>
      <a class=«we-mega-menu-li» title=«Eventos» href=«/eventos» target=«»>
      
      Eventos

          </a>
    
</li><li  class=«we-mega-menu-li» data-level=«0» data-element-type=«we-mega-menu-li» description=«» data-id=«b4ad3504-64a9-41fb-ba50-8aefd868053d» data-submenu=«0» hide-sub-when-collapse=«» data-group=«0» data-class=«» data-icon=«» data-caption=«» data-alignsub=«» data-target=«»>
      <a class=«we-mega-menu-li» title=«» href=«/node/add/coche» target=«»>
      
      Publica una oferta

          </a>
    
</li><li  class=«we-mega-menu-li» data-level=«0» data-element-type=«we-mega-menu-li» description=«Revista Digital» data-id=«1e2cb5c0-86a3-4dde-9fb5-c40eb0661c56» data-submenu=«0» hide-sub-when-collapse=«0»>
      <a class=«we-mega-menu-li» title=«Revista Digital» href=«https://www.laguiadelmotor.net/revistas-digital« target=«»>
      
      revista digital

          </a>
    
</li>
</ul>
    </div>
  </nav>

 

Si en vez de navbar la estructura fuera <nav #menu … Podríamos poner en el javascript

 

<script>

  jQueryfunction()
  {
    jQuery‘#menu li:has(ul)’ ).doubleTapToGo();
  });

</script>
>