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

Aucune discussion

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