Pages Web HTML peuvent utiliser les structures hiérarchiques, qui sont particulièrement bien adaptées aux menus du site. Si vous avez un grand site avec beaucoup de sections et sous-sections en son sein, à l'aide d'un menu d'arbre fournit à vos utilisateurs une façon intuitive pour naviguer dans votre contenu. Le balisage HTML pour un menu arborescent implique normalement listes, chaque élément de la liste contenant un élément d'ancrage HTML lien vers une page ou un site domaine particulier. De nombreux sites utilisent également Cascading Style Sheet et le code javascript pour améliorer l'apparence et la fonctionnalité des menus d'arbres.
Contenu
Lors de la conception d'un menu arborescent, les développeurs ont besoin de catégoriser les différentes sections de contenu au sein d'un site. Par exemple, un site de vente de produits pourrait avoir des sections pour chaque type de produit, avec d'autres sous-sections de ceux-ci pour diviser les produits en catégories. Parfois, les développeurs Web utilisent des sous-répertoires pour organiser le contenu du site, auquel cas chaque répertoire peut correspondre à un élément de niveau supérieur dans le menu arborescent. Chaque élément du menu sera finalement un lien HTML, comme dans l'exemple de code suivant:
Vêtements
Ce code lie à un dossier nommé "vêtements" qui est dans le répertoire racine de site Web. Depuis pas de page est indiqué, le lien ouvrira la page d'index dans ce répertoire. L'intérieur de la section des vêtements de l'arborescence, articles pourraient créer un lien vers des pages particulières, comme suit:
Pantalon
Listes
Cadeaux
Aliments
Articles Nouveauté
DVD
Ce menu contient deux sections de haut niveau pour les vêtements et les cadeaux. Intérieur de chacun de ceux-ci sont d'autres éléments de liste. Chaque élément de la liste peut contenir une autre liste, donc pour les sites complexes, un menu d'arbre peut comporter plusieurs niveaux de profondeur. En cliquant sur un élément de haut niveau se tiendra à l'utilisateur de la page d'accueil pour cette section du site, tout en cliquant sur un élément particulier les mènera à une page spécifique dans une section.
Style
La plupart des sites utilisent les feuilles de style à leurs menus. Dans le code CSS pour un site, les développeurs peuvent dicter divers aspects de l'apparence du menu, y compris la mise en page ainsi que les caractéristiques visibles de chaque élément de la liste. Les navigateurs Web affichent souvent des points de balle sur les éléments de la liste par défaut, de nombreux développeurs qui choisissent de ne pas afficher. L'exemple de code CSS suivant illustre ceci:
ul {list-style-type: none-}
Pour choisir un style de puce particulier, le code suivant applique:
ul {list-style-type: carrée}
Les développeurs peuvent éventuellement ajouter des attributs de classe pour les listes à différents niveaux au sein d'un menu arborescent, l'adaptation de la CSS pour chacun d'eux.
Scripting
De nombreux sites Web utilisent des fonctions javascript pour améliorer l'interactivité avec des menus d'arbres. Utilisation de celles-ci, les développeurs peuvent spécifier que certains articles ne doivent pas être visibles à l'utilisateur d'abord. Par exemple, en cliquant sur un élément de la liste de haut niveau pourrait causer ses paragraphes apparaissent dynamiquement. Fonctions javascript peuvent utiliser soit l'écran ou de la propriété de la visibilité d'un élément de dicter si le navigateur doit afficher ou cacher. Le code suivant illustre la définition d'un élément de la liste pour être caché:
element.style.visibility ="caché"-
L'alternative suivant utilise la propriété d'affichage:
element.style.display ="aucun"-