Menu DHTML multi-niveaux

All contributions published for previous SPIP versions

Ce menu provient de DHTMLCentral. Il vous permet de rendre constamment accessible toutes les rubriques de votre site. Son utilisation est gratuite à condition de laisser le copyright. Les boucles mélangeant PHP et SPIP sont d’Arnaud et les costumes de Donald Kardwell. ;)
demo
demo

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 Cie. 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.

  Windows Mac Linux
Internet Explorer 6 Oui ? ---
Internet Explorer 5.x Oui Oui ---
Mozilla 1.x Oui Oui ?
Phoenix 0.5 Non --- ?
Netscape 6 >7 Oui Oui ?
Netscape 4.7 Oui* ? ?
Opera 7 Oui --- ---
Opera 6 Oui Non ?
Opera 5 ? ? ?
Konqueror --- --- ?
Apple safari (beta 2) --- Non ---

* 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>
Memento des fonctions disponibles dans
l’appel d’un niveau de menu


(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.

updated on 3 August 2005

Discussion

31 discussions

  • Bonjour à tous,

    Je suis un newbie dans Spip et pas loin de devenir fou.....
    Quelqu’un peut-il m’indiquer comment intégrer ce menu DHTML dans un squelette comme SANDNYKO....
    J’ai vraiment tout essayé (d’habitude je fini pas tomber sur la solution par hasard mais là.... rien à faire et cela fait trois jours)

    Ma version SPIP = 1.8.3 PHP3

    Ce que je ne comprends pas c’est que ma page left.html contenant le menu affiche le menu lorsque je l’ouvre en dehors de SPIP... Mais quand left.html est appellée par SPIP, rien n’apparait.

    J’ai mis mon code disponible ici :
    http://www.editions-lugert.fr/left.html

    Merci

    Reply to this message

  • 2

    Bonjour,
    Merci pour ce menu, il corresond à ce que je cherchais. Néanmoins, j’ai un petit pb :
    le menu n’est pas au 1° plan enfin pas partout :
    J’utilise des inclure pour l’entête, et pour le menu. Là, le menu est au premier plan (par dessus l’entête), mais il passe au seond plan par rapport aux objets de la page, ce qui d’une part n’est pas esthétique et surtout m’empèche d’utiliser les sous-menus.
    Les blocs en dessous sont tout en CSS.
    Y a t’il une propriété à modifier pour le menu ou pour mes blocs?...
    Merci d’avance

    • malgrès mes recherches, je rencontre le même problème.
      Si quelqu’un avez une solution merci d’avance.
      stéph

    • je viens de trouver la solution:
      le problème réside dans l’ordre d’appelle des div.
      si ton menu est appelé avant ton contenu, il va apparaitre en dessous.
      donc il faut impérativement appeler ton div contenu et ensuite ton div menu.
      Si ton fichier CSS est bien fait, tu n’aura aucun problème.
      Stéph

    Reply to this message

  • 1
    vincseize

    tout d’abord bravo l auteur ...

    pour le positionnement (car pour des raisons de squelette particulier, et pour eviter qu il pousse le contenu des autres div de la page), j’ai trouver cette solution:

    <?php include('menu.php3'?>

    ce qui permet de le poser ou on le souhaite ...

    explication:
    1- le style div n’importe peu en fait , car la config du menu est prioritaire ( pour des raisons que j ignore il faut tout de même definir un style à ce div , essayer de mettre une couleur de fond, et vous comprendrez)

    2- il ne vous reste plus qu’à positionner dans menu.html, la position du dit-menu !

    • vincseize

      <[debut] div class="new_menu" style="position:absolute; left:00px; top:155px; width:741px; height:23px; z-index:1;"> ici votre INCLUSION de menu.html <[fin] div >

      note: notation < de début et > de fin spécial , mais ce bout de code n’ai pas accepté dans ce formulaire sinon !

    Reply to this message

  • Bonjour,

    Est-il possible sous spip d’installer un menu en flash avec un fichier xml qui en modifie le contenu . Ou plus simplement est-il possible d’affichier du flash sur uen page spip ?

    Reply to this message

  • Laurent

    Bonjour,

    Ce menu est très utile mais j’ai un gros problème d’affichage avec Internet Explorer 6 : les menus des niveaux inférieurs sont transparents ! Ca n’est pas qu’un problème esthétique, on ne peut pas cliquer sur les entrées du menu si un lien se trouve “dessous”. Tout fonctionne avec Mozilla. Est-ce un problème connu ?
    Merci.

    Reply to this message

  • 1

    Bonjour ,

    voila vous allez trouver surement cette question bete mais apres avoir installer le menu j’ai voulu modifier

    la couleur des boites du lvl 0 et rien ne se produit j’ai recalculé la page bien sur mais rien ni fait...

    et j’avoue que la couleur rouge et jaune c pas top.

    merci d’avance pour votre aide :)

    • Bon finalement je ne devais pas avoir les yeux bien en face des trous car la solution etait devant moi

    Reply to this message

  • 1
    Christophe

    Bravo tout d’abord pour ce menu qui ne convient très bien pour mon utilisation.
    J’ai commencé à régler quelques détails (couleur, taille police, etc), malheuresement, je n’arrive pas à trouver la variable pour que le texte remplisse entierement l’espace du bouton dans le niveau 0. A l’origine dans le script il y a un petit décalage à droite et à gauche. Comment le supprimer?
    Merci pour votre aide

    • Hello,

      Pour la gauche, tu as un espace insécable (&nbsp;) à côté de #TITRE dans les boucles. Pour la droite...???

      Dans les styles tu peux aussi effacer “padding:1px;” mais le gain est négligeable.

      Bon courage

      @+

    Reply to this message

  • 1

    C’est vrai c’est bien ! Mais, parce qu’il y a un mais, il n’est pas possible de mixer articles et sous-rubriques ou du moins je n’y arrive pas. J’ai dans certaines de mes rubriques les 2 et je voudrais que les 2 s’affichent. Je n’ai pas trouvé de solutions dans la documentation spip.

    Si quelqu’un a réussi ce tour de force, je suis preneur ;-)

    Alex

    • Bon j’ai trouvé une solution tirée par les cheveux mais si quelqu’un a mieux je suis toujours preneur. Alors la solution tirée par les cheveux :

      -  Modifier la boucle sous-rubriques pour afficher les titres des articles :

      BOUCLE_menusrub (ARTICLES) {id_rubrique} {par_titre}

      -  Dans la console spip : dans vos rubriques créez des articles avec rien dedans si ce n’est le titre où vous indiquez simplement le titre de votre sous-rubrique, puis validez. Enfin créez une redirection vers la sous rubrique.

      En fait le principe c’est de créer un article virtuel pour chaque sous-rubrique.

      Alex

    Reply to this message

  • J’ai installé ce script sur notre site infogm mais il reste difficile à régler et puis j’ai trouvé sur le site d’Alsacréation un script pour menus déroulant en XHTML et CSS que je viens d’adapter à SPIP.
    Il reste encore un peu de travail à faire mais vous pouvez aller voir la contrib spip proposée à la publication pour voir comment cela marche et contribuer à finaliser la contrib si vous le souhaitez.

    Thierry

    Reply to this message

  • 2

    Cool le menu mais question complémentaire : je ne vois pas de paramétre pour modifier le positionnement global du menu. Ici le positionnement est vertical.
    Peut-on simplement modifier le code pour obtenir un positionnement horizontal des menus ?
    Peut-être que quelqu’un s’est déjà penché sur la question ?

    Merci de vos lumières.

    Thierry

    • Kangourou

      Bonjour,

      La soluce est effectivement prévue en paramètre :

      -  oCMenu.rows=1 au lieu de 0 pour placer à l’horizontale

      et

      -  oCMenu.level[0].align=“bottom” pour commander l’ouverture des sous-rubriques vers le bas.

      @+

    • peut-on poursuivre sur cette voie de menu horizontal en remplaçant le titre de chaque rubrique-racine (ou secteur) par son logo... pour enchaîner sur les sous-rubriques en texte...

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom