Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso.
Las cookies de este sitio web se usan para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Además, compartimos información sobre el uso que haga del sitio web con nuestros partners de redes sociales, publicidad y análisis web, quienes pueden combinarla con otra información que les haya proporcionado o que hayan recopilado a partir del uso que haya hecho de sus servicios. Puede cambiar la configuración u obtener más información aquí

Aceptar

Menú en arbol accesible

Google

Menús y navegación

Menú en arbol accesible

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.

Las ventajas de este menú en arbol con respecto al menú en arbol que hice hace algunos años son:

Publicado el 28-Jul.-07

ver el código fuente del ejemplo

Configuración

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 del menú en arbol 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 menuarbolaccesible.css a todos los documentos que hayan de mostrar el menú en arbol accesible.

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

Carpeta abierta seleccionada Carpeta abierta Carpeta cerrada seleccionada Carpeta cerrada Documento seleccionado Documento

Mostrar código

Parte código javascript [Seleccionar] 
Parte código css [Seleccionar] 


Buscador de animales en adopción
Creative Commons License
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.

Todos los códigos incluídos los de la página han sido paridos y tecleados por tunait.com. Política de cookies subir