Menu dépliant tout en spip (sans php ni javascript)

Un petit menu auto-extensible entièrement SPIPIEN, sans php, java ou autre composante étrangère...
Pour faire un menu « dynamique », il fallait souvent mélanger ses boucles avec un peu de php, un zest de java et beaucoup de doigté.
Voici un menu tout simple qui utilise la balise #EXPOSER et une feuille de style.

Placez le fichier « menu.html » avec vos squelettes

Pour les curieux, voici le code :

[* ! ATTENTION pour l’instant la balise [(#EXPOSER|oui,non)] fonctionne toujours avec SPIP 1.9, mais si avec les futures versions vous avez des problèmes, il faudra la modifier avec [(#EXPOSE{oui,non})] Je vous ai préparé les archives zip avec l’une ou l’autre des balises.*]

                
<div>               
<B_rubriquea>
<ul class="racine">
<BOUCLE_rubriquea(RUBRIQUES){racine}{par num titre}>
<li><a href="#URL_RUBRIQUE" class="lien#EXPOSER" [title="(#DESCRIPTIF|textebrut|entites_html)"]> [(#TITRE|supprimer_numero)]</a></li>
    <div id="[(#EXPOSER|affiche,cache)]">
     <B_articleb> 
                <ul class="article">
        <BOUCLE_articleb(ARTICLES){id_rubrique}{par num titre}>
                <li><a href="#URL_ARTICLE" class="lien#EXPOSER" [title="(#DESCRIPTIF|textebrut|entites_html)"]> [(#TITRE|supprimer_numero)]</a></li>
        </BOUCLE_articleb>       
                </ul>
        </B_articleb>
        
        <B_ss_rubriquea> 
        <ul class="rubrique">
        <BOUCLE_ss_rubriquea(RUBRIQUES){id_parent}{par num titre}>
        <li><a href="#URL_RUBRIQUE" class="lien#EXPOSER" [title="(#DESCRIPTIF|textebrut|entites_html)"]> [(#TITRE|supprimer_numero)]</a></li>
            <div id="[(#EXPOSER|affiche,cache)]">
                <B_articlea> 
                <ul class="article">
                <BOUCLE_articlea(ARTICLES){id_rubrique}{par num titre}>
                <li><a href="#URL_ARTICLE" class="lien#EXPOSER" [title="(#DESCRIPTIF|textebrut|entites_html)"]> [(#TITRE|supprimer_numero)]</a></li>
                </BOUCLE_articlea>       
                </ul>
                </B_articlea>
                
                <BOUCLE_n(boucle_ss_rubriquea)></BOUCLE_n>
             </div>     
        </BOUCLE_ss_rubriquea> 
        </ul>
        </B_ss_rubriquea> 
      </div> 
      
</BOUCLE_rubriquea>  
</ul>
</B_rubriquea>
</div> 

Placez le fichier « menu.php » à la racine de votre répertoire SPIP ou dans votre répertoire dédié aux squelettes (voir la doc spip si vous ne savez pas de quoi je parle).

Ajoutez le code css dans votre feuille de style perso et adaptez le à vos exigences :

/* Style pour le menu spipien*/
#affiche{
visibility:visible;
}
#cache{
display:none;
}
.lien{
color: #FFFFFF ;
text-decoration: none;
}
.lienon{
color: #FFFF00 ;
text-decoration: none;
}
ul.racine{
margin-left:0px;
padding-left:2px;
list-style:none;
}
.article{
margin-left:0px;
padding-left:60px;
list-style-type:square;
}
.rubrique{
margin-left:0px;
padding-left:25px;
list-style-type:circle;
}

enfin, copiez le bout de code suivant à l’emplacement du menu dans vos squelettes :

-  pour SPIP 1.9 :

<BOUCLE_article_menu(ARTICLES){id_article}>
       <INCLURE{fond=menu}{id_rubrique}{id_article}>
       </BOUCLE_article_menu> 
                <BOUCLE_rubrique_menu(RUBRIQUES){id_rubrique}>
                <INCLURE{fond=menu}{id_rubrique}>
                </BOUCLE_rubrique_menu>  
                <INCLURE{fond=menu}>
                <//B_rubrique_menu>
         <//B_article_menu>

-  pour les versions avant SPIP 1.9 :

         <BOUCLE_article_menu(ARTICLES){id_article}>
         <INCLURE(menu.php){id_rubrique}{id_article}>
         </BOUCLE_article_menu> 
                 <BOUCLE_rubrique_menu(RUBRIQUES){id_rubrique}>
                 <INCLURE(menu.php){id_rubrique}>
                 </BOUCLE_rubrique_menu>  
                 <INCLURE(menu.php)>
                 <//B_rubrique_menu>
          <//B_article_menu>

ceci intègrera automatiquement le menu dans vos page avec la coloration du menu.

Le menu
Le menu en action

Si vous ne voulez pas bénéficier de la coloration grâce à la balise #EXPOSER, un simple

<INCLURE(menu.php)>

sufira !!!!

Pour ceux qui sont encore avec des fichiers .php3, il faut renomer les fichiers .php en .php3 et changer le code à intégrer pour celui-ci :

         <BOUCLE_article_menu(ARTICLES){id_article}>
         <INCLURE(menu.php3){id_rubrique}{id_article}>
         </BOUCLE_article_menu> 
                 <BOUCLE_rubrique_menu(RUBRIQUES){id_rubrique}>
                 <INCLURE(menu.php3){id_rubrique}>
                 </BOUCLE_rubrique_menu>  
                 <INCLURE(menu.php3)>
                 <//B_rubrique_menu>
          <//B_article_menu>

Ce menu est en fonction ici (squelette bleu)

Discussion

15 discussions

  • 4

    Bonjour,
    Je voudrais restreindre le menu au secteur actif. Comment faire ?

    Merci

    • Bonjour,

      je pense qu’en remplassant le critère {racine} par {id_secteur} dans la boucle principale cela devrait fonctionner.

      Par contre, il ne sera pas utilisable sur le squelette « sommaire.html », étant donné qu’il n’y a pas de secteur identifié !! Une simple boucle RUBRIQUES pour lister les rubriques pincipales à la racine suffira de toute façon sur cette page.

      Ne connaissant pas la structure de ton site, je ne peux pas faire plus... désolé.

    • Effectivement, ça fonctionne presque en remplaçant racine par id_secteur.
      Il fallait juste rajouter une boucle RUBRIQUE contenant le tout.

      Par contre, j’ai toujours un problème : j’ai une redondance des articles des sous rubriques qui reviennent au niveau 1 :

      o Administratif
      o locaux
      o références
      o équipe
      + Dominique Molard
      + Jacqueline Molard
      + Christian Pupier
      + Edouard Molard
      o Dominique Molard
      o Jacqueline Molard
      o Christian Pupier
      o Edouard Molard

      Est-ce qu’il y a un moyen de supprimer ces doublons ?
      Voici le code actuel que j’ai mis sur le forum

    • Salut,

      en fait, si l’on met comme critère « id_secteur », la boucle liste toute les rubrique du secteur... donc même les sous rubriques.

      change le critère par « id_rubrique=#ID_SECTEUR » et ça fonctionne !

      Stan

    • C’est magique !

      Ca a l’air si simple maintenant....

      Merci !

    Répondre à ce message

  • 2

    Bonjour,

    j’ai installer ton menu avec SPIP 1-8-2-e et ça marche sauf que tout est déplié dés le départ...comment éviter cela ?

    • Bonjour,

      Essais de modifier la balise « exposer » par « expose ». C’est une modification qui devait survenir un jour ou l’autre.

      Tiens nous au courant.

    • Merci beaucoup, ca marche parfaitement bien comme vous pouvez le voire sur le site même.

      Salutations Rainer

    Répondre à ce message

  • 3

    Merci beaucoup pur ce script qui me serait très utile, je viens de remplacer la balise exposer par expose et i l’affiche
    Erreur(s) dans le squelette

    Erreur : filtre « cache » non défini, _rubriquea

    Erreur : filtre « cache » non défini, _ss_rubriquea

    Erreur : filtre « cache » non défini, _rubriquea

    Erreur : filtre « cache » non défini, _ss_rubriquea

    Qu’est-ce qu¡il faut faire
    Salutations
    Rainer

    • Salut,

      tu devrais m’envoyer ton fichier modifier car, apparement, il y a un truc qui cloche.

      De plus, la balise EXPOSER fonctionne toujours, je ne sais pas pour EXPOSE.

      Cordialement

      Stan

    • Oui, la balise exposer focntione, seulement je voulais eviter d’avoir le menu déplié et j’ai donc fait le changement en expose. Je t’envoie mon fichier par email.

      Salutations
      Rainer

    • Salut,

      Bon, après quelques recherche, il faut employer la balise EXPOSE comme ceci : <div class="[(#EXPOSE{affiche,cache})]">

      J’en ai profité pour modifier l’ ID en CLASS pour la norme w3c

      Si le chemin de ta feuille css est bien indiqué, tout fonctionne.

      Cordialement

      Stan

    Répondre à ce message

  • 1

    Bonjour,

    Est-on limité à 2 niveaux de sous rubriques ou l’affichage est il récursif ?

    Répondre à ce message

  • 3

    Super, bravo !
    Y a t-il un moyen de déplier l’arboresce par défaut ?

    • oui, il suffit de changer ça :

      #cache{
      display:none;
      }

      en ça :

      #cache{
      visibility:visible;
      }

      sinon, tu réécris tous les <div id="[(#EXPOSER|affiche,cache)]">
      en <div id="affiche">

      en fait, dans les deux cas on suprime la fonction css qui cache l’arboescence en temp normal

    • Salut ! j’aurais besoin d’aide je capte pas bien il suffit de recopier ce code source ?? on change quoi aprés ?

    • Il faut simplement changer les « bout de code ».

    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