2devs.com : réalisation et développement multimédias
2devs.com : réalisation et développement multimédias2devs.com : réalisation et développement multimédias
21 novembre 2008
2devs.com  > Open source  > SPIP

Menu SPIP dépliant / déroulant - Expand menu - CSS / JavaScript
2devs.com - imprimer cet article  Menu SPIP dépliant / déroulant en javascript et CSS
Menu SPIP dépliant / déroulant - Expand menu - CSS / JavaScript
Publié le 18/04/2006, par Mélanie Couty Alagnoux

 

Création d’un menu SPIP dit dépliant ou déroulant, contextuel en javascript et CSS.

Présentation :

Le menu SPIP que vous trouverez ci après est un menu pliant/dépliant (cascade ou déroulant) réalisé en javascript et CSS.

Ce menu SPIP est contextuel à la rubrique courante, c’est à dire qu’il reste déplié dans la branche contenant la rubrique courante et expose le/les chapitres ouverts.

(GIF)
2devs.com : Impression d’écran du menu

Menu réalisé sur une version SPIP 1.8.2g

Menu testé sur :
-  Mozilla Firefox v.1.5.0.1
-  Internet Explorer - IE 6

Préambule :

Ce menu fonctionne en liste imbiquées



<ul>
  <li> Item 1
    <ul>
       <li> Item 1.1</li>
       <li> Item 1.2</li>
    </ul>
  </li>
  <li> Item 2
     <ul>
        <li> Item 2.1</li>
    </ul>
  </li>
</ul>


Ce qui donne :

  • Item 1
    • Item 1.1
    • Item 1.2
  • Item 2
    • Item 2.1

Explications :

-  Etape 1 - Création des fichiers : Créer un fichier nommé menu.php3 à la racine de votre site SPIP qui appelera le fichier menu.html.


<?php

$fond = "menu";
$delais = 24 * 3600;

include ("inc-public.php3");

?>


Créer un fichier nommé menu.html dans votre dossier contenant les fichier html (généralement dans un dossier “DIST”) qui contiendra les éléments du menu - boucle récursive d’affichage des rubriques et sous rubriques - ainsi que des éléments d’appel javascript.

-  Boucle ’récursive’ d’affichage du menu en forme de liste



