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

Publié le : 20 octobre 2005 – Dernière modification le 21 décembre 2021 – par skystan – 36 commentaires

1
2
3
4
5
5 votes
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

5 ans 1 an 3 mois Sans limite
par date
Filtrer

15 discussions

  • Dragon

    Bonjour,

    J’utilise le code.. super mais :

    Je n’arrive pas à mettre les rubriques avant les articles.

    En j’ai réussi à inverser pour les boucle de premier niveau mais pas pour les suivants...

    Comment faire ?

    H

    Répondre à ce message

  • voici un menu dépliant sans js http://bormat2.free.fr/

    Répondre à ce message

  • Bernie

    L’environnement que j’ai :
    SPIP 1.9.2c [10268] et utilise le squelette EVA-Web 3.0 Bêta1

    J’ai placé « menu.html » dans le dossier « squelettes » de eva et « menu.php » dans « htdocs »

    Mais je ne sais pas à quel endroit placer l’autre bout de code. (dans « sommaire » ? A quelle ligne ?)

    Répondre à ce message

  • 2
    aire 42

    Super le menu, merci je cherchais ça depuis un bout de temps.

    Je bloque cependant sur quelques points :

    -  coloriser les sous-rubriques de la même couleur que la rubrique sélectionnée
    -  donner un autre style aux sous-rubriques (taille, backgroung-image...)
    -  règler les propriétés des liens en survol (a:hover)

    A cette adresse, dans la colonne de gauche, le menu« tout en SPIP » est en bas( le menu supérieur est factice).

    Malgré des bidouillages sur menu.html et sur le CSS concernant le menu, je suis en panne.

    Merci d’avance pour votre aide

    • aire42

      Précision : le menu du haut est factice MAIS c’est ce que je veux arriver à faire avec le menu « spipien » qui est en bas dans la colonne

      De l’aide SVP

    • aire42

      C’est bon, j’ai eu le résultat obtenu... grâce à l’aide d’une ami développeur (Merci Mr TO.)
      Tout a été fait -bien sûr- en CSS et en SPIP et je l’ai placé et décliné à plusiuers endroits du site (-> voir le fichier HTML pour le code).

      à voir à l’adresse suivante

      Merci encore pour cette contrib.

    Répondre à ce message

  • Très attiré par ce menu proposé, j’ai testé mais j’ai cette erreur ci dessous sans parvenir à la résoudre. Quelqu’un pour m’aider ? Merci bokou ;)

    # Erreur(s) dans le squelette

    * Erreur sur le site, - Fichier menu.php introuvable
    * Erreur sur le site, - Fichier menu.php introuvable
    * Erreur sur le site, - Fichier menu.php introuvable

    Répondre à ce message

  • 2
    fvpat

    Salut

    Je débute sous SPIP et je ne comprends pas le fonctionnement de tout ça. Par contre, je suis très intéressé par un tel morceau de code.
    Toutefois, je ne suis pas tout à fait dans la même configuration. Ce que je souhaiterais, c’est d’afficher uniquement les sous-rubriques correspondant à la rubrique cliquée, sachant qu’il n’y a pas forcément d’articles (ou autres) de publiés dans les sous-rubriques.
    Quelqu’un pourrait m’expliquer un peu plus comment ce menu fonctionne ?
    Merci beaucoup

    • fvpat

      Petite précision, je suis avec spip 1.9.2

    • Salut, tu ne veux faire apparaître que les sous-rubriques de la rubrique en cours ? Dans ce cas, une simple boucle

      <code>
