Truco: Menú desplegable JavaScript que cumple normativa WAI (WCAG 1.0)

A continuación os presento un menú desplegable que funciona mediante JavaScript, la peculiaridad de este sistema es que en navegadores o aparatos (teléfonos móvil, consolas, etc.) donde no tengan activada la característica de JavaScript funciona perfectamente, y todo ello sin necesidad de complicados menús CSS o recargas de páginas HTML.

Cuando JavaScript no se encuentra activado las opciones del menú aparecen desplegadas, pudiendo acceder a ellas sin problemas. Por otro lado, los validadores automáticos de normativas WAI pueden informar de un error al no encontrar la etiqueta '<'noscript'>', aunque veréis que el menú funciona a la perfección con una simple comprobación manual, ahí esta el 'truco' de este sistema.

En la página web http://www.vertigofreeware.com/trucos/MenuJavaScript.html tenéis un ejemplo completo, podéis ver el código fuente y copiarlo. Y a continuación paso a explicar su contenido.

Lo primero es incluir el siguiente código JavaScript en nuestra página:

Codigo fuente

<script type="text/javascript">
// ******* Para ocultar/desocultar los desplegables **********
// Sistema de Menú desplegable JavaScript
// compatible con normativa WAI - (WCAG 1.0)
// Ideado y Creado por www.VertigoFreeware.com,
// y gracias por mantener estas lineas en el copy & paste
var anteriorVisible="";
function cambiaEstado(iden)
{     
var elhtml = document.getElementById(iden);
if (elhtml.style.display == 'block')
  elhtml.style.display = 'none';
else
  elhtml.style.display = 'block';

if (document.getElementById(anteriorVisible)==document.getElementById(iden)) {
anteriorVisible = '';
} else {
if (anteriorVisible!="") {
var antV = document.getElementById(anteriorVisible);
antV.style.display = 'none';
}
anteriorVisible=iden;
}
}

function HacerVisibleSpan(iden) {
var elhtmlScript = document.getElementById(iden);
elhtmlScript.style.display='none';
elhtmlScript.style.padding='1px';
elhtmlScript.style.margin='1px 1px 1px 10px';
elhtmlScript.style.border='1px dashed #a2c6fc';
}
//*******************************************************************
</script>

Y una vez dentro de la etiqueta '<'body'>' debéis incluir lo siguiente:

Codigo fuente

<a href="javascript:cambiaEstado('Des1')"><strong>
- Menú desplegable 1 >></strong></a><br>
<span id="Des1">
<!-- esto es por las opciones WAI de NOSCRIPT, hace el span -->
  <!-- invisible cuando hay javaScript y visible sin javascript -->
       <script type="text/javascript">
       HacerVisibleSpan('Des1');
       </script>
<!-------------->
<a href='http://www.pagina1.com'>Opción 1</a>
<br>
<a href='http://www.pagina2.com'>Opción 2</a>
<br>
</span>

En el código, se observa en la parte superior del mismo, la etiqueta de menú, Menú desplegable 1 y por debajo el contenido con Opción 1 y Opción 2 como ejemplo, ampliable a la cantidad que necesitemos. Y también podéis incluir todos los menús que necesitéis, con solo duplicar el código anterior, y teniendo cuidado en poner un nuevo descriptor de etiqueta, es decir, donde pone Des1, le pondremos otro nombre, por ejemplo, Des2, Des3... etc.

Pues nada mas que explicaros, para cualquier cosa no dudéis en preguntarme, y recordad que aquí tenéis un ejemplo completo.