Menu DHTML multi-niveaux

Tester le menu

Avantages
- Afficher le menu avec une arborescence jusqu’à 3 niveaux de profondeur dans cette version. Les adaptations PHP et SPIP à faire sont minimes pour rajouter des niveaux le cas échéant.
- Afficher facilement d’autres éléments de menu en dehors des boucles et y associer des styles ou des évènements différents.

Inconvénients
- Si vous avez de nombreuses rubriques évitez de l’installer sur Free, Lycos et C^ie. Quand la page n’est pas en cache, ces boucles sont (à mon goût) trop violentes pour leurs serveurs surchargés.
- Beaucoup d’options DHTML choisies ou de jeux sur les CSS, c’est risquer de flinguer l’affichage sur certains navigateurs. A manier donc avec parcimonie et tester le plus souvent possible la compatibilité avec les butineurs.

Mise en place

Téléchargez le pack et décompressez le à la racine de votre site.

Normalement, la seule modification obligatoire est la suivante :
menu.html - ligne 110 : « offlineroot » réclame le chemin de votre site sur le disque dur de votre site (utilisez le fichier real.php inclus pour le trouver rapidement)

le pack se compose de 6 fichiers :
fonctions/coolmenu4.js :
le script

fonctions/fill2.gif :
une image de fond exemple pour les calques du menu (inversez le commentaire dans les CSS de menu.html pour la supprimer)

fonctions/fleche_menu.gif :
flèche affichée dans le calque si une sous-rubrique est présente

menu.php3 :
page spip d’appel du squelette

menu.html :
fichier squelette avec les styles et les boucles... le seul à tripoter a priori

real.php :
placé à la racine du FTP, il affichera le chemin physique de votre site (ex : /home/sites/site111/web)

Pour des détails concernant les modifications de styles et les éventuels bugs du script, reportez vous à l’aide en ligne et au forum dédié au CoolMenu 4 sur DHTMLCentral mais aussi au thread d’origine sur la liste de diffusion SPIP.

Compatibilité

Le script du pack fonctionne avec les navigateurs suivants.

* enlever l’image de fond du style level0

Boucles

<?php $top=-1; $sub=-1; $subsub=-1; ?> 
<BOUCLE_menutop(RUBRIQUES){id_parent=0}{par titre}>
<?php $top++; ?>
<script>
oCMenu.makeMenu('top<?php echo $top; ?>', '', '&nbsp;#TITRE', '#URL_RUBRIQUE', '', '', '', '', '', '', '', '', '', '', '', '', '')</script>
  <BOUCLE_menusubrub(RUBRIQUES) {id_parent} {par titre}><?php $sub++; ?>
   <script>oCMenu.makeMenu('sub<?php echo $sub; ?>', 'top<?php echo $top; ?>', '&nbsp;#TITRE', '#URL_RUBRIQUE')</script>
   	<BOUCLE_menusubsub(RUBRIQUES){id_parent}><?php $subsub++; ?>
	<script>oCMenu.makeMenu('subsub<?php echo $subsub; ?>', 'sub<?php echo $sub; ?>', '&nbsp;#TITRE', '#URL_RUBRIQUE', '', 150, 0)</script>
	</BOUCLE_menusubsub>
</BOUCLE_menusubrub>
</BOUCLE_menutop>

La même pour gérer 4 sous-niveaux

On déclare « $subsubsub » en haut et on rajoute la boucle subsubsub à l’intérieur de la boucle subsub. Vous pouvez tout aussi bien appeler des ARTICLES à la place des RUBRIQUES.

<?php $top=-1; $sub=-1; $subsub=-1;$subsubsub=-1; ?> <BOUCLE_menutop(RUBRIQUES){id_parent=0}{par titre}>
<?php $top++; ?>
<script>
oCMenu.makeMenu('top<?php echo $top; ?>', '', '&nbsp;#TITRE', '#URL_RUBRIQUE', '', '', '', '', '', '', '', '', '', '', '', '', '')</script>
  <BOUCLE_menusubrub(RUBRIQUES) {id_parent} {par titre}><?php $sub++; ?>
   <script>oCMenu.makeMenu('sub<?php echo $sub; ?>', 'top<?php echo $top; ?>', '&nbsp;#TITRE', '#URL_RUBRIQUE')</script>
   	<BOUCLE_menusubsub(RUBRIQUES){id_parent}><?php $subsub++; ?>
	<script>oCMenu.makeMenu('subsub<?php echo $subsub; ?>', 'sub<?php echo $sub; ?>', '&nbsp;#TITRE', '#URL_RUBRIQUE', '', 150, 0)</script>
		
		<BOUCLE_menusubsubsub(RUBRIQUES) {id_parent}><?php $subsubsub++; ?>
		<script>oCMenu.makeMenu('subsubsub<?php echo $subsubsub; ?>', 'subsub<?php echo $subsub; ?>', '&nbsp;#TITRE', '#URL_RUBRIQUE', '', 150, 0)</script>
		</BOUCLE_menusubsubsub>
	
	</BOUCLE_menusubsub>
</BOUCLE_menusubrub>
</BOUCLE_menutop>

(name, parent, txt, lnk, targ, w, h, img1, img2, cl, cl2, align, rows, nolink, onclick, onmouseover, onmouseout)

name = nom du calque
parent = nom du calque parent s’il s’agit d’une sous-rubrique
txt = affichage d’un texte à la place du lien dans la barre d’état
lnk = le lien vers la rubrique
targ = _self, _blank, _parent, _top
w = largeur du calque
h = hauteur
img1 = si vous n’utilisez que des images, c’est le chemin vers celle qui s’affichera OnMouseOut
img2 = chemin de l’image à afficher OnMouseOver
cl = nom du style OnMouseOut
cl2 = nom du style OnMouseOver
align = alignement du nom de rubrique dans le calque (left, right, center)
rows = pour décaler une sous-rubrique vers sa colonne parente (1 ou ’’)
nolink = 1 ou ’’ supprime le curseur de lien et son lien
onclick = action javascript supplémentaire « OnClick »
onMouseOver = évènement javascript supplémentaire « OnMouseOver »
onMouseOut = évènement javascript supplémentaire « OnMouseOut »

Bon courage, le jeu en vaut la chandelle.