Menu DHTML multi-niveaux

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

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

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.

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

    Répondre à ce 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

    Répondre à ce 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 !

    Répondre à ce 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 ?

    Répondre à ce 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.

    Répondre à ce 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

    Répondre à ce 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

      @+

    Répondre à ce 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

    Répondre à ce 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

    Répondre à ce message

  • 2
    Thierry

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

    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