SPIP - Contrib

[ar] [en] [es] [fr] [it]



Accueil du site > Navigation > Menus dépliants

Menu "dépliant" comme dans l’administration de spip

jeudi 3 août 2006, par FranckA. Dernier ajout mercredi 6 décembre 2006


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


Mots-clés

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

- Ecriture des boucles spip :

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

Documents joints

  • Documents Documents (Zip - 2.2 ko)

    Fichiers deplier.js, deplierbas.png, deplierhaut.png et menu.html.


Répondre à cet article

  • Menu "dépliant" comme dans l’administration de spip

    25 août 2006 14:45, par Francoisl

    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

    Répondre à ce message

    • Menu "dépliant" comme dans l’administration de spip 29 octobre 2006 18:27, par popojcb

      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 :

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

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

      Répondre à ce message

      • Menu "dépliant" comme dans l’administration de spip 29 octobre 2006 18:49, par farandole

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

        Répondre à ce message

        • Menu "dépliant" comme dans l’administration de spip 1er novembre 2006 21:53, par popojcb

          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>

          Répondre à ce message

          • Menu "dépliant" comme dans l’administration de spip 2 novembre 2006 09:29, par farandole

            Bonjour Je ne vois pas où est passé le code suivant :

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

            Répondre à ce message

            • Menu "dépliant" comme dans l’administration de spip 2 novembre 2006 10:50, par popojcb

              Bien en fait je l’ai supprimer juste avant l’envois et apparamment cela fonctionne de la même façon.

              Répondre à ce message

              • Menu "dépliant" comme dans l’administration de spip 2 novembre 2006 11:18, par popojcb

                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 ?

                Répondre à ce message

                • Menu "dépliant" comme dans l’administration de spip 2 novembre 2006 13:36, par farandole

                  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. :-\

                  Répondre à ce message

                  • Menu "dépliant" comme dans l’administration de spip 2 novembre 2006 15:13, par popojcb

                    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 !

                    Répondre à ce message

    • Menu "dépliant" comme dans l’administration de spip 20 mars 2007 15:30, par ratch

      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

    Retour au début des forums

  • Menu "dépliant" comme dans l’administration de spip

    3 août 2006 15:54, par fulvio

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

    Répondre à ce message

    • Menu "dépliant" comme dans l’administration de spip 4 août 2006 09:41, par farandole

      Je voudrais savoir ce que tu entends par "afficher les articles aussi".

      Répondre à ce message

      • Menu "dépliant" comme dans l’administration de spip 5 août 2006 17:05, par fulvio

        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.

        Répondre à ce message

        • Menu "dépliant" comme dans l’administration de spip 8 août 2006 18:49, par vincevg

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

          Répondre à ce message

          • Menu "dépliant" comme dans l’administration de spip 9 août 2006 07:55, par farandole

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

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

            Répondre à ce message

            • Menu "dépliant" comme dans l’administration de spip - aticles 4 octobre 2006 21:18, par igedmedia

              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

              Répondre à ce message

    Retour au début des forums

  • Menu "dépliant" comme dans l’administration de spip

    6 août 2006 22:18, par wini1348

    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

    Répondre à ce message

    • Menu "dépliant" comme dans l’administration de spip 7 août 2006 07:18, par farandole

      Oui, ici

      Répondre à ce message

      • Menu "dépliant" comme dans l’administration de spip 7 août 2006 18:16, par gitehortus

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

        Répondre à ce message

        • Menu "dépliant" comme dans l’administration de spip 7 août 2006 20:18, par farandole

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

          Répondre à ce message

          • Menu "dépliant" comme dans l’administration de spip 7 août 2006 20:53, par farandole

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

            Répondre à ce message

          • Menu "dépliant" comme dans l’administration de spip 8 août 2006 13:36, par gitehortus

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

            Répondre à ce message

      • Menu "dépliant" comme dans l’administration de spip 8 août 2006 15:52, par iomega

        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>

        Répondre à ce message

    Retour au début des forums

  • Menu "dépliant" comme dans l’administration de spip

    26 août 2006 08:42, par Brunorius

    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;';
                }
                    ?>     		<?php echo (#ID_RUBRIQUE == $actuelle ? '' : (in_array(#ID_RUBRIQUE, $hierarchie) ? 'on' : 'off')); ?> " >[(#TITRE|supprimer_numero)] <?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" />';
                                    }
                                    ?>     		<?php echo (#ID_RUBRIQUE == $actuelle ? '' : (in_array(#ID_RUBRIQUE, $hierarchie) ? 'on' : 'off')); ?> " >[(#TITRE|supprimer_numero)] <?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

    Retour au début des forums

  • Menu "dépliant" comme dans l’administration de spip

    9 août 2006 21:54, par sylpub

    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

    Retour au début des forums

  • Menu "dépliant" comme dans l’administration de spip

    7 août 2006 19:16, par fulvio

    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

    Répondre à ce message

    • Menu "dépliant" comme dans l’administration de spip 7 août 2006 20:23, par farandole

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

      Répondre à ce message

      • Menu "dépliant" comme dans l’administration de spip 7 août 2006 21:07, par farandole

        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

    Retour au début des forums

0 | 25



Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | Charte et vie SPIP-Contrib | SPIP | L'autre.net