Code HTML pour un menu arborescent

Le contenu

Lors de la conception d'un menu arborescent, les développeurs doivent classer les différentes sections de contenu d'un site. Par exemple, un site de vente de produits peut comporter des sections pour chaque type de produit, avec des sous-sections supplémentaires 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 l'arborescence de menus. Chaque élément de menu sera finalement un lien HTML, comme dans l'exemple de code suivant: Vêtements

Ce code relie un dossier appelé "clothing", situé dans le répertoire racine du site Web. Comme il n'y a pas de page indiquée, le lien ouvrira la page d'index dans ce répertoire. Dans la section Vêtements du menu arborescent, les articles peuvent être liés à des pages particulières, comme suit: Pantalon

Des listes

Les menus de l'arborescence HTML impliquent généralement des listes. L'exemple de composition suivant montre un menu utilisant des listes non numérotées:

• Les vêtements
• • Pantalons
  • Vestes
• Des cadeaux
• • Nourriture
  • Articles de nouveauté
  • DVD

Ce menu contient deux sections de premier niveau pour "vêtements" et "cadeaux". Chacun de ces éléments contient des éléments supplémentaires dans la liste. Chaque élément de la liste peut contenir une autre liste pour les sites complexes, un menu arborescent pouvant impliquer plusieurs niveaux de profondeur. En cliquant sur un élément de niveau supérieur, l'utilisateur accédera à la page de cette section de la page. Un clic sur un élément en particulier vous enverra à une page spécifique d'une section.

Le style

La plupart des sites utilisent des feuilles de style dans leurs menus. Dans le code CSS, les développeurs peuvent définir différents aspects de l'apparence du menu, notamment la conception, ainsi que les caractéristiques visibles de chaque élément de la liste. Les navigateurs Web affichent généralement des puces dans les éléments de liste par défaut, ce que de nombreux développeurs choisissent de ne pas afficher. L'exemple suivant de code CSS montre ceci:

ul {list-style-type: none; }

Pour choisir un style de puce particulier, le code sera le suivant: ul {list-style-type: square;}

Les développeurs peuvent éventuellement ajouter des attributs de classe à des listes à différents niveaux dans un menu arborescent, en adaptant le code CSS à chacun d'eux.

Écrire le script

De nombreux sites Web utilisent des fonctions JavaScript pour améliorer l'interactivité avec les menus arborescents. En les utilisant, les développeurs peuvent spécifier que certains éléments ne sont pas visibles initialement par l'utilisateur. Par exemple, un clic sur un élément de la liste de niveau supérieur peut provoquer l'apparition dynamique du début. Les fonctions JavaScript peuvent utiliser la propriété de présentation ou la visibilité d'un élément pour indiquer au navigateur de l'afficher ou de le masquer. Le code suivant montre la configuration d'un élément de la liste qui est masqué: element.style.visibility = "hidden";

La variante suivante utilise la propriété de présentation: element.style.display = "none";