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

updated on 2 January 2007

Discussion

15 discussions

  • 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

    Reply to this message

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

    Reply to this message

  • 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?)

    Reply to this message

  • 2

    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

    • 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

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

    Reply to this 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

    Reply to this message

  • 2

    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

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

    Reply to this message

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

    Reply to this message

  • 2

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

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

    Reply to this message

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

    Reply to this message

  • 2

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

    • Envoie moi tes fichiers (menu et css)

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

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

    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