Código HTML para un Árbol de menús

páginas Web HTML pueden utilizar estructuras jerárquicas, que están particularmente bien adaptados a los menús del sitio web. Si usted tiene un sitio web grande con un montón de secciones y subsecciones que contiene, utilizando un menú de árbol proporciona a sus usuarios una manera intuitiva para navegar por su contenido. El marcado HTML para un menú de árbol implica normalmente listas, con cada elemento de la lista que contiene un elemento de anclaje HTML ligarse a una página o sitio de área en particular. Muchos sitios también utilizan la hoja de estilo en cascada y del Javascript para mejorar el aspecto y la funcionalidad de los menús de los árboles.

Contenido

Al diseñar un menú de árbol, los desarrolladores necesitan para categorizar las distintas secciones de contenido dentro de un sitio. Por ejemplo, un sitio de venta de productos podría tener secciones para cada tipo de producto, con otras subsecciones dentro de éstos 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 menú de árbol. Cada elemento en el menú será en última instancia un enlace HTML, como en el siguiente ejemplo de código:
<a href="clothing/"> Ropa </a>

Este código se vincula a una carpeta llamada "ropa", que se encuentra en el directorio raíz del sitio Web. Dado que no se indica la página, el enlace se abrirá la página de índice en ese directorio. Dentro de la sección de ropa del menú de árbol, los elementos podrían enlazar a páginas en particular, como sigue:
<a href="clothing/trousers.html"> Pantalones </a>

Liza

menús de árboles HTML implican normalmente listas. El marcado siguiente ejemplo muestra un menú usando las listas no numeradas:
<Ul>
<Li> <a href="clothing/"> Ropa </a> </ li>
<Li> <ul>
<Li> <a href="clothing/trousers.html"> Pantalones </a> </ li>
<Li> <a href="clothing/jackets.html"> chaquetas </a> </ li>
</ Ul> </ li>
<Li> <a regalos href="gifts/"> </a> </ li>
<Li> <ul>
<Li> <a href="gifts/food.html"> Alimentos </a> </ li>
<Li> <a href="gifts/novelty.html"> artículos de la novedad </a> </ li>
<Li> <a href="gifts/dvds.html"> DVDs </a> </ li>
</ Ul> </ li>
</ Ul>

Este menú contiene dos secciones de primer nivel para la ropa y los regalos. Dentro de cada uno de estos son más elementos de la lista. Cada elemento de la lista puede contener otra lista, por lo que para los sitios complejos, un menú de árbol puede implicar varios niveles de profundidad. Al hacer clic en un elemento de nivel superior llevará al usuario a la página de inicio para esa sección del sitio, mientras hace clic en un elemento en particular los llevará a una página específica dentro de una sección.

Estilo

La mayoría de los sitios utilizan hojas de estilo con el estilo de sus menús. Dentro del código CSS para un sitio, los desarrolladores pueden dictar diferentes aspectos de la apariencia del menú, incluyendo el diseño, así como las características visibles de cada elemento de la lista. navegadores web suelen mostrar los puntos de bala en la lista de elementos por defecto, que muchos desarrolladores optan por no mostrar. El siguiente ejemplo de código CSS muestra esto:
ul {-style-type lista: ninguno; }

Para elegir un estilo de viñeta en particular, el código se aplica lo siguiente:
ul {list-style-type: cuadrado;}

Los desarrolladores pueden añadir opcionalmente atributos de clase a las listas en diferentes niveles dentro de un menú de árbol, la adaptación de la CSS para cada una de ellas.

scripting

Muchos sitios web utilizan las funciones de JavaScript para mejorar la interactividad con los menús de los árboles. El uso de estos, los desarrolladores pueden especificar que determinados artículos no deben ser visibles para el usuario inicialmente. Por ejemplo, al hacer clic en un elemento de lista de nivel superior podría causar sus subsecciones que aparecen de forma dinámica. funciones de JavaScript pueden usar ya sea la pantalla o propiedad de visibilidad de un elemento de dictar si el navegador debe mostrar u ocultar. El código siguiente muestra la configuración de un elemento de lista que se oculta:
element.style.visibility = "oculto";

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