Menu árbol JS y CSS

A partir de un listado de links se crea un menú en arbol usando javascript no intrusivo. En dispositivos sin javascript queda cargado el listado de links a la vista.

HTML

Se trata de crear una lista no ordenada de links con un id con html

<ul id="miMenu">
  <li><a href="documento1.html">Link 1</a></li>
  <li>Categor&iacute;a 1 
    <ul>
      <li><a href="documento2html">Link 2</a></li>
      <li><a href="documento3.html">Link 3</a></li>
    </ul>
  </li>
  <li>Categor&iacute;a 2 
    <ul>
      <li><a href="documento4.html">Link 4</a></li>
      <li>Otra categor&iacute;a 
        <ul>
          <li><a href="documento5.html">Link 5</a></li>
        </ul>
      </li>
      <li><a href="documento6.html">Link 6</a></li>
    </ul>
  </li>
  <li><a href="documento7.html">Link 7</a></li>
</ul>

Javascript

Debajo de la lista ponemos la llamada al script pasándole el id del menú como argumento

<script type="text/javascript">
<!--
iniciaMenu('miMenu');
//-->
</script> 

Si se quiere usar más de una lista con más de un menú en el mismo documento se hace otra llamada a la función iniciaMenu pasándole el id de la otra lista.

<script type="text/javascript">
<!--
iniciaMenu('miMenu');
iniciaMenu('miOtroMenu');
//-->
</script> 

Vinculamos el archivo javascript  a todos los documentos que hayan de usarlo.

<script type="text/javascript" src="menuarbolaccesible.js"></script> 

Dentro del archivo menuarbolaccesible.js podemos determinar si los links se abrirán en la propia ventana o serán lanzados en ventana nueva.

var abrirenVentanaNueva = 0 // 0 para que todos los links se abran en la misma ventana. 1 para abrir en nueva ventana

El resto de aspectos se configuran desde la hoja de estilos

CSS

Vincular la hoja de estilos a todos los documentos que hayan de mostrar el menú en arbol accesible.

<link href="menuarbolaccesible.css" rel="stylesheet" type="text/css" />

• 
  

Imágenes

     

código javascript

/****************************************************************
Menú en arbol accesible. 28-Jul-07
Autor tunait http://javascript.tunait.com/
Script de libre uso mientras se mantengan intactos los créditos de autor.
****************************************************************/
var abrirenVentanaNueva = 0;

var tagApartado = 'a';
var docActual = location.href;

function iniciaMenu(menu)
{
  idMenu = menu
  menu = document.getElementById(menu);
  for(var m = 0; m < menu.getElementsByTagName('ul').length; m++)
  {
    el = menu.getElementsByTagName('ul')[m]
    el.style.display = 'none';
    el.className = 'menuDoc';
    el.parentNode.className = 'cCerrada'
    textoNodo = el.parentNode.firstChild.nodeValue;
    nuevoNodo = document.createElement(tagApartado);
    if(tagApartado == 'a') nuevoNodo.href = '#' + textoNodo;
    nuevoNodo.className = 'tagApartado';
    nuevoNodo.appendChild(document.createTextNode(textoNodo));
    el.parentNode.replaceChild(nuevoNodo,el.parentNode.firstChild);
    nuevoNodo.onclick = function()
    {
      hijo = sacaPrimerHijo(this.parentNode, 'ul')
      hijo.style.display = hijo.style.display == 'none' ? 'block' : 'none';
      if(this.parentNode.className == 'cCerrada' || this.parentNode.className == 'cAbierta')
      {
        this.parentNode.className = this.parentNode.className == 'cCerrada' ? 'cAbierta' : 'cCerrada'
      }
      else
      {
        this.parentNode.className = this.parentNode.className == 'cAbiertaSeleccionada' ? 'cCerradaSeleccionada' : 'cAbiertaSeleccionada' 
      }
      return false;
    }
  }
  documentoActual(idMenu)
}

function sacaPrimerHijo(obj, tag)
{
  for(var m = 0; m < obj.childNodes.length; m++)
  {
    if(obj.childNodes[m].tagName && obj.childNodes[m].tagName.toLowerCase() == tag)
    {
      return obj.childNodes[m];
      break;
    }
  }
}

function documentoActual(menu)
{
  idMenu = menu
  menu = document.getElementById(menu);
  for(var s = 0; s < menu.getElementsByTagName('a').length; s++)
  {
    if(abrirenVentanaNueva) menu.getElementsByTagName('a')[s].target = 'blank';
    enlace = menu.getElementsByTagName('a')[s].href
    if(enlace == docActual)
    {
      menu.getElementsByTagName('a')[s].parentNode.className = 'documentoActual'
    }
    if(enlace == docActual && menu.getElementsByTagName('a')[s].parentNode.parentNode.id != idMenu)
    {
      menu.getElementsByTagName('a')[s].parentNode.parentNode.parentNode.className = 'cAbiertaSeleccionada'
      var enlaceCatPadre = sacaPrimerHijo(menu.getElementsByTagName('a')[s].parentNode.parentNode.parentNode, 'a')
      enlaceCatPadre.onclick = function()
      {
        hijo = sacaPrimerHijo(this.parentNode, 'ul')
        hijo.style.display = hijo.style.display == 'none' ? 'block' : 'none';
        this.parentNode.className = this.parentNode.className == 'cAbiertaSeleccionada' ? 'cCerradaSeleccionada' : 'cAbiertaSeleccionada' 
        return false;
      } 
      nodoSig = sacaPrimerHijo(menu.getElementsByTagName('a')[s].parentNode.parentNode.parentNode, 'ul')
      nodoSig.style.display = 'block';/**/
      abrePadre(idMenu, enlaceCatPadre.parentNode)
    }
  }
}

function abrePadre(idmenu, obj)
{
  obj.parentNode.parentNode.className = 'cAbiertaSeleccionada'
  var nodoSig = sacaPrimerHijo(obj, 'ul')
  nodoSig.style.display = 'block';
  if(obj.parentNode.id != idmenu)
  {
    abrePadre(idmenu, obj.parentNode.parentNode)
  }
}

código css

#menu1 {
  font-size: 90%;
  list-style-image: url(imasmenu/doct.gif);
  border: 1px solid #006699;
  width: 200px;
  padding-top: .5em;
  padding-bottom: .5em;
  list-style: inside;
}
html > body #menu1{
  list-style: outside;
}
.cAbierta{
  list-style-type: none;
  list-style-image: url(imasmenu/carpabiertat.gif);
}
.cAbiertaSeleccionada{
  list-style-type: none;
  list-style-image: url(imasmenu/carpabiertasel.gif);
}
.cCerradaSeleccionada{
  list-style-type: none;
  list-style-image: url(imasmenu/carpcerradasel.gif);
}
.cCerrada{
  list-style-type: none;
  list-style-image: url(imasmenu/carpcerradat.gif);
}
.menuDoc{
  list-style-type: none;
  list-style-image: url(imasmenu/doct.gif);
}
.tagApartado, a.tagApartado{
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}
.documentoActual{
  list-style-image: url(imasmenu/docsel.gif);
}

#menu1 a {
  color: #006699;
}
.documentoActual a{
  color:#993300;
}