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.
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
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>
jQuery( function()
{
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>
jQuery( function()
{
jQuery( ‘#menu li:has(ul)’ ).doubleTapToGo();
});
</script>