Menú desplegable accesible

Se han publicado en la red unos cuántos artículos comentando algunos inconvenientes de los menús desplegables. En esta ocasión se me ocurrió crear un menú desplegable (otro) tratando de corregir los inconvenientes que en estos artículos se comentan.

Se trata de crear un menú mediante una lista no ordenada (ul) de links y con un id Menu. Supongamos que tenemos un listado de artículos y tutoriales para algunos lenguajes:

<ul id="menu"> <li><b>HTML</b> <ul> <li><b>HTML3</b> <ul> <li><a href="#">Especificaci&oacute;n</a></li> <li><a href="#">Referencia</a></li> </ul> </li> <li><b>HTML4</b> <ul> <li><a href="#">Especificaci&oacute;n</a></li> <li><a href="#">Referencia</a></li> </ul> </li> </ul> </li> <li><b>XHTML</b> <ul> <li><a href="#">Modularizaci&oacute;n</a></li> <li><b>XHTML1.0</b> <ul> <li><a href="#">Transitional</a></li> <li><a href="#">Frameset</a></li> <li><a href="#">Strict</a></li> </ul> </li> <li><a href="#">XHTML1.1</a></li> <li><a href="#">XHTML2</a></li> </ul> </li> <li><b>Javascript</b> <ul> <li><a href="#">Javascript CORE</a></li> <li><a href="#">Javascript DOM</a></li> <li><b>&Uacute;ltimas versiones</b> <ul> <li><a href="#">Javascript 1.5</a></li> <li><a href="#">Javascript 1.6</a></li> </ul> </li> <li><a href="#">Jscript</a></li> </ul> </li> <li><b>XML</b> <ul> <li><a href="#">Historia</a></li> <li><a href="#">Especificaci&oacute;n</a></li> <li><a href="#">Esquemas XML</a></li> <li><a href="#">XML DOM</a></li> </ul> </li> </ul>

Los elementos de lista que definan a una lista anidada los marcamos con negrita o cualquier otro tag de marcado que prefiramos. En el ejemplo vamos a usar el tag b para negritas.

Tal y como está nuestro menú de links se podrá visualizar en cualquier dispositivo, independientemente de si soporta o no CSS y/o Javascript.

Hoja de estilos para menú sin js

Lo siguiente que haremos será crear una hoja de estilos para cuando el menú se cargue en un dispositivo con soporte para CSS pero sin soporte Javascript o algún navegador con Javascript desactivado. A esta hoja de estilos le damos por nombre de archivo estilosmenusinjs.css y la vinculamos al documento que contiene el menú de links asignándole un atributo title con el mismo valor que al nombre de archivo.

<link type="text/css" title="estilosMenusinjs" rel="stylesheet" href="estilosmenusinjs.cs" />

Hoja de estilos para menú con js

Finalmente creamos una segunda hoja de estilos para el menú en su modo desplegable con Javascript. Esta hoja de estilos será vinculada al documento directamente con Javascript, de forma que sólo será cargada si el dispositivo que carga la página soporta Javascript y además lo tiene activado. El nombre de archivo que le daremos a esta hoja de estilos será estilosmenujs.css.

El Javascript del menú se encarga de alterar lo necesario para convertir la lista de links en un menú desplegable. Substituye los elementos marcados en negritas por links para poder navegarlos mediante el teclado en caso necesario.
El menú evita usar eventos de ratón. Se abren las opciones mediante un enter (intro) cuando el foco está sobre ese elemento y se cierran de igual forma. Usando el ratón (mouse) se abre y cierra con click. Igual cuando el ratón sale del menú éste se cierra al cabo de unos segundos (esto no sucede cuando se usa el menú con el teclado).

Javascript códigos by tunait is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma licencia 2.5 España License.
Permissions beyond the scope of this license may be available at http://tunait.com/javascript/index.php?s=condiciones.