8

Tengo el siguiente menú (simplificado):

nav ul, nav li {
  display:inline-block;
  list-style:none;
  margin:0;
  padding:0;
}

nav > ul {
  background:#ccc;
  height:40px;
  width:100%;
}

nav > ul > li {
  line-height:40px;
  position:relative;
  float:left;
  padding:0 10px;
}

nav > ul > li > ul {
  position:absolute;
  left:0;
  top:40px;
  background:#aaa;
  display:none;
}

nav > ul > li:hover > ul {
  display:block;
}

nav > ul > li > ul > li {
  width:150px;
  padding:0 10px;
}
<nav>
  <ul>
    <li><a href="#">Sección 1</a></li>
    <li>
      <a href="#">Sección 2</a>
      <ul>
        <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>
    </li>
    <li>
      <a href="#">Sección 3</a>
      <ul>
        <li><a href="#">Sub-Sección 3.1</a></li>
        <li><a href="#">Sub-Sección 3.2</a></li>
      </ul>
    </li>
    <li><a href="#">Sección 4</a></li>
  </ul>
</nav>

Ese menú funciona, si paso el ratón sobre las secciones 2 y 3, se abre un submenú en el que se pueden elegir más opciones, pero tiene un problema: si el usuario sólo utiliza el teclado (porque no tenga ratón o porque esté usando un lector de pantalla), los submenús no se abren correctamente.

Por ejemplo, si le damos al botón tabulador va saltando a "Sección 1", luego "Sección 2" (y no se abre su submenú), luego a "Sección 3" (en lugar de entrar en el submenú de "Sección 2", y tampoco se abre su submenú) y por último "Sección 4".

¿Cómo puedo hacer para que cuando llegue a la "Sección 2" o "Sección 3" se abran los submenús? ¿Sería posible usar los cursores y no sólo el tabulador? ¿Es posible realizarlo sólo con HTML+CSS o haría falta JavaScript?

0

2 respuestas 2

5

Usando el plugin de Adobe - Accessible-Mega-Menu y creando un pequeño script que abre el submenu cuando ese detecta si esta en focus.

$(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: block;
}

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

.sub-nav li {
  display: block;
  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> 

7
  • En algunos casos, no se abren los submenús cuando uso el tabulador
    – Alvaro Montoro
    Commented el 11 nov. 2016 a las 20:01
  • @AlvaroMontoro - Se abre solo en la primera vez... estoy mirando otra opción... pero creo que sin javascript no se podrá Commented el 11 nov. 2016 a las 20:03
  • 1
    @AlvaroMontoro - Mira esta demo: demo... he usado el plugin de Accessible Mega Menu... puedes moverte con las flechas del teclado... mira si te sirve sino borrare esta respuesta Commented el 11 nov. 2016 a las 20:32
  • JavaScript es una opción
    – Alvaro Montoro
    Commented el 11 nov. 2016 a las 20:40
  • La demo que enlazas se ve bien, lo único es que no se abre el menú a no ser que pulses hacia abajo, ¿sabes si se puede configurar para que se abra tan pronto como la opción "padre" esté activa?
    – Alvaro Montoro
    Commented el 11 nov. 2016 a las 20:47
3

Puedes usar el atributo tabindex para hacer los elementos li focuseables. Después, mediante el selector focus, hacer que tus submenús se muestren mediante display:block.

De esta manera tu podrás navegar mediante el tabulador por los distintos elementos del menú y se mostrarán los correspondientes submenús.

Te dejo tu código modificado:

nav ul, nav li {
  display:inline-block;
  list-style:none;
  margin:0;
  padding:0;
}

nav > ul {
  background:#ccc;
  height:40px;
  width:100%;
}

nav > ul > li {
  line-height:40px;
  position:relative;
  float:left;
  padding:0 10px;
}

nav > ul > li > ul {
  position:absolute;
  left:0;
  top:40px;
  background:#aaa;
  display:none;
}

nav > ul > li:hover > ul {
  display:block;
}

nav > ul > li > ul > li {
  width:150px;
  padding:0 10px;
}

li:focus ul{
  display: block;
}
<nav>
  <ul>
    <li><a href="#">Sección 1</a></li>
    <li tabindex="0">
      <a href="#">Sección 2</a>
      <ul>
        <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>
    </li>
    <li tabindex="0">
      <a href="#">Sección 3</a>
      <ul>
        <li><a href="#">Sub-Sección 3.1</a></li>
        <li><a href="#">Sub-Sección 3.2</a></li>
      </ul>
    </li>
    <li><a href="#">Sección 4</a></li>
  </ul>
</nav>

5
  • 2
    El problema de este código es que no puedes seleccionar ninguno de los submenús, sólo verlos.
    – Awes0meM4n
    Commented el 13 nov. 2016 a las 10:36
  • @Awes0meM4n Sí, es verdad, no se puede acceder a los submenus. Sin embargo, el OP sólo habla de mostrarlos (¿Cómo puedo hacer para que cuando llegue a la "Sección 2" o "Sección 3" se abran los submenús?). Estaba esperando algún tipo de contestación por parte del OP para estar completamente seguro. De todas maneras, esta noche me pondré a intentar sacar una solución para que también pueda acceder a los submenus. Commented el 14 nov. 2016 a las 7:39
  • La respuesta de @aldanux sí que funciona así que supongo que en breve la marcará como respondida. Revísala y si puedes mejorarla sin librerías pues mejor.
    – Awes0meM4n
    Commented el 14 nov. 2016 a las 7:43
  • 1
    @Awes0meM4n Esta noche me pondré a ello ^^ Commented el 14 nov. 2016 a las 7:45
  • Esta era mi primera respuesta... antes de editar... pero parece ser imposible de hacerlo sin javascript Commented el 15 nov. 2016 a las 1:37

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.