<BOUCLE_selectMenu (RUBRIQUES){racine}{par num titre}>
<ul class="open">
<li id="#ID_RUBRIQUE"><a  onclick="toggle('#ID_RUBRIQUE');"><img src="closed.gif" alt="" id="img_#ID_RUBRIQUE" border="0"></a>&nbsp;<a href="#URL_RUBRIQUE" title="#NOM_SITE_SPIP - [(#TITRE|supprimer_numero)]" [ class="(#EXPOSE{actif})"]>[(#TITRE|supprimer_numero)]</a>
<ul id="ul_#ID_RUBRIQUE" class="closed">

<BOUCLE_secteurs(RUBRIQUES){id_parent}{par num titre}>
<li id="#ID_RUBRIQUE"><a  onclick="toggle('#ID_RUBRIQUE');"><img src="closed.gif" alt="" id="img_#ID_RUBRIQUE" border="0"></a>&nbsp;<a href="#URL_RUBRIQUE" title="#NOM_SITE_SPIP - [(#TITRE|supprimer_numero)]" [ class="(#EXPOSE{actif})"]>[(#TITRE|supprimer_numero)]</a>
<B_sousrub>

<ul id="ul_#ID_RUBRIQUE" class="closed">
<BOUCLE_sousrub(RUBRIQUES){id_parent}{par num titre}>
<li id="#ID_RUBRIQUE"><a  onclick="toggle('#ID_RUBRIQUE');"><img src="closed.gif" alt="" id="img_#ID_RUBRIQUE" border="0"></a>&nbsp;<a href="#URL_RUBRIQUE" title="#NOM_SITE_SPIP - [(#TITRE|supprimer_numero)]" [ class="(#EXPOSE{actif})"]>[(#TITRE|supprimer_numero)]</a>
<BOUCLE_sousousrub(boucle_sousrub)></BOUCLE_sousousrub>
</li>
</BOUCLE_sousrub>
</ul></B_sousrub>
</li>
</BOUCLE_secteurs>
</ul>
</li>
</ul>
</BOUCLE_selectMenu>

</ul>

-  Etape 2 - créer un fichier nommé menudépliant.js à la racine de votre site en SPIP, contenant les codes javaScript suivants :

1ère fontion permetant le dépliage/repliage des éléments du menu ainsi que le remplacement de l’image utilisée en tant que puce.



function toggle(id){

   ul = "ul_" + id;
   img = "img_" + id;
   ulElement = document.getElementById(ul);
   imgElement = document.getElementById(img);

   if (ulElement){
           if (ulElement.className == 'closed'){
   
                   ulElement.className = "open";
                   imgElement.src = "opened.gif";
                   }else{
                   ulElement.className = "closed";
                   imgElement.src = "closed.gif";
                   
                   }
           }
           
           
   }


2nde fontion permettant déplier la branche de la rubrique courante.



function hierarchie (listRubriques) {

 var itemList = listRubriques;
 var restoredArray = itemList.split(",");
 var numberItem = restoredArray.length;

 for (i=0; i<numberItem; i++) {
     currentRub = restoredArray[i]
                  ul = "ul_" + currentRub;
     img = "img_" + currentRub;
     ulElement = document.getElementById(ul);
     imgElement = document.getElementById(img);

     if (ulElement) {
         ulElement.className = "open";
         imgElement.src = "opened.gif";

       }


   }

}


Je vous en ai mis une 3ème qui s’utilise comme la seconde et qui permet de replier l’ensemble du menu, au cas ou vous en auriez besoin.



function initial(listRubriques) {

 var itemList = listRubriques;
 var restoredArray = itemList.split(",");
 var numberItem = restoredArray.length;

 for (i=0; i<numberItem; i++) {
     currentRub = restoredArray[i]
                  ul = "ul_" + currentRub;
     img = "img_" + currentRub;
     ulElement = document.getElementById(ul);
     imgElement = document.getElementById(img);

     if (ulElement) {
         ulElement.className = "closed";
         imgElement.src = "closed.gif";

       }


   }

}



-  Etape 3 - le CSS : Copiez/collez le code suivant dans votre fichier CSS.


.open {
        display: block;
        }

.closed {
        display: none;
        }

.actif {
        font-weight: bold;
        color: #C59E67;
       }

ul {
        list-style-type: none;
        padding-top: 0px;
        padding-bottom: 5px;
        margin-left: 0px;
        padding-left: 10px;
        margin-top: 0;
        margin-bottom: 0;
       
        }
.li {
        list-style-type: none;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        margin-left: 0px;
        }

li img {
        vertical-align: middle;
        }

li img a:hover {
        vertical-align: middle;
        }
       

-  Etape 4 - Insertion du menu dans les pages html


<!-- Insertion du menu -->       
<INCLURE(menu.php3)>

Puis insertion de l’appel de la fonction hierarchie dans la balise body des pages ou se trouve votre menu.



<body onload="hierarchie('#ID_RUBRIQUE,<BOUCLE_HIER (HIERARCHIE){','}>#ID_RUBRIQUE</BOUCLE_HIER>')">




Origine du menu html/javascript :
Expanding Nested Lists : http://www.karlnelson.net
Adaptation SPIP :
2devs.com - Mélanie ALAGNOUX.




Répondre à cet article  Répondre à cet article

2devs.com : messages de forum
  • Menu SPIP dépliant / déroulant en javascript et CSS
    19 juillet 2006, par Stéphane

    merci pour votre contrib.

    Je cherche à faire ce type de menu... (avec en plus les titres des articles qui s’affichent dans le menu)

    j’ai essayé votre contrib, sans succès, avec la version 1.9 de Spip... (j’ai modifié, comme préconisé par la communauté, la syntaxe de INCLURE comme ceci <INCLURE{fond=menu}> comme préconisé mais le clic devant l’item ne déplie pas le menu...

    Répondre à ce message
    • Menu SPIP dépliant / déroulant en javascript et CSS
      19 juillet 2006

      Bonjour Stéphane,

      je viens d’effectuer un test sommaire en v 1.9.0 de spip de ce menu et apparement il fonctionne correctement.

      Peux etre est ce du à un probleme de chemin d’acces aux fichiers contenant les codes javascript ou css ?

      Tu trouveras ci apres une version contenant l’ensemble des éléments dans la même page (css, javascript et html menu) teste la et dis moi si tu observe des dysfonctionnement :


      <html>
      <head>
      <!-- début jscript -->
      <script type="text/javascript">function toggle(id){

        ul = "ul_" + id;
        img = "img_" + id;
        ulElement = document.getElementById(ul);
        imgElement = document.getElementById(img);

        if (ulElement){
                if (ulElement.className == 'closed'){
       
                        ulElement.className = "open";
                        imgElement.src = "opened.gif";
                        }else{
                        ulElement.className = "closed";
                        imgElement.src = "closed.gif";
                       
                        }
                }
               
               
        }

      function hierarchie (listRubriques) {

      var itemList = listRubriques;
      var restoredArray = itemList.split(",");
      var numberItem = restoredArray.length;

      for (i=0; i<numberItem; i++) {
          currentRub = restoredArray[i]
                       ul = "ul_" + currentRub;
          img = "img_" + currentRub;
          ulElement = document.getElementById(ul);
          imgElement = document.getElementById(img);

          if (ulElement) {
              ulElement.className = "open";
              imgElement.src = "opened.gif";

            }


        }

      }
      </script>
      <!-- fin jscript -->

      <!-- début css -->
              <style>
                     
      .open {
             display: block;
             }

      .closed {
             display: none;
             }

      .actif {
             font-weight: bold;
             color: #C59E67;
            }

      ul {
             list-style-type: none;
             padding-top: 0px;
             padding-bottom: 5px;
             margin-left: 0px;
             padding-left: 10px;
             margin-top: 0;
             margin-bottom: 0;
             
             }
      .li {
             list-style-type: none;
             padding-top: 0px;
             padding-bottom: 0px;
             padding-left: 0px;
             margin-left: 0px;
             }

      li img {
             vertical-align: middle;
             }

      li img a:hover {
             vertical-align: middle;
             }
      </style>
      <!-- fin css -->

      </head>
      <body>
             
      <!-- début menu -->
      <BOUCLE_selectMenu (RUBRIQUES){racine}{par num titre}>
      <ul class="open">
      <li id="#ID_RUBRIQUE"><a  onclick="toggle('#ID_RUBRIQUE');"><img src="closed.gif" alt="" id="img_#ID_RUBRIQUE" border="0"></a>&nbsp;<a href="#URL_RUBRIQUE" title="#NOM_SITE_SPIP - [(#TITRE|supprimer_numero)]" [ class="(#EXPOSE{actif})"]>[(#TITRE|supprimer_numero)]</a>
      <ul id="ul_#ID_RUBRIQUE" class="closed">

      <BOUCLE_secteurs(RUBRIQUES){id_parent}{par num titre}>
      <li id="#ID_RUBRIQUE"><a  onclick="toggle('#ID_RUBRIQUE');"><img src="closed.gif" alt="" id="img_#ID_RUBRIQUE" border="0"></a>&nbsp;<a href="#URL_RUBRIQUE" title="#NOM_SITE_SPIP - [(#TITRE|supprimer_numero)]" [ class="(#EXPOSE{actif})"]>[(#TITRE|supprimer_numero)]</a>
      <B_sousrub>

      <ul id="ul_#ID_RUBRIQUE" class="closed">
      <BOUCLE_sousrub(RUBRIQUES){id_parent}{par num titre}>
      <li id="#ID_RUBRIQUE"><a  onclick="toggle('#ID_RUBRIQUE');"><img src="closed.gif" alt="" id="img_#ID_RUBRIQUE" border="0"></a>&nbsp;<a href="#URL_RUBRIQUE" title="#NOM_SITE_SPIP - [(#TITRE|supprimer_numero)]" [ class="(#EXPOSE{actif})"]>[(#TITRE|supprimer_numero)]</a>
      <BOUCLE_sousousrub(boucle_sousrub)></BOUCLE_sousousrub>
      </li>
      </BOUCLE_sousrub>
      </ul></B_sousrub>
      </li>
      </BOUCLE_secteurs>
      </ul>
      </li>
      </ul>
      </BOUCLE_selectMenu>

      </ul>
      <!-- fin menu -->
      </body>
      </html>
      Répondre à ce message
      • Menu SPIP dépliant / déroulant en javascript et CSS
        21 juillet 2006, par Stéphane

        Merci pour ta réponse. J’ai essayé et ça marche presque (apparememt il vaut mieux éviter les "include"), le petit bémol vient du fait qu’il y a mon petit ’plus.gif’ qui se change en ’moins.gif’ lorsque que je clique sur une rubrique racine qui n’a pas de sous-rubrique... c’est un détail...

        En fait, c’est le menu qu’il me faut avec l’affichage des titres d’articles en plus...

        J’avais trouvé un truc qui fonctionnait parfaitement jusqu’à la version 1.8.3 de Spip ; tu peux voir un exemple ici, mais depuis la version 1.9 je n’ai plus l’affichage des sous rubriques et des articles qu’elles contiennent. (exemple ici)

        J’espère que ton menu me permettra de contourner ce bug si j’arrive à trouver comment faire afficher les articles dans le menu.

        merci encore

        Répondre à ce message





2devs.com : A consulter...



2devs.com - Masquer/Afficher les fils de discussion des articles SPIP Masquer/Afficher les fils de discussion des articles SPIP
Possibilité de replier et déplier les fils de discussion sur les articles dans SPIP.
par Mélanie Couty Alagnoux

2devs.com - Galerie photo et video pour SPIP 1.7.2 Galerie photo et video pour SPIP 1.7.2
Creation d’une galerie photo ou vidéo sans utiliser la boucle document.
par Mélanie Couty Alagnoux






SIRET : '41828681100017' - Code APE : '923A' - MDA : 'A718516'
2devs.com - réalisation et développement multimédia © www.2devs.com - 2006 2devs.com - réalisation et développement multimédia © www.2devs.com - 2006 2devs.com - réalisation et développement multimédia © www.2devs.com - 2006