Categories: Sin categoría
Categories: Sin categoría

navbartablet

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>

Entradas relacionadas

View all
  • Leer más
  • Leer más
  • Leer más
  • Leer más