Une arborescence dynamique et contextuelle

Publié le : 23 avril 2003 – Dernière modification le 21 décembre 2021 – par Nicolas Hoizey – 203 commentaires

1
2
3
4
5
1 vote

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Voici comment obtenir très simplement dans tout site SPIP un menu arborescent dynamique du plus bel effet. Comble de bonheur, il sait en plus être contextuel pour s’adapter à la page où il est affiché, et il a la bonne idée de se servir des fonctionnalités DHTML déjà présentes dans SPIP.

Voici comment obtenir très simplement dans tout site SPIP un menu arborescent dynamique du plus bel effet.

Comble de bonheur, il sait en plus être contextuel pour s’adapter à la page où il est affiché, et il a la bonne idée de se servir des fonctionnalités DHTML déjà présentes dans SPIP.

Voici donc comme promis depuis plus de six mois une version simplifiée et nettoyée du menu arborescent dynamique que nous (Clever Age) avons réalisée pour la partie du site EDF dédiée aux particuliers.

Voilà un exemple très parlant de ce que l’on peut en faire :

Sur le portail EDF
Le menu arborescent dynamique du site EDF pour les particuliers

Voyez par vous-même : http://particuliers.edf.fr/rubrique...

Et voilà ce que ça donne en installation de base :

Le menu dans les squelettes par défaut
Voilà ce que donne ce menu après simple ajout dans le squelette par défaut des rubriques.

Utilisation

Il suffit de télécharger le fichier ci-dessous, de le dézipper à la racine de votre SPIP en s’assurant au préalable qu’il n’y a pas déjà
un fichier menu.html et/ou un fichier menu.php3.

Le menu arborescent dynamique

Ensuite, ajoutez par exemple dans le rubrique.html, à l’endroit où vous voulez voir le menu :

<INCLURE(menu.php3){id_rubrique}>

Personnalisation

Personnalisation des textes : couleurs, polices, tailles ...

La personnalisation s’effectue via la feuille de style présente dans le squelette menu.html :

