Code HTML pour un menu Arbre

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

• Menus arbre HTML impliquent normalement listes. Le balisage exemple suivant montre un menu à l'aide des listes non numérotées:
  

• Vêtements

• Pantalon


• Vestes

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"-