Un menu en arborescence dans le style des explorateurs de fichiers peut être parfois bien pratique sur un site.
Après de multiple recherche sur Internet, je n'ai pas trouvé mon bonheur qui fonctionnerait aussi bien sous Internet Explorer mais également sur les navigateurs de type Mozilla, j'ai donc décidé d'écrire moi même le script et bizarrement il n'est pas long du tout.
Je vais vous en faire profiter maintenant, sachant qu'il est modulable à souhait, j'utilise ici des listes non ordonnées imbriquées mais d'autre éléments HTML peuvent être utilisés en remplacement de celles-ci.

Prérequis :

• Création de listes non ordonnées (pour mon exemple)
• Gestion de feuille de style

Langages utilisés :

• CSS
• (X)HTML
• JavaScript (DOM W3C)

Ressources utilisées :

• Image "+" :
• Image "-" :

Maintenant que vous avez tous les éléments nécessaires, entrons dans le vif du sujet !

Les propriétés CSS :
Les différentes propriétés CSS qui suivent ne sont qu'à titre indicatif et basique, on peut tout aussi bien ajouter des couleurs de fond et autres présentations fantaisiste.

ul.menu img {cursor: pointer; width: 16px; height: 16px; margin-left: -20px;}
ul.menu, ul.menu ul {text-align: left; list-style-type: none;}
ul.menu li {list-style-type: none; list-style-image: none; margin-left: -20px;}
ul.menu ul {display: none;}

La création de la liste imbriquée :
Cette liste peut être créer à partir d'une fonction récursive en récupérant des données d'une base de données ou même d'un fichier XML.

<ul class="menu">
	<li>Elément n°1</li>
	<li>
		<img src="images/plus.gif" onclick="expand(this)" />
		Elément n°2
		<ul>
			<li>Sous élément 2.1</li>
			<li>Sous élément 2.2</li>
			<li>
				<img src="images/plus.gif" onclick="expand(this)" />
				Sous élément 2.3
				<ul>
					<li>Sous élément 2.3.1</li>
					<li>Sous élément 2.3.2</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>
		<img src="images/plus.gif" onclick="expand(this)" />
		Elément n°3
		<ul>
			<li>Sous élément 3.1</li>
			<li>Sous élément 3.2</li>
		</ul>
	</li>
</ul>

Ceci n'est qu'un exemple, on peut très bien avoir 10 niveaux ou plus d'imbrication, ça ne pose aucun problème.

La fonction JavaScript (expand) appelée par les images est la suivante :

<script type="text/javascript">
function expand(n)
{
	var node = n;
	while ( node.nodeName != "UL" )
		node = node.nextSibling;
	if ( node.style.display == 'block' ) {
		node.style.display = 'none';
		n.src = 'images/plus.gif';
	} else {
		node.style.display = 'block';
		n.src = 'images/minus.gif';
	}
}

</script>

Petite explication de ce script qui utilise les propriétés du DOM :

• on passe en paramètre le noeud courant par le mot clé "this" dans la liste
• on récupère le noeud parent, donc le noeud "LI"
• on se place sur le noeud "UL" suivant
• on vérifie si l'arborescence est affichée ou non
  • si oui :
    • on change sa propriété CSS pour le cacher
    • on change la source de l'image (le noeud courant) en affichant le "+"
  • si non :
    • on change sa propriété CSS pour l'afficher
    • on change la source de l'image (le noeud courant) en affichant le "-"

On peut imaginer l'enregistrement de la position des différents menus et sous menus en utilisant des cookies lorsqu'on clique sur l'image pour développer ou non l'arborescence.

Exemple de ce qu'on obtient :

• Elément n°1
• Elément n°2
  • Sous élément 2.1
  • Sous élément 2.2
  • Sous élément 2.3
    • Sous élément 2.3.1
    • Sous élément 2.3.2
• Elément n°3
  • Sous élément 3.1
  • Sous élément 3.2

J'espère que tout ceci vous sera utile, en tout cas c'est bien pratique, pour la moindre question merci de passer par le forum.

A bientôt !