<BOUCLE_sous_rubriques(RUBRIQUES) {id_rubrique} {par num titre, titre}>
<a href="#URL_RUBRIQUE">[(#TITRE)]</a>
</BOUCLE_sous_rubriques>
</code>

      devrait suffir.

    Répondre à ce message

  • spipfactory

    Voila étant sous spip 1.9 ; je penser qu’en modifiant le code de cette maniere le menu aurait fonctionner.

    a tort sans doute

    Ci-joint le code pour faire apparaitre le menu

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

    pouvez vous m’orienter afin de le faire fonctionner avec la derniere version spip.

    Répondre à ce message

  • 2
    matthieu

    Pour simplifier encore plus tout ça, ce qui serait génial serait un critére expose qui permettrais d’afficher depuis n’importequel niveau du site le même menu...

    Aprés avoir essayé cette solution je crois qu’il est plus simple d’utiliser un peu de php. En rajoutant le menu avec un <INCLURE{fond=inc-menuvertical}{id_rubrique}> (ou <INCLURE{fond=inc-menuvertical}{id_article}>). De cette maniére on peu faire un menu qui affiche les bonnes rubrique depuis n’importe quel endroit du site.

    Par exemple :

    <BOUCLE_racine(RUBRIQUES){racine}>
<BOUCLE_menuvertical(RUBRIQUES) {id_parent} >

<?php $on = '[(#EXPOSE|texte_script)]'; 
if ($on){?>

<div class="bottom_menu">

<h4 class="top_menu">[(#TITRE|supprimer_numero)]</h4>
<ul>
<BOUCLE_sousmenuvertical(ARTICLES) {id_rubrique}{doublons exclus}{par num titre}><li>
<a href="#URL_ARTICLE"  class="sub#EXPOSE">[(#TITRE|supprimer_numero)]
</a></li></BOUCLE_sousmenuvertical(>
</ul>

</div>


<?}?>

</BOUCLE_menuvertical>
</BOUCLE_racine>
    • skystan

      Bonjour,

      oui, toute simplification est intéressante, mais pas en insérant du php. Le but est de supprimer le maximum de php de nos squelettes, pour coder en SPIP pure.

      Y’a plus qu’a chercher à faire ça en spip.

      Cordialement

    • matthieu

      Sur le fond tout à fait d’accord avec toi, sauf que mettre plein de boucles pour faire deux lignes de php je trouve ça domage. Jusque là c’est vraiment la solution la plus simple pour un menu qui soit accessible depuis n’importequel profondeur en affichant les bonnes sous rubriques ( par exemple avec un menu horizontal et un menu vertical) en plus ça marche à tout les coups et c’est super facile de maintenance. Je me suis permit de l’écrire parce que ces deux lignes me simplifie la vie à chaque fois. Une autre solution sans php c’est cacher toutes les rubriques qu’on ne veut pas voir avec les css, mais c’est pas trés sémantique, et ça alourdie la page, ça marche à la limite pour un sous sous niveau. L’ideal serait un critére « expose » dans les boucles, mais bon étrangement il existe pas. Récupérer des variables de spip et jouer avec avec php, c’est une super technique dans certain cas !

    Répondre à ce message

  • mumuri

    Je sais pas si çà peut être utile à quelqu’un mais dans mon cas, je voulais n’afficher que certains articles (les articles étant définis manuellement par moi)

    Pour cela, j’ai rajouté un mot clés « _nonaffichee »
    Ensuite, sur les rubriques où je ne désirais pas afficher les articles, j’ai rajouté le mot clés

    Enfin dans le squelette , j’ai mis ceci au début

    <BOUCLE_RubAffichees(RUBRIQUES){titre_mot=_nonaffichee}>
    <BOUCLE_RubAfficheArticle(ARTICLES){id_rubrique}{doublons}></BOUCLE_RubAfficheArticle>
</BOUCLE_RubAffichees>

    puis cela dans la boucle d’affichage des articles

    <BOUCLE_articleb(ARTICLES){id_rubrique}{par num titre}{doublons}{lang}>
     <a href="#URL_ARTICLE" [title="(#DESCRIPTIF|textebrut|entites_html)"]> [(#TITRE|supprimer_numero)]</a>
</BOUCLE_articleb>

    Vous pouvez facilement modifier pour n’afficher que certains articles.

    Répondre à ce message

  • 2
    Birdy

    Bonjour,

    J’ai installé tout comme indiqué et mon problème n’est pas que tout est « déroulé », mais l’inverse, tout reste « enroulé » quelque soit la sélection. Seules les rubriques de la racine apparaissent (après la correction EXPOSE).

    • skystan

      Envoie moi tes fichiers (menu et css)

      Est-tu sur d’avoir des articles publiés ?

    • Birdy

      Problème réglé : j’ai placé le lien INCLURE(menu.php3) id_rubrique dans la page sommaire, mais j’ai laissé INCLURE(menu.php3) dans les pages rubrique et article. C’est tout le contraire qu’il fallait faire...

    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