0

estoy como loco intentando realizar un menu despegable para mi plantilla de wordpress y no tengo manera de que me funcione.

Encontré un código pero no logro ver donde esta el error.

Lo que necesito es que al usar el teclado el tabulador no se salte los submenu como hacia hasta ahora. Necesito que al llegar al menu superior me aparcezca el submenu y el tabulador lo recorra y cuando termine salte al siguiente menu para que sea lo mayor accesible posible. Con el raton lo hece correctamnete pro no al usar el teclado

$(function () {
   
   // inicializar accessibleMegaMenu
   $('nav').accessibleMegaMenu();
            
  // Hack para que el megamenu no muestre flash de animación css después de cargar la página.
  setTimeout(function(){ $('body').removeClass('init'); }, 500);  
  
  // Abre el menu cuando detecta si esta en focus con TAB
  $(window).on('keyup', function (e) {
    
    var codeTab = (e.keyCode ? e.keyCode : e.which);
    
    if (codeTab == 9 && $('#focus_1:focus').length) {
      
      $('a#focus_1').trigger('mouseenter');
    }

    if (codeTab == 9 && $('#focus_2:focus').length) {
      
      $('a#focus_2').trigger('mouseenter');
    }
    
   }); 
});
.nav-menu {
  display: block;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 15;
}

.nav-item {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
}

.nav-item > a {
  position: relative;
  display: inline-block;
  padding: 0.5em 1em;
  margin: 0 0 -1px 0;
  border: 1px solid transparent;
}

navigation item 
.nav-item > a:focus,
.nav-item > a.open {
  border: 1px solid #dedede;
}

navigation item
.nav-item > a.open {
  background-color: #fff;
  border-bottom: none;
  z-index: 1;
}

.sub-nav {
  position: absolute;
  display: none;
  top: 2.6em;
  margin-top: -1px;
  padding: 0.5em 1em;
  border: 1px solid #dedede;
  background-color: #fff;
}

.sub-nav.open {
  display:inherit;
}

.sub-nav ul {
  display: inline-block;
  vertical-align: top;
  margin: 0 1em 0 0;
  padding: 0;
}

.sub-nav li {
  
  list-style-type: none;
  margin: 0;
  padding: 0;
}
<nav>
  <ul class="nav-menu">        
    <li class="nav-item">
      <a href="#">Sección 1</a>
    </li>        
    <li class="nav-item">
      <a id="focus_1" href="#">Sección 2</a>    
      <div class="sub-nav">
        <ul class="sub-nav-group">
          <li><a href="#">Sub-Sección 2.1</a></li>
          <li><a href="#">Sub-Sección 2.2</a></li>
          <li><a href="#">Sub-Sección 2.3</a></li>
        </ul>
      </div>
    </li>        
    <li class="nav-item">
      <a id="focus_2" href="#">Sección 3</a>       
      <div class="sub-nav">
        <ul class="sub-nav-group">
          <li><a href="#">Sub-Sección 3.1</a></li>
          <li><a href="#">Sub-Sección 3.2</a></li>
        </ul>
      </div>
    </li>        
    <li class="nav-item">
      <a href="#">Sección 4</a>
    </li>
  </ul>
</nav>
  <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="http://terrillthompson.com/tests/menus/accessible-mega-menu/js/jquery-accessibleMegaMenu.js"></script>                     

Estoy empezando a programar la verdad. No se si el fallo esta como llamo a la funcion en el codigo html.

¿Me podeis ayudar?

Un saludo

1
  • Como vereis aqui me funciona correctamente. El problema es que lo quiero poner todo dentro de un html para adjuntarlo al wordpress y no consigo que funcione.
    – cabobeto
    Commented el 15 mar. 2023 a las 10:56

1 respuesta 1

0

Supongo que el problema está aquí.

$(function () {
   
    // inicializar accessibleMegaMenu
    $('nav').accessibleMegaMenu();
            
    // Hack para que el megamenu no muestre flash de animación css después de cargar la página.
    setTimeout(function(){ $('body').removeClass('init'); }, 500);  
  
    // Abre el menu cuando detecta si esta en focus con TAB
    $(window).on('keyup', function (e) {
        var codeTab = (e.keyCode ? e.keyCode : e.which);
        if (codeTab == 9 && $('#focus_1:focus').length) {
            $('a#focus_1').trigger('mouseenter');
        }
        if (codeTab == 9 && $('#focus_2:focus').length) {
            $('a#focus_2').trigger('mouseenter');
        }
   });

});

WordPress por defecto no entenderá la variable $ provocando que no se pueda ejecutar, prueba cambiandolo a esto.

jQuery(function () {
    
    // inicializar accessibleMegaMenu
    jQuery('nav').accessibleMegaMenu();
            
    // Hack para que el megamenu no muestre flash de animación css después de cargar la página.
    setTimeout(function(){ jQuery('body').removeClass('init'); }, 500);  
  
    // Abre el menu cuando detecta si esta en focus con TAB
    jQuery(window).on( 'keyup', function (e) {
        var codeTab = (e.keyCode ? e.keyCode : e.which);
        if (codeTab == 9 && jQuery('#focus_1:focus').length) {
            jQuery('a#focus_1').trigger('mouseenter');
        }
        if (codeTab == 9 && jQuery('#focus_2:focus').length) {
            jQuery('a#focus_2').trigger('mouseenter');
        }    
    });

});

Tampoco es necesario re agregar jQuery, eso puede provocar problemas, verifica que tu tema ya tenga encola dentro de sus scripts jQuery, de lo contrario puedes agregarlo manualmente usando wp_enqueue_script( 'jquery' );

Te recomiendo leer : https://developer.wordpress.org/reference/functions/wp_enqueue_script/ https://developer.wordpress.org/reference/functions/wp_enqueue_style/ https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/

Para entender mejor cómo funcionan los estilos y scripts en WordPress, También verifica que el orden de los scripts sean correctos, si después de revisar esto sigue dando error, revisa la consola para tener mejor contexto de que provoca ese error.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.