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
<script src="doubletaptogo.min.js">
Luego abajo justo antes del . Yo he usado la llamada JQuery pero si acepta tu plantilla el $ puedes hacer referencia a Jquery así.
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
<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 class="we-mega-menu-li" title="" href="/noticias" target="">
Noticias
<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 class="we-mega-menu-li" title="" href="/noticias/novedades" target="">
Novedades
<a class="we-mega-menu-li" title="" href="/noticias/clasicos" target="">
Clásicos
<a class="we-mega-menu-li" title="Eventos" href="/eventos" target="">
Eventos
<a class="we-mega-menu-li" title="" href="/node/add/coche" target="">
Publica una oferta
<a class="we-mega-menu-li" title="Revista Digital" href="https://www.laguiadelmotor.net/revistas-digital" target="">
revista digital
Si en vez de navbar la estructura fuera <nav #menu ... Podríamos poner en el javascript
