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ía 1
<ul>
<li><a href="documento2html">Link 2</a></li>
<li><a href="documento3.html">Link 3</a></li>
</ul>
</li>
<li>Categoría 2
<ul>
<li><a href="documento4.html">Link 4</a></li>
<li>Otra categorí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; }