<style>
.secteuroff { font-weight: bold; }
.rubriqueoff { font-weight: normal; }
.secteuron, .rubriqueon { font-weight: bold; color: #ff9999; }
.secteur, .rubrique { font-weight: bold; color: #ff3333; }
</style>

Une différentiation est faite entre les secteurs et les rubriques de niveaux inférieurs et entre ces mêmes éléments selon qu’ils font ou non partie de la hiérarchie de l’élément courant :

-  secteuroff pour un secteur différent de celui de l’élément courant
-  secteuron pour le secteur de l’élément courant
-  rubriqueoff pour une rubrique n’appartenant pas à la hiérarchie de l’élément courant
-  rubriqueon pour une rubrique appartenant à la hiérarchie de l’élément courant
-  secteur pour un secteur si c’est l’élément courant
-  rubrique pour la rubrique courante si ce n’est pas un secteur

Cette feuille de style peut éventuellement être retirée de ce squelette et replacée dans la feuille de style générale.

Personnalisation des images

Comme vous pourrez le lire ci-dessous, ce menu exploite des fonctions déjà présentes dans SPIP, mais utilise une copie des images concernées.

Il est donc possible de remplacer les images de pliage et dépliage par d’autres, mais à condition de les remplacer par des images de mêmes noms et de même taille : 16 x 14 pixels.

De même, les puces peuvent aussi être remplacées.

Pourquoi recopier le répertoire img_pack/ ?

Comme vous pourrez le voir dans le zip, il est nécessaire de reprendre dans la racine une partie du répertoire img_pack/ qui se trouve normalement dans ecrire/.

C’est tout simplement que ce menu exploite les fonctionnalités DHTML développées pour l’interface de publication de SPIP (ie ce qui se trouve dans ecrire/inc_layer.php3) plutôt que s’appuyer sur un script DHTML externe à la manière du menu proposé par Kangourou.

Or, les fonctions utilisées génèrent du code HTML faisant référence de manière relative aux images contenues dans img_pack, ce qui oblige à en faire une copie à la racine. Heureusement, cela permet par ailleurs la personnalisation expliquée ci-dessus.

Compatibilité

PlateformeNavigateurFonctionneNe fonctionne pas
Windows Internet Explorer 6.0 .
Windows Netscape 6.1, 7.02 4.51 [1]
Windows Mozilla 1.0, 1.3 .
Windows Phoenix 0.5 .
Windows Opera . 6.05 [1]
Windows Crazy Browser 1.05 .

Notes

[1] Toujours déplié

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

95 discussions

  • J’ais également besoin de voir l’affichage des articles de mon sites.
    Pour le moment, seules les rubriques s’affichent, avec le style prévu pour les articles en plus...bizarre

    Répondre à ce message

  • 2
    Fab

    Comme beaucoup d’entre vous , je trouve ce menu terrible, mais je voudrais y intégrer les articles, malheureusement j’arrive un peu tard puisque les liens cités plus bas où l’on expliquait comment faire pour intégrer les articles sont morts

    Pouvez vous m’aider en postant un marche a suivre ?
    Merci bcp

    • ok dsl j’avais pas mis le repertoire img_pack a la racine du site. Maintenant ça marche nikel. Seulement j’ai une question : je voudrais changer la couleur des texte. Quand j’ouvre le fichier menu.html (avec le logiciel n-vu) je prends l’option de voir la page en html mais je ne vois pas comment changer les couleurs. Quelqu’un sait comment faire svp ? merci d’avance.

    • ptiteagnes

      Même souci... je vois que personne ne répond, et pourtant même problème que vous tous, à savoir : où placer le code manquant, pour que les articles apparaissent dans l’arborescence du menu ?
      Dans quel fichier ? Où ?
      Je débute, merci beaucoup.

    Répondre à ce message

  • ghtv21

    bonsoir, ce menu marche fort bien , comment faire pour faire afficher les branches superieures dans un ordre imposé , autre que l’ordre alphabetique

    Répondre à ce message

  • 5
    Philippe

    Le passage à la version 1.8 a mis à mal cette contribution, sur mon site le menu ne fonctionne plus, argh

    • fred

      Pareil pour moi... Je cherche une solution... Apparemment, y’a une ligne au niveau du déroulement que Spip n’aime pas (j’y connais rien en php)...

    • Bilboid

      Bon, c’est de la grosse bidouille, mais ça fonctionne et c’est stable. Si quelqu’un peut mieux présenter...
      Ca concerne en fait le menu d’EVA-Spip qui est basé sur celui-ci. A vous d’adapter les CSS.

      Voici ma correction du menu pour Spip 1.8

      <div class="sommaire">
<?php
if(floor(phpversion()) < 4)	{
	// La version de PHP est inférieure à 4,
	// la fonction in_array n'existe donc pas
	function in_array($member, $array)
	{
		reset($array);
		while (list($k, $v) = each($array)) {
			if ($v == $member) return true;
		}
		return false;
	}
}

// récupération de la hiérarchie courante
$hierarchie = array();
<BOUCLE_principale(RUBRIQUES){id_rubrique}>
	<BOUCLE_hierarchie(HIERARCHIE){id_rubrique}>
		$hierarchie[] = #ID_RUBRIQUE;
	</BOUCLE_hierarchie>
	$hierarchie[] = #ID_RUBRIQUE;
	$actuelle = #ID_RUBRIQUE;
</BOUCLE_principale>

// inclusion du script de gestion des layers de SPIP
$flag_ecrire = false;
include 'ecrire/inc_layer.php3';
afficher_script_layer();
?>

<ul>
		<li class="<?php echo ($accueil == 1 ? 'on' : 'off'); ?>">
			<img src="img_pack/puce<?php echo ($accueil == 1 ? 'on' : 'off'); ?>.gif" alt="x" />
			<a href="#URL_SITE_SPIP" title="Retour &agrave; l'accueil" class="<?php echo ($accueil == 1 ? 'on' : 'off'); ?>"><:accueil_site:></a>
		</li>
	
<BOUCLE_secteurs(RUBRIQUES){id_parent=0}{par titre}>
	<?php $id = #ID_RUBRIQUE; ?>
	<BOUCLE_nb_rubriques(RUBRIQUES){id_parent}><?php ${'nb'.$id} = #TOTAL_BOUCLE; ?></BOUCLE_nb_rubriques>
			<li class="<?php echo (#ID_SECTEUR == $le_secteur ? 'on' : 'off'); ?>"> 
			<?php if ($nb#ID_RUBRIQUE > 0) {
					if (in_array(#ID_RUBRIQUE, $hierarchie)) {
						echo bouton_block_visible('rub#ID_RUBRIQUE');
					} else {
						echo bouton_block_invisible('rub#ID_RUBRIQUE');
					}
				} else {
					echo '<img src="img_pack/puce'.(#ID_RUBRIQUE == $actuelle ? 'on' : 'off').'.gif" alt="x" /> ';
				} ?><a href="#URL_RUBRIQUE" class="<?php echo (#ID_RUBRIQUE == $actuelle ? 'on' : 'off'); ?>"[ title="(#DESCRIPTIF|supprimer_tags)"]>[(#TITRE|supprimer_numero)]</a> 
			<?php if ($nb#ID_RUBRIQUE > 0) {
					if (in_array(#ID_RUBRIQUE, $hierarchie)) {
						echo debut_block_visible('rub#ID_RUBRIQUE');
					} else {
						echo debut_block_invisible('rub#ID_RUBRIQUE');
					} ?>
			<B_rubriques>

			<ul>
			<BOUCLE_rubriques(RUBRIQUES){id_parent}{par num titre}>
			<?php $id = #ID_RUBRIQUE; ?>
			<BOUCLE_nb_sous_rubriques(RUBRIQUES){id_parent}>
			<?php ${'nb'.$id} = #TOTAL_BOUCLE; ?>
			</BOUCLE_nb_sous_rubriques>
				<li><?php
					if ($nb#ID_RUBRIQUE > 0) {
						if (in_array(#ID_RUBRIQUE, $hierarchie)) {
							echo bouton_block_visible('rub#ID_RUBRIQUE');
						} else {
							echo bouton_block_invisible('rub#ID_RUBRIQUE');
						}
					} else {
						echo '<img src="img_pack/puce'.(#ID_RUBRIQUE == $actuelle ? 'on' : 'off').'.gif" alt="x" /> ';
					}?><a href="#URL_RUBRIQUE" class="<?php echo (#ID_RUBRIQUE == $actuelle ? 'on' : 'off'); ?>"[ title="(#DESCRIPTIF|supprimer_tags)"]>[(#TITRE|supprimer_numero)]</a>

				<?php if ($nb#ID_RUBRIQUE > 0) {
						if (in_array(#ID_RUBRIQUE, $hierarchie)) {
							echo debut_block_visible('rub#ID_RUBRIQUE');
						} else {
							echo debut_block_invisible('rub#ID_RUBRIQUE');
						} ?>
					<BOUCLE_sous_rubriques(BOUCLE_rubriques)>
					</BOUCLE_sous_rubriques>
					<?php echo fin_block('rub#ID_RUBRIQUE'); } ?>
				</li>
			</BOUCLE_rubriques>
			</ul>
			</B_rubriques>
	<?php echo fin_block('rub#ID_RUBRIQUE'); ?> 
	<?php } ?>

	</li>
</BOUCLE_secteurs>
</ul>
</div>

    • Ba, ça ne veux pas fonctionner. Bizarre, de plus il y a également une partie du code pour l’affichage des documents en popup qui ne fonctionne plus sur mon site.
      Rarement une version aura autant créer de petits bugs.
      Faut être sacrément rapide pour accéder au sous-menu dans la partie privée...

    • Bizarrement après un nouvel envoi de la version complète de Spip 1.8 tout est rentré dans l’ordre.

    • Philippe

      En fait le problème était lié à un manque de place chez l’hébergeur (à force d’essayer un tas de choses).

      Finalement j’ai opté pour un menu plus classique.

    Répondre à ce message

  • 3
    yo

    Le menu fonctionne correctement ms lorsque je passe de la page rubrique à la page article, le menu, qui était déplié, se replie entièrement. Je voudrais qu’il reste déplié comme il l’était sur la page rubrique.
    Est-ce que quelqu’un pourrait m’aider si tant est que vous ayez compris quelque chose a mon problème ;).
    Merci

    • s1pike

      j’ai le meme pb, as tu trouvé la solution ??
      Je cherche desperemment mais je trouve po.....
      Merci de me faire signe si tu as une piste

    • jerome

      Pour ceux qui peuvent encre être intéressé par cette contrib :
      Si on veut que le menu ne repli pas lorsque l’on accède à un article, il faut lui passer l’id_rubrique de la rubrique ou l’article se trouve.
      Donc dans rubrique.html :

      Articles:
<BOUCLE_art(articles){id_rubrique}>
<li><a href="#URL_ARTICLE&id_rubrique=#ID_RUBRIQUE">#TITRE</a> </li>
</BOUCLE_art>

    • Effectivement ca marche !

      Mais ce code est à mettre ds article.html et non rubrique.html

    Répondre à ce message

  • Guignol

    Tout d’abord BRAVO et MERCI. Cela fait plaisir que des gens placent leur savoir à la disposition de tous.
    Je vais moi aussi apporter une minuscule contribution. Je suis sous Mac OS version 10.2.8. J’ai essayé les navigateurs suivant :
    Avec Camino 0.8 OK !
    Avec Safari 1.0.3 ok !
    Avec Firefox 1.0 Ok !
    Avec Netscape 7.0 Ok aussi. Voilà finalement cela fonctionne avec tous :-))

    Une petite précision pour les « pas doués » comme moi. Si vous voulez avoir toutes vos puces qui s’affichent au moment de dérouler le menu. Ne vous posez pas de questions ! Le fichier img_pack vous le prenez, avec les 4 images de puces à l’intérieur, et vous le posez à la racine de votre site SPIP chez votre hébergeur avec votre logiciel FTP. Et hop comme sur des roulettes...
    Je précise, car les explications étaient un peu technique du coup je ne savais pas moi même si je devais faire pas faire ??
    Voilà c’est dit...

    Et merci encore

    Répondre à ce message

  • mikael

    un super menu ...
    une petite question cependant :
    comment faut il modifier ce menu pour voir apparaitre les articles...
    il en est question plus bas mais les liens sont morts... snif.

    Répondre à ce message

  • 3
    st123

    Comment faire pour gérer l’ordre des rubriques, afin qu’elle n’apparaissent pas classé par ordre alphabétique, mais dans l’ordre souhaité ?

    Existe il un système de pondération permettant de gérer l’ordre des rubriques ?

    Merci d’avance pour votre aide

    Répondre à ce message

  • 2
    tof

    Tout d’abord, merci et bravo. J’utilise ce menu et je le trouve super.

    Mais un ou 2 petits soucis : je suis passé en spip 1.8 et j’ai mis mes pages en tout CSS (ou presque) et depuis, si le menu s’affiche bien, les sous-rubriques disparaissent (le menu se referme) quand on clique dessus au lieu de rester apparente avec l’icone « actif » .

    De plus, quand on clique sur une rubrique, les sous-rubriques n’apparaissent pas.

    Sans doute un problème de CSS mais je ne vois pas où.
    Voir le site :

    Si le concepteur ou un utilisateur peut éclairer ma lanterne ... merci beaucoup.

    • tof

      Oups, désolé j’ai pas mis l’adresse comme il faut.

    • tof (encore)

      Oups désolé encore !
      L’erreur venait du fait que j’avais viré le id_rubrique après l’appel du fichier menu.

      Désolé pour le bruit inutile

    Répondre à ce message

  • 1
    survivreausida.net

    Comme notre site est en CSS, j’ai remplacé les TABLE avec des UL. Cela donne :

    <style>
.secteuroff { font-weight: bold; }
.rubriqueoff { font-weight: normal; }
.secteuron, .rubriqueon { font-weight: bold; color: #ff9999; }
.secteur, .rubrique { font-weight: bold; color: #ff3333; }
</style>
<?php
if(floor(phpversion()) < 4)	{
	// La version de PHP est infÈrieure ‡ 4,
	// la fonction in_array n'existe donc pas
	function in_array($member, $array)
	{
		reset($array);
		while (list($k, $v) = each($array)) {
			if ($v == $member) return true;
		}
		return false;
	}
}

// rÈcupÈration de la hiÈrarchie courante
$hierarchie = array();
<BOUCLE_principale(RUBRIQUES){id_rubrique}>
	<BOUCLE_hierarchie(HIERARCHIE){id_rubrique}>
		$hierarchie[] = #ID_RUBRIQUE;
	</BOUCLE_hierarchie>
	$hierarchie[] = #ID_RUBRIQUE;
	$actuelle = #ID_RUBRIQUE;
</BOUCLE_principale>

// inclusion du script de gestion des layers de SPIP
$flag_ecrire = false;
include 'ecrire/inc_layer.php3';
afficher_script_layer();
?>
<ul>
<BOUCLE_secteurs(RUBRIQUES){id_parent=0}{par titre}>
	<?php $id = #ID_RUBRIQUE; ?>
	<BOUCLE_nb_rubriques(RUBRIQUES){id_parent}><?php ${'nb'.$id} = #TOTAL_BOUCLE; ?></BOUCLE_nb_rubriques>
<li>
<?php
			if ($nb#ID_RUBRIQUE > 0) {
				if (in_array(#ID_RUBRIQUE, $hierarchie)) {
					echo bouton_block_visible('rub#ID_RUBRIQUE');
				} else {
					echo bouton_block_invisible('rub#ID_RUBRIQUE');
				}
			} else {
				echo '&nbsp;';
			}
			?>
			<a href="#URL_RUBRIQUE" class="secteur<?php echo (#ID_RUBRIQUE == $actuelle ? '' : (in_array(#ID_RUBRIQUE, $hierarchie) ? 'on' : 'off')); ?>" >[(#TITRE|supprimer_numero)]</a>
			<?php
			if ($nb#ID_RUBRIQUE > 0) {
				if (in_array(#ID_RUBRIQUE, $hierarchie)) {
					echo debut_block_visible('rub#ID_RUBRIQUE');
				} else {
					echo debut_block_invisible('rub#ID_RUBRIQUE');
				}
				?>
<ul>
<BOUCLE_rubriques(RUBRIQUES){id_parent}{par titre}>
					<?php $id = #ID_RUBRIQUE; ?>
					<BOUCLE_nb_sous_rubriques(RUBRIQUES){id_parent}><?php ${'nb'.$id} = #TOTAL_BOUCLE; ?></BOUCLE_nb_sous_rubriques>
<li>
<?php
							if ($nb#ID_RUBRIQUE > 0) {
								if (in_array(#ID_RUBRIQUE, $hierarchie)) {
									echo bouton_block_visible('rub#ID_RUBRIQUE');
								} else {
									echo bouton_block_invisible('rub#ID_RUBRIQUE');
								}
							} else {
								echo '<img src="img_pack/puce'.(#ID_RUBRIQUE == $actuelle ? 'on' : 'off').'.gif" />';
							}
							?>
<a href="#URL_RUBRIQUE" class="rubrique<?php echo (#ID_RUBRIQUE == $actuelle ? '' : (in_array(#ID_RUBRIQUE, $hierarchie) ? 'on' : 'off')); ?>" >[(#TITRE|supprimer_numero)]</a>
							<?php
							if ($nb#ID_RUBRIQUE > 0) {
								if (in_array(#ID_RUBRIQUE, $hierarchie)) {
									echo debut_block_visible('rub#ID_RUBRIQUE');
								} else {
									echo debut_block_invisible('rub#ID_RUBRIQUE');
								}
								?>
								<ul><BOUCLE_sous_rubriques(BOUCLE_rubriques)></BOUCLE_sous_rubriques></ul>
								<?php
								echo fin_block('rub#ID_RUBRIQUE');
							}
							?>
</li>
<?php
					echo fin_block('rub#ID_RUBRIQUE');
					?>
				</BOUCLE_rubriques>
</ul>
<?php
			}
			?>
</li>
</BOUCLE_secteurs>
</ul>
    • JeGalère

      Tres bien, merci ! mais ça m’affiche les rubriques et toujours pas les articles...

      1°) pourquoi ?

      2°) quoi modifier ?

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom