Menu « dépliant » comme dans l’administration de SPIP

Un menu dépliant obtenu en adaptant le layer.js utilisé pour l’admin de spip.

C’est un article de plus proposant un menu « dépliant ».
L’intérêt ici est sa facilité de mise en oeuvre.
Tous les fichiers seront à déposer dans le dossier squelette, les images dans le dossier images, le javascript dans un dossier js créé pour l’occasion s’il n’existe pas et évidemment le menu correspondant dans le dossier squelettte.

-  Adaptation du layer.js : il s’agit juste de remplacer le nom des images choisies pour les flèches. Personnellement, j’ai choisi : deplierhaut.png, deplierbas.png, deplierhaut_rtl.png. Le fichier est renommé en deplier.js et placé dans : #DOSSIER_SQUELETTE/js (#DOSSIER_SQUELETTE correspondant au dossier où vous avez déposé votre squelette pour spip 1.8.3)

-  Appel du script entre les balises <head> et </head> :

<script language="javascript" type="text/javascript" src="#DOSSIER_SQUELETTE/js/deplier.js"></script>

-  Ecriture des boucles spip :

<BOUCLE_rub(RUBRIQUES) {racine} {par titre}>
<a href="javascript:swap_couche('#ID_RUBRIQUE','','#DOSSIER_SQUELETTE/images/',0)" title="Cliquer pour déplier">
<img name="triangle#ID_RUBRIQUE" src="#DOSSIER_SQUELETTE/images/deplierhaut.png" border="0" alt="f1" /></a>
<a href="#URL_RUBRIQUE">#TITRE</a>
<script language="javascript" type="text/javascript">
	<!--
	vis['#ID_RUBRIQUE'] = 'hide';
	//-->
	</script>
<B_sous_rubriques>
<div id='Layer#ID_RUBRIQUE' style='display: none; margin-top: 1;'>
<ul>
	<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
	<li>
	<a href="#URL_RUBRIQUE">#TITRE</a>
	</li>
	</BOUCLE_sous_rubriques>
</ul>
</div>
</B_sous_rubriques>
</BOUCLE_rub>

On obtient alors un menu qui se déplie à la façon de l’admin de spip.
Evidemment, on peut améliorer les choses mais le but était que cela soit simple à mettre en oeuvre.

Le code spip se trouve dans le fichier menu et vous pouvez adapter les flèches deplierbas.png et deplierhaut.png à votre guise (les images données sont blanches et sur fond transparent, cela passe bien sous Firefox mais moins bien sous IE).

Discussion

8 discussions

  • Bravo pour ce menu !

    En l’état quand on est sur une rubrique, le menu n’est pas déplié, il faut cliquer sur le menu pour déplier.
    Comment pourrait-on faire pour que le menu soit automatiquement déplié sur la rubrique où on se trouve ?

    Merci pour tout.

    Bonne journée,
    Olivier

    Répondre à ce message

  • ploufplouf1

    Très bien ce petit menu simple à mettre en place et facilement personnalisable.

    Petite question toutefois car pour ce qui est du js j’y connait pas grand chose.

    Est-il possible de refermer les sous-rubriques lorsqu’on clique sur une autre rubrique histoire de ne pas avoir tout déplier tout le temps mais juste la rubrique explorée ?

    Si oui merci de me dire comment je peux faire et que dois je modifier.

    Répondre à ce message

  • 9

    Bonjour,

    Tout d’abord bien sur bravo pour cette réalisation. Le menu fonctionne parfaitement bien dans l’état actuel sans problème pour le paramétrer et modifier son style. Donc Chapeau !

    J’aimerais savoir si quelqu’un a trouvé l’astuce pour que : lorsque l’on se trouve dans un article, le menu reste déplié avec les autres articles de la meme sous-rubrique. Pour le moment je déplie tout a savoir que qaund une autre rubrique comoprte des articles, il sont visible également. Hors je ne voudrais que les autres article de la même sous-rubrique.

    Quelqu’un a-t-il une idée ? D’avance merci

    François

    • Voila cela ce qui fonctionne chez moi en espérant n’induire personne en erreur.
      Alors pour faire fonctionner ce script avec les balises #EXPOSE qui permettent d’afficher les articles ou rubriques courantes (affichés) il faut :

      {<!--D'abord on stock les données à ne pas afficher avec le script-->}
       <B_articleb>
      			<div class="[(#EXPOSE{affiche,cache})]"> 
      			 	
      			 	<BOUCLE_articleb(ARTICLES) {id_rubrique}{par num titre}>
      				</BOUCLE_articleb>
      				
      			</div>
      
      {<!--puis on les exlus à l'aide de la fonction "doublons només" les données à ne pas afficher avec le script-->}		 
      			 <B_articleD> 
      			 <div id='Layer#ID_RUBRIQUE'  class="[(#EXPOSE{affiche,cache})]">
      			 <ul class="soussousmenu">
      			 <BOUCLE_articleD(ARTICLES){id_rubrique}{par num titre}{lang}{doublons articlesb} >
      			 <li class="soussous#EXPOSER"><a href="#URL_ARTICLE"class="soussous#EXPOSER" >[(#TITRE|supprimer_numero)]
      
      			</a></li>
      			</BOUCLE_articleD>       
      			</ul>
      			</div>
      			</B_articleD> 
      			
      		</B_articleb>

      puis on intégre ces CSS à la feuille de styles de son site :

      .affiche{visibility:visible;}
      .cache{display:none;}

      Voilou. TRÉS TRÉS GRAND Merci farandole pour ce script et ce javascript formidable ! Et vive spip

    • Très sympa ce petit supplément et merci pour les encouragements, cela fait toujours plaisir ! :-)

    • C’est normal lorsque l’on apporte quelque bienfaits à la communauté.!

      Toute fois je reprends la plume pour lever un petit soucis que je rencontre avec le script, peut être pourrez vous m’aider ?

      1 ) Il fonctionne super, mais il me faut cliquer deux fois pour accéder au lien (un clique de valide et un deuxième qui actionne le swap. N’utilisant pas l’image (flèche du script) je me dit que cela vient de là. Esct-ce exacte et si, zuriez-vous une soluce pour modifier cela (à mon niveau le javascrit et lisible pour moi mais de la à le modifier :^)

      2 ) Un bug arrive losque j’imbrique le code pour le menu. je pige pas voici le code : (en fait root>sourub>sousourub>aricle est ok mais root>sousrub>article ne reconnais pas exposé avant le quatrième bouton ?)/
      Voici le code : si vous avez une suggestion je suis preneur, avis aux âmes charitables !

      <script language="javascript" type="text/javascript" src="#CHEMIN{js/deplier.js}"></script>
      <div id="navigation">
      
      <BOUCLE_rubbase(RUBRIQUES) {id_rubrique=1} ><!---On commence par appeler la rubrique qui contient les rubriques qui définiront la navigation que nous souhaitons-->
      
      
      
      
              <B_rub>
              <BOUCLE_rubr(RUBRIQUES) {id_parent}></BOUCLE_rubr>
              
              
              <ul class="menu">
              <BOUCLE_rub(RUBRIQUES) {id_parent} {par num titre}><!--puis les sous rubrique-->
                      <li class="item#EXPOSER"><a href="javascript:swap_couche('#ID_RUBRIQUE','','#CHEMIN{images/}',0)" class="item#EXPOSER" [title="(#DESCRIPTIF|textebrut|entites_html)"]>
                      <span class="flotement">[(#TITRE|supprimer_numero|couper{35})]</span>#LOGO_RUBRIQUE</a>
                      
                      
                      </li>
                      
                      <B_articlec>                  
                               <BOUCLE_articleb(ARTICLES){id_rubrique}>
                              </BOUCLE_articleb>
                                      
                              <div id='Layer#ID_RUBRIQUE'  class="[(#EXPOSE{affiche,cache})]">
                               <ul class="soussousmenu">
                               <BOUCLE_articlec(ARTICLES){id_rubrique}{par num titre}{lang}{doublons articleb} >
                               <li>
                                      <a href="#URL_ARTICLE" class="soussous#EXPOSER" title="[(#DESCRIPTIF|textebrut|entites_html)]"> [(#TITRE|supprimer_numero)]</a>
                                      </li>
                              </BOUCLE_articlec>       
                              </ul>
                              </div>
                      </B_articlec> 
                              
                      
                      
                      <B_sous_rubriques>
                      
                      <BOUCLE_sous_rubriqueb(RUBRIQUES) {id_parent}></BOUCLE_sous_rubriqueb>
                      
                      
                      <div id='Layer#ID_RUBRIQUE'  class="[(#EXPOSE{affiche,cache})]">
                      <ul class="sousmenu">
                      <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent}{doublons sous_rubriqueb}><!---là c'est au tours de la sous-sousrubriques-->
                      <li class="sousnav#EXPOSER">
                              <a href="javascript:swap_couche('#ID_RUBRIQUE','','#CHEMIN{images/}',0)" class="sousnav#EXPOSER" [title="(#DESCRIPTIF|textebrut|entites_html)"]>
                              [(#TITRE|supprimer_numero)]
                              </a>
                              <script language="javascript" type="text/javascript">
                              
                              </script>
                      </li>
                      
                               <B_article>
                               <BOUCLE_articler(ARTICLES) {id_rubrique}>
                                      </BOUCLE_articler>
                                      
                               <div id='Layer#ID_RUBRIQUE'  class="[(#EXPOSE{affiche,cache})]">
                                       <ul class="soussousmenu">
                                      <BOUCLE_article(ARTICLES) {id_rubrique} {par num titre}{lang}{doublons articler}>
                                      <li>
                                      <a href="#URL_ARTICLE" class="soussous#EXPOSER" title="[(#DESCRIPTIF|textebrut|entites_html)]"> [(#TITRE|supprimer_numero)]</a>
                                      </li>
                                      </BOUCLE_article>
                                      </ul>
                               </div>
                               </B_article>
                      
                      
                      </BOUCLE_sous_rubriques>
                      
                      
                      </ul> <!--fin de sousmenu-->
                      </div>
                      </B_sous_rubriques>
                      
               </BOUCLE_rub>
      
      </ul><!--fin de menu-->
      
      </B_rub>
      </BOUCLE_rubbase>
      
      </div>
    • Bonjour
      Je ne vois pas où est passé le code suivant :

      <script language="javascript" type="text/javascript">
      <!--
      vis['#ID_RUBRIQUE'] = 'hide';
      //-->
      </script>
    • Bien en fait je l’ai supprimer juste avant l’envois et apparamment cela fonctionne de la même façon.

    • Ok, je l’ai remis partout (dans chaque boucles) et il ne faut plus cliquer qu’une seul fois !

      Merci de votre réponse ! ;)

      Auriez-vous une suggestion concernant la non reconnaissance de #expose pour les trois première occurences appelées par les boucles rub-> articlec ?

    • Pour répondre, il me faudrait un exemple (un lien ou une copie d’écran) car j’ai du mal à bien localiser le problème. :-\

    • J’ai trouvé !
      C’est spip et la gestion de la BD en multilingues !

      Je m’explique :

      J’ai commencé un site en plusieurs langues. Celui-ci était en français par défault. J’ai commencé à remplir les articles...en plusieurs langues. (utilisation de d’un répertoire et de la balise multi et de la gestion de la traduction des langues sur les articles site)

      Puis il a fallut changer la langue par défault. Et c’est la que cela coince.... au nivau de la bd.

      Les articles par défault en français et rédigés en français sont passés automatiquement en anglais (nouvelles langue par défault) mais étaient toujours « physiquement » rédigés en français.
      J’ai donc benoitement changer manuellement les langues des articles par le menu langues et traductions de chaque articles.

      Le site lui fonctionnai trés bien, les traductions s’affichaient parfaitement , mais le balise#expose elle ne fonctionnai plus correctement avec ces articles et rubriques rédigées avant le changement de langue et ce malgré le travail de redéfinition des langue que j’avais effectué sur chaque article ! Mais je n’ai compris cela qu’à l’instant en confrontant les dates des articles et rubriques fonctionnantes avec celles défficientes

      Voilà, j’ai peut-être redécouvert l’eau chaude, mais je ne savais pas cela. (vais m’faire une tisanne pour fêter ça m’suis tellement aggassé sur ce truc...)

      Voilà !

      Pardon pour ces diférents posts mais je perdais mon latin, le changement de langue correspondant en date avec la mise en place du script, j’ai bêtement pensé qu’il pouvai y avoir une correlation.

      MILLE MERCI encore pour vos réponses et contribution.

      Et vive spip mais gaffe à #expose si vous changez de langue en cour de construction !

    • la facon la plus courte est d’appeler swap_couche à l’ouverture de la page, donc dans la balise <body>. je recupere l’id_rubrique à partir de l’article courant (je fait une petite boucle). Ainsi, seul le « layer » correspondant à la rubrique de l’article sera déplié. Il convient de numéroter les « layer » avec les numéros de rubrique correspondant.
      je modifie <body> de la sorte et c’est tout :

      <body onload="javascript:swap_couche('<BOUCLE_article_rub(ARTICLES){id_article}>
      #ID_RUBRIQUE</BOUCLE_article_rub>','','#DOSSIER_SQUELETTE/',0)">

      Et merci à l’auteur des menus dépliants !

    Répondre à ce message

  • 7

    Script sympas et facile à mettre en place. Est-ce possible d’afficher les articles aussi ?
    Ca serait bien aussi d’indiquer comment le paramétrer pour n’afficher la hierarchie qu’a partir du premier niveau (si chaque section est une langue) voir deuxième. Autrement bravo ! ;)

    • Je voudrais savoir ce que tu entends par « afficher les articles aussi ».

    • euhh que le menu affiche aussi les articles contenus dans les rubriques et pas que les rubriques ;) bon pas eu le temps de regarder, ca doit pas être sorcier, mais pratique pour ceux qui ne s’y connaissent pas trop.

    • Oui moi j’attend ça afficher les titres des articles aussi.

    • Voilà les boucles (cela fonctionne chez moi en local Spip 1.9, Easy Php 1.6) :

      <script language="javascript" type="text/javascript" src="#CHEMIN{js/deplier.js}"></script>
      <BOUCLE_rub(RUBRIQUES) {racine} {par titre}>
      <h3><a href="javascript:swap_couche('#ID_RUBRIQUE','','#CHEMIN{images/}',0)" title="Cliquer pour déplier">
      <img name="triangle#ID_RUBRIQUE" src="#CHEMIN{images/deplierhaut.png}" border="0" alt="Clic" /></a>
      <a href="#URL_RUBRIQUE">#TITRE</a></h3>
      <script language="javascript" type="text/javascript">
      <!--
      vis['#ID_RUBRIQUE'] = 'hide';
      //-->
      </script>
      	<B_sous_rubriques>
      	<div id='Layer#ID_RUBRIQUE' style='display: none; margin-top: 1;'>
      	 <ul>
      	<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
      	<li>
      	<a href="javascript:swap_couche('#ID_RUBRIQUE','','#CHEMIN{images/}',0)" title="Cliquer pour déplier">
      	<img name="triangle#ID_RUBRIQUE" src="#CHEMIN{images/deplierhaut.png}" border="0" alt="Clic" /></a>
      	<a href="#URL_RUBRIQUE" [title="Dernière modification le (#DATE|affdate)"]>#TITRE</a>
      	<script language="javascript" type="text/javascript">
      	<!--
      	vis['#ID_RUBRIQUE'] = 'hide';
      	//-->
      	</script>
      	</li>
      		 <B_article>
      		 <div id='Layer#ID_RUBRIQUE' style='display: none; margin-top: 1;'>
      		 <ul>
      		 <BOUCLE_article(ARTICLES) {id_rubrique}>
      		 <li>
      		 <a href="#URL_ARTICLE" [title="Dernière modification le (#DATE|affdate)"]>#TITRE</a>
      		 </li>
      		 </BOUCLE_article>
      		 </ul>
      		 </div>
      		 </B_article>
      	</BOUCLE_sous_rubriques>
      	</ul>
      	</div>
      	</B_sous_rubriques>
      </BOUCLE_rub>

      La mise en forme pourra être améliorée (surtout avec les listes ul) !!

    • Merci pour cette contribution qui convient à mon projet, mais il me manque quelques éléments pour répondre à 100% à mon cahier des charges.
      Comment afficher l’arborecence compléte d’une rubrique secteur ( sous rubriques & articles ) ????
      En effet je souhaite inclure ce menu depliant dans les pages rubriques et non sur la page sommaire. Je voudrais que le menu dépliant permette de faire apparaitre l’arborecence de la rubrique secteur comme dans la partie espace privée « tout le site » deplier - replier.
      Comment faire ???? merci

    • Bonjour
      Je pense qu’il faut simplement modifier les boucles Rubriques et Articles (ne pas mettre seulement le titre) pour obtenir le résultat voulu (si j’ai bien compris ce qui est recherché).

    • Merci de répondre, mais j’ai du mal à saisir votre réponse.
      Voci mon objectif : Je voudrais que le menu dépliant permette de faire
      apparaitre l’arborecence de la rubrique secteur comme dans la partie espace privée « tout le site » deplier - replier.
      Merci encore de votre coopération.
      Quel est est votre proposition ????

      Voici ci joint mon code :



      Clic per desplegar

      (#TITRE

      <script language="javascript" type="text/javascript">
      <!--
      vis['#ID_RUBRIQUE'] = 'hide';
      //-->
      </script>




      Clic per desplegar

      title="Darrièra modificacion lo (#DATE>(#TITRE

      <script language="javascript" type="text/javascript">
      <!--
      vis['#ID_RUBRIQUE'] = 'hide';
      //-->
      </script>



    Répondre à ce message

  • 9

    bonsoir à toutes et tous,
    y aurait-il l’un ou l’autre lien où l’on pourrait voir la chose en action ?

    D’avance merci.

    Wini dit le curieux

    • hello :)

      je salive de découvrir l’exemple mais en cliquant sur le lien décrit plus haut je tombe sur ce site :
      http://physiquark.free.fr/
      et je ne vois aucun menu déroulant....
      d’autre part l’installation « facile » sur spip 1.9 ne marche pas (chez moi).
      bon en attente de retour...

    • Ce n’est pas un menu déroulant mais dépliant (nuance), il faut cliquer sur la flèche horizontale. Si des sous-menus existent, ça se déplie (par exemple dans le cas du forum) et une flèche verticale apparaît avec les sous-rubriques en dessous. Le fonctionnement comme je l’ai précisé dans la contrib est basique et peut être largement améliorée. D’autre part, avec spip 1.9 en local (chez moi) cela fonctionne. Attention, avec Spip 1.9, ce n’est plus #DOSSIER_SQUELETTE mais #CHEMIN. Il faut donc modifier la contrib en conséquence. En tout cas, désolé si cela ne convient pas...

    • Voilà ce que j’ai mis en local avec Spip 1.9

      <div class="liste">
      <script language="javascript" type="text/javascript" src="#CHEMIN{js/deplier.js}"></script>
      <BOUCLE_rub(RUBRIQUES) {racine} {par titre}>
      <h3><a href="javascript:swap_couche('#ID_RUBRIQUE','','#CHEMIN{images/}',0)" title="Cliquer pour déplier">
      	<img name="triangle#ID_RUBRIQUE" src="#CHEMIN{images/deplierhaut.png}" border="0" alt="f1" /></a>
      	<a href="#URL_RUBRIQUE">#TITRE</a></h3>
      <script language="javascript" type="text/javascript">
      <!--
      vis['#ID_RUBRIQUE'] = 'hide';
      //-->
      </script>
      <B_sous_rubriques>
      <div id='Layer#ID_RUBRIQUE' style='display: none; margin-top: 1;'>
      <ul>
      	<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
      	<li>
      	<a href="#URL_RUBRIQUE" [title="Dernière modification le (#DATE|affdate)"]>#TITRE</a>
      	</li>
      	</BOUCLE_sous_rubriques>
      </ul>
      </div>
      </B_sous_rubriques>
      </BOUCLE_rub>
      </div>
    • hello,
      faut surtout pas être désolé quand on fournit un travail pour la communauté.
      donc merci pour ce menu.
      moi je suis débutant alors je ne me permet que d’essayé d’appliquer chez moi ce qu’on fait les autres... et déjà je galère.
      pour ce qui est de ton menu il est classe mais le seul bémol c’est que le visiteur lambda n’a pas l’idée d’aller cliquer... il vaut mieux selon moi que le menu se déroule quand la souris passe sur le titre de la rubrique.
      mais bon, bonne continuation, et merci pour ta réactivité.

    • Bonjour à vous tous j’ai installer ce script cela marche bien sauf que je dois cliquer 2 fois pour que les sous-rubriques s’affiches.
      Ensuite par contre il n’y a plus besoin de cliquer 2 fois c’est seulement lorsque l’on arrive sur la page.
      Quelqu’un sait-il le pourquoi ?

      voici mon code

      <:accueil_site :>

      f1 #TITRE

      <script language="javascript" type="text/javascript" src="#DOSSIER_SQUELETTE/js/deplier.js">
      <!--
      vis['#ID_RUBRIQUE'] = 'hide'; //-->
      </script>
    • J’attends de voir le code !

    • ca ne marche pas dans ie j’ai une erreur javascript ! ca marche tres bien sous firefox ?

    • Je l’ai testé en Spip 1.9 en local, sur le site en Spip 1.8.3, cela fonctionne parfaitement sous IE et sous Firefox. Est-ce que le fichier js est bien dans le bon dossier (dossier squelette dans un répertoire nommé js) ??

    Répondre à ce message

  • Moi perso je préfère ce menu
    http://www.usdcgt29.com/

    il est rédigé ainsi :

    <?php
    if(floor(phpversion()) < 4)    {
        
    // La version de PHP est inférieure à 4,
        // la fonction in_array n'existe donc pas
        
    function in_array($member$array)
        {
            
    reset($array);
            while (list(
    $k$v) = each($array)) {
                if (
    $v == $member) return true;
            }
            return 
    false;
        }
    }

    // récupération de la hiérarchie courante
    $hierarchie = array();
    <
    BOUCLE_principale(RUBRIQUES){id_rubrique}>
        <
    BOUCLE_hierarchie(HIERARCHIE){id_rubrique=1|2|3}>
            
    $hierarchie[] = #ID_RUBRIQUE;
        
    </BOUCLE_hierarchie>
        
    $hierarchie[] = #ID_RUBRIQUE;
        
    $actuelle #ID_RUBRIQUE;
    </BOUCLE_principale>

    // inclusion du script de gestion des layers de SPIP
    $flag_ecrire false;
    include 
    'ecrire/inc_layer.php3';
    afficher_script_layer();
    ?>

    <?php $id #ID_RUBRIQUE; ?> <?php ${'nb'.$id} = #TOTAL_BOUCLE; ?>
    <?php
                
    if ($nb#ID_RUBRIQUE > 0) {
                    
    if (in_array(#ID_RUBRIQUE, $hierarchie)) {
                        
    echo bouton_block_visible('rub#ID_RUBRIQUE');
                    } else {
                        echo 
    bouton_block_invisible('rub#ID_RUBRIQUE');
                    }
                } else {
                    echo 
    '&nbsp;';
                }
                
    ?>
    span>?> " >(#TITRE <?php
                
    if ($nb#ID_RUBRIQUE > 0) {
                    
    if (in_array(#ID_RUBRIQUE, $hierarchie)) {
                        
    echo debut_block_visible('rub#ID_RUBRIQUE');
                    } else {
                        echo 
    debut_block_invisible('rub#ID_RUBRIQUE');
                    }
                    
    ?>
    <?php $id #ID_RUBRIQUE; ?> <?php ${'nb'.$id} = #TOTAL_BOUCLE; ?>

    <?php
                        
    echo fin_block('rub#ID_RUBRIQUE');
                        
    ?>

    <?php
                                
    if ($nb#ID_RUBRIQUE > 0) {
                                    
    if (in_array(#ID_RUBRIQUE, $hierarchie)) {
                                        
    echo bouton_block_visible('rub#ID_RUBRIQUE');
                                    } else {
                                        echo 
    bouton_block_invisible('rub#ID_RUBRIQUE');
                                    }
                                } else {
                                    echo 
    '<img src="img_pack/puce'.(#ID_RUBRIQUE == $actuelle ? 'on' : 'off').'.gif" />';
                                
    }
                                
    ?>
    span>?> " >(#TITRE <?php
                                
    if ($nb#ID_RUBRIQUE > 0) {
                                    
    if (in_array(#ID_RUBRIQUE, $hierarchie)) {
                                        
    echo debut_block_visible('rub#ID_RUBRIQUE');
                                    } else {
                                        echo 
    debut_block_invisible('rub#ID_RUBRIQUE');
                                    }
                                    
    ?>

    <?php
                                    
    echo fin_block('rub#ID_RUBRIQUE');
                                }
                                
    ?>

    <?php
                
    }
                
    ?>

    Il fonctionne avec un include... Je me pose tout de même la question de comment faire lors de la basclue en 1.9...

    Répondre à ce message

  • Merci beaucoup pour cette contribution !
    Elle est simple, claire, et bidouillable à merci avec du code spip sans jamais toucher ou js : bref un menu dépliant comme j’en révais.

    Répondre à ce message

  • 2

    alors je l’ai mis en place sur un site sur lequel je travaille.
    J’aurais voulu rajouter les articles au menu, mais ca verrais plus tard.

    Par contre j’ai une question, est-ce normal que lorsque je clique sur une rubrique qui contient des sous-rubriques, le menu ne se déplie pas pour les montrer ? Je dois cliquer sur la flèche pour la montrer ! C’est ou le problème ?

    Pour ce qui concerne tes flèches elles sortent en effet avec un fond noir sur ie, moi j’ai mis des .gif (tas mis de .png) des images d’office (ecrire/img_pack) et ca sort bien.

    Merci pour ta réponse

    • J’avais hésité à mettre des gif (question d’éthique peut-être, le png est libre) mais c’est vrai que c’est mieux pour IE. Pour la flèche, en effet, le menu se déplie uniquement si on clique sur la flèche et pas sur la rubrique. Pourquoi me direz-vous ? Et bien parce que certains internautes désactivent javascript. Pour ne pas les bloquer, le fait de cliquer sur la rubrique permet d’afficher les autres rubriques dans la partie centrale. Il faut donc modifier ma contrib pour que le déploiement se fasse avec un clic « global » sur toute la rubrique. Je pourrai la modifier en conséquence. En espérant avoir répondu à tes questions...

    • Pour déplier tout (en cliquant sur la flèche et la rubrique) :

      <BOUCLE_rub(RUBRIQUES) {racine} {par titre}>
      <a href="javascript:swap_couche('#ID_RUBRIQUE','','#DOSSIER_SQUELETTE/images/',0)" title="Cliquer pour déplier">
      <img name="triangle#ID_RUBRIQUE" src="#DOSSIER_SQUELETTE/images/deplierhaut.png" border="0" alt="f1" />#TITRE</a>
      <script language="javascript" type="text/javascript">
              <!--
              vis['#ID_RUBRIQUE'] = 'hide';
              //-->
              </script>
      <B_sous_rubriques>
      <div id='Layer#ID_RUBRIQUE' style='display: none; margin-top: 1;'>
      <ul>
              <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
              <li>
              <a href="#URL_RUBRIQUE">#TITRE</a>
              </li>
              </BOUCLE_sous_rubriques>
      </ul>
      </div>
      </B_sous_rubriques>
      </BOUCLE_rub>

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

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

Dernière modification de cette page le 20 août 2009