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