Ir al contenido

Cuatro métodos para mostar y ocultar información, por ejemplo un menú.

Este verano publiqué un artículo acerca de este tema, porque el método de usar checkbox me pareció, cuando no, curioso.

Aqui recopilo otros métodos, la estructura del html es la misma, solo cambia la técnica empleada.

<a id="open-hide" class="open-hide">Menu</a>
<ul id="menu" class="menu">
    <li><a href="">Inicio</a></li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Contacto</a></li>    
</ul>

Usando javascript

Mediante javascript añadimos una clase (.show) al elemento que hace la función de botón #open-hide y mediante el selector + en css, mostramos y ocultamos el menu. La ventaja es que evitamos dependencias.

See the Pen Show menu with javaScript shared by Jose Oliveras (@joliveras) on CodePen.

Usabilidad

Con este sencillo javascript añadiendo una clase al boton al hacer clikc podemos modificar el aspecto del botón para indicar al usuario que el menú se puede cerrar clickando otra vez, ya que es la única manera de cerrar el menu, hacer click fuera del menu no lo cierra. Es importante indicar este estado por si el usuario no desea navegar por una de las secciones.

Usando jQuery

La técnica es la misma que el caso anterior pero con jQuery.

See the Pen Show menu with jQuery by Jose Oliveras (@joliveras) on CodePen.

Usabilidad

Mismo caso que en el anterior con javascript

Usando Css con :hover

En esta ocasión no añadimos ninguna clase, simplemente al hacer :hover sobre el botón se muestra el menú.

See the Pen Show menu with :hover by Jose Oliveras (@joliveras) on CodePen.

Usabilidad

Al colocar el ratón sobre el botón se despliega el menú, si colocanos el cursor fuera del botón o del menú este desaparecerá.

Esta técnica puede causar algunos problemas en dispositivoss táctiles, así que es conveniente usar una de las técnicas anteriores para los dispositivos táctiles. Si usamos http://modernizr.com en nuestro proyecto podemos usar una u otra técnica dependiendo del dispositivo añadiendo la clase touch o no-touch en cada caso.

.no-touch .open-hide:hover + .menu{
    height: 120px;
}

En este ejemplo solo los dispositivos que usan ratón desplegarán el menú con :hover.

Usando Css con :focus

El comportamiento es similar a los dos casos mostrados con jQuery y javascript, el menú se despliega al hacer click.

See the Pen Show menu with :focus by Jose Oliveras (@joliveras) on CodePen.

Usabilidad

Clickando en cualquier elemento del menú o fuera del menu o del botón se cerrará el menú, lo que es muy conveniente. El problema es que esto no es evidente, se me ha ocurrido añadir una “x” para indicar que clicando sobre ella se cierra el menú, lo que no es del todo cierto, pero sirve para indicar al usuario como cerrar el menú sin hacer ninguna selección.

Consideraciones

Algunas versiones de Safari no respoden bien a este método, no reconoce el estado de :focus. La solución es añadir tabindex al html, lo cual puede acarrear algunos incovenientes, en cuando a accesibilidad se refiere, si no testea convenientemente.

También se puede añadir outline: 0; para evitar el “difuminado azulito” típico de webkit, siempre podremos modificar los estilos para indicar que el foco está sobre el botón.

Conclusión

No creo que haya un método mejor o peor, cada uno tiene sus ventajas e incovenientes, todo es usar el que más nos guste o mejor, el que mejor se adapte a nuestro proyecto.