Código HTML para un menú en árbol

Por sue smith
Código HTML para un menú en árbol
Hemera Technologies/Photos.com/Getty Images

Las páginas web HTML pueden utilizar estructuras jerárquicas que están particularmente bien adaptadas a los menús del sitio web. Si tienes un sitio web grande con un montón de secciones y subsecciones dentro de ella con un menú en árbol proporcionarás a los usuarios una forma intuitiva de navegar por su contenido. El formato HTML para un menú de árbol implica normalmente listas con cada elemento de la lista que contiene un elemento que ancla HTML a una página en particular o a un área del sitio. Muchos sitios también utilizan hojas de estilo en cascada y código de JavaScript para mejorar la apariencia y la funcionalidad de los menús en árbol.

Contenido

Cuando se diseña un menú de árbol, los desarrolladores necesitan categorizar las diferentes secciones de contenido de un sitio. Por ejemplo, un sitio de venta de productos podría tener secciones para cada tipo de producto con subsecciones adicionales dentro de estos para dividir los productos en categorías. A veces, los desarrolladores web utilizan subdirectorios para organizar el contenido del sitio, en cuyo caso cada directorio podría corresponder a un elemento de nivel superior en el árbol de menús. Cada elemento del menú en última instancia, será un enlace HTML, como en el siguiente código de ejemplo: Clothing

Este código vincula una carpeta llamada "clothing", que se encuentra en el directorio raíz del sitio web. Dado que no hay ninguna página indicada, el vínculo abrirá la página de índice en ese directorio. Dentro de la sección clothing del menú de árbol, los elementos pueden vincularse a las páginas en particular, de la siguiente manera: Trousers

Listas

Los menús HTML en árbol implican normalmente listas. El siguiente ejemplo de marcación muestra un menú utilizando listas no numeradas:

Este menú contiene dos secciones de primer nivel para "clothing" y "gifts". Dentro de cada uno de éstos se encuentran artículos adicionales en la lista. Cada elemento de la lista puede contener otra lista para sitios complejos, un menú de árbol puede implicar varios niveles de profundidad. Al hacer clic en un elemento de nivel superior llevarás al usuario a la página de esa sección de la página, al hacer clic en un elemento en particular te enviará a una página específica dentro de una sección.

Estilo

La mayoría de los sitios utilizan hojas de estilo en sus menús. Dentro del código de CSS, los desarrolladores pueden dictar diferentes aspectos a la apariencia del menú, incluyendo el diseño, así como las características visibles de cada elemento de la lista. Los navegadores web suelen mostrar viñetas en elementos de lista por defecto, lo que muchos desarrolladores optan por no mostrar. El siguiente ejemplo de código CSS muestra esto:

ul { list-style-type: none; }

Para elegir un estilo de viñeta en particular, el código será el siguiente: ul {list-style-type: square;}

Los desarrolladores pueden añadir opcionalmente atributos de clase a las listas en diferentes niveles dentro de un menú de árbol, adaptando el CSS para cada uno de ellos.

Escribiendo el guión

Muchos sitios web utilizan funciones de JavaScript para mejorar la interactividad con los menús en árbol. Al utilizarlos, los desarrolladores pueden especificar que ciertos artículos no sean visibles para el usuario inicialmente. Por ejemplo, al hacer clic en un elemento de la lista de nivel superior podrías ocasionar que el inicio apareciera en forma dinámica. Las funciones de JavaScript puede utilizar la propiedad de presentación o visibilidad de un elemento para indicarle al navegador que debe mostrar u ocultar. El código siguiente muestra la configuración de un elemento de la lista que se oculta: element.style.visibility="hidden";

La alternativa siguiente utiliza la propiedad de presentación: element.style.display="none";