Attention, votre navigateur ne permet d'afficher correctement notre menu, mais vous pouvez néammoins accéder à tous les liens nécessaires à la navigation

Cette page reprend le principe donné dans l'article précédent, mais en l'étendant à une arborescence arbitraire. Il faudra étudier le code pour l'appliquer à votre cas personnel. Notre exemple contient des sous-menus jusqu'à l'ordre 3 (pour le sous-menu 1.1.1).

Choix ergonomiques

Ce type de menu soulève d'emblée une difficulté : dans les différentes entrées que l'on voit, lesquelles sont des liens directs vers d'autres pages, lesquelles ne sont que des noeuds dans l'arborescence, c.à.d. des ouvertures vers des sous-menus d'ordre supérieur ? Ici, pour des raisons de simplicité de codage, nous nous sommes contentés de rendre les liens directs en italiques (bien entendu, ils ne mènent à rien du tout dans notre démo) et les noeuds en caractères normaux. Pour une application réelle, il sera généralement bienvenu de renforcer cette distinction par de petits icones spéciaux en tête des entrées, différents selon qu'on aura affaire à un noeud ou un lien.

Une autre difficulté est de différentier les différents niveaux d'arborescence. Dans les explorateurs de fichiers (Windows, MacOS, etc...), on utilise des indentations différentes et nous avons choisi d'en faire autant ici, en mettant les différents sous-menus dans autant de blocs <DIV> avec des marges à gauche margin-left différentes. Cela fonctionne correctement dans IE5+ (Windows ou Mac) et NN6... avec un bémol : NN6-mac oublie les indentations si les noms des blocs DIV comportent des underscores :-(

Enfin, on n'oubliera pas que ce genre de menu glissant implique généralement un site en cadres, ce qui n'a pas que des avantages ;o) Bien sûr, on peut s'arranger pour l'utiliser sans cadres, mais au prix d'un alourdissement des pages et d'une complication de leur maintenance quand le site évolue, à moins de mettre ce menu dans un fichier «include» qui viendrait s'insérer automatiquement dans les pages.

Le principe

Les différents sous-menus sont placés dans des blocs <DIV> imbriqués avec des ID spéciaux (attention, à cause de NN6-mac, ne prenez que des lettres et des chiffres pour ces ID) :

• menu1, menu2, etc... pour les entrées d'ordre 1,
• menu1.1, menu1.2, etc... pour les entrées d'ordre 2,
• menu1.1.1, menu1.1.2, menu1.1.3, etc... pour les entrées d'ordre 3, et ainsi de suite

Le repliement des sous-menus préalablement affichés se fait sur la base de ces dénominations spéciales. On examinera le code pour avoir les détails.

Chacun de ces différents niveaux de sous-menu est rendu avec une classe de style différente, respectivement ordre_1, ordre_2, ordre_3, etc... dont le contenu est modifiable arbitrairement

Mise en oeuvre

Le plus long sera de construire l'ensemble de l'arborescence. Pour cela, on supprimera provisoirement l'instruction d'initialisation
    retire('povNN4','menu1.1.1',....)
de la page. L'effet sera laisser toute l'arborescence de la page s'afficher au chargement. On veillera à bien placer les ID requis et les classes de style. Eventuellement on pourra modifier les classes de style à son goût.

Charles