à la recherche d'un menu dépliant - non-dépliant selon contexte de la rubrique

Général
1

Bonjour

Je suis à la recherche d’un menu dépliant vertical pour SPIP 2.07 qui offre selon le contexte de la rubrique:
rubrique + sous-rubrique + sous-rubrique + articles
ou pour d’autres rubriques: lien direct vers l’article

merci
RP

2

* Renée Picard tapuscrivait, le 08/05/2009 16:19:

Bonjour

Je suis à la recherche d'un menu dépliant vertical pour SPIP 2.07 qui offre selon le contexte de la rubrique:
rubrique + sous-rubrique + sous-rubrique + articles
ou pour d'autres rubriques: lien direct vers l'article

Le menu de SoyezCreateurs (squelette disponible sur la zone) utilisé sur www.pyrat.net ?

--
RealET

3

Renée Picard a écrit :

Bonjour

Je suis à la recherche d’un menu dépliant vertical pour SPIP 2.07 qui offre selon le contexte de la rubrique:
rubrique + sous-rubrique + sous-rubrique + articles
ou pour d’autres rubriques: lien direct vers l’article

merci
RP


---

Personnellement, j’utilise celui de http://programmer.spip.org/

4

Bonjour
Je suis allé voir et c'est ce que je veux.
peux-tu m'indiquer comment tu as fait ce menu?
RP

Jean-Christophe Villeneuve a écrit :

Renée Picard a écrit :

Bonjour

Je suis à la recherche d'un menu dépliant vertical pour SPIP 2.07 qui offre selon le contexte de la rubrique:
rubrique + sous-rubrique + sous-rubrique + articles
ou pour d'autres rubriques: lien direct vers l'article

merci
RP
------------------------------------------------------------------------

Personnellement, j'utilise celui de http://programmer.spip.org/

5

Renée Picard a écrit :

Bonjour
Je suis allé voir et c'est ce que je veux.
peux-tu m'indiquer comment tu as fait ce menu?
RP

Jean-Christophe Villeneuve a écrit :

Renée Picard a écrit :

Bonjour

Je suis à la recherche d'un menu dépliant vertical pour SPIP 2.07 qui offre selon le contexte de la rubrique:
rubrique + sous-rubrique + sous-rubrique + articles
ou pour d'autres rubriques: lien direct vers l'article

merci
RP
------------------------------------------------------------------------

Personnellement, j'utilise celui de http://programmer.spip.org/

Ben j'ai regardé le code source, j'ai (honteusement) copié et j'ai adapté un chouille à mes besoins.
Si ça t'intéresse, je te file le fichier html et le javascript que j'utilise sur ce site
http://escal.toile-libre.org/
(site qui va bientot déménager)

6

Bonjour

Le menu de soyez créateur est très intéressant.J'ai téléchargé le zip sur la zone.Je n'ai pas besoin de la configuration via l'espace privé. J'aimerais installé seulement le menu vertical dépliant. Pouvez-vous m'indiquer quels sont les fichiers nécessaires car devant le large éventail de possibilité de ce plugin-squelette je suis un peu perdue.
Merci
RP

  RealET a écrit :

* Renée Picard tapuscrivait, le 08/05/2009 16:19:

Bonjour

Je suis à la recherche d'un menu dépliant vertical pour SPIP 2.07 qui offre selon le contexte de la rubrique:
rubrique + sous-rubrique + sous-rubrique + articles
ou pour d'autres rubriques: lien direct vers l'article

Le menu de SoyezCreateurs (squelette disponible sur la zone) utilisé sur www.pyrat.net ?

7

Bonjour
Je l'ai installé mais je trouve qu'il ne referme pas bien.
site en construction:
http://www.conceptvirtuel.ca/dignite/

J'ai essayé de changer les vitesses dans script/menu_vertical.js mais je ne vois pas de changement.

Je vais essayer de changer le js à partir de la bibliothèque de Jqery pour qqchose de dépliant.
Merci
RP

Jean-Christophe Villeneuve a écrit :

Renée Picard a écrit :

Bonjour
Je suis allé voir et c'est ce que je veux.
peux-tu m'indiquer comment tu as fait ce menu?
RP

Jean-Christophe Villeneuve a écrit :

Renée Picard a écrit :

Bonjour

Je suis à la recherche d'un menu dépliant vertical pour SPIP 2.07 qui offre selon le contexte de la rubrique:
rubrique + sous-rubrique + sous-rubrique + articles
ou pour d'autres rubriques: lien direct vers l'article

merci
RP
------------------------------------------------------------------------

Personnellement, j'utilise celui de http://programmer.spip.org/

Ben j'ai regardé le code source, j'ai (honteusement) copié et j'ai adapté un chouille à mes besoins.
Si ça t'intéresse, je te file le fichier html et le javascript que j'utilise sur ce site
http://escal.toile-libre.org/
(site qui va bientot déménager)

8

* Renée Picard tapuscrivait, le 12/05/2009 13:49:

Bonjour

Le menu de soyez créateur est très intéressant.J'ai téléchargé le zip sur la zone.Je n'ai pas besoin de la configuration via l'espace privé. J'aimerais installé seulement le menu vertical dépliant. Pouvez-vous m'indiquer quels sont les fichiers nécessaires car devant le large éventail de possibilité de ce plugin-squelette je suis un peu perdue.

Je dois avouer que moi aussi.
Le plugin/squelette est trop compliqué pour être analysable rapidement.

Y'a une vieille version qui est documenté ici : Squelette : Menu dynamique accessible + 3 colonnes en CSS + géométrie variable - SPIP-Contrib

--
RealET

9

merci
j'essaie d'installer cela.
Mon objectif est d'avoir un menu multi-niveaux le plus accessible possible.
Est-ce que jquery peut faire cela?
RP

RealET a écrit :

* Renée Picard tapuscrivait, le 12/05/2009 13:49:

Bonjour

Le menu de soyez créateur est très intéressant.J'ai téléchargé le zip sur la zone.Je n'ai pas besoin de la configuration via l'espace privé. J'aimerais installé seulement le menu vertical dépliant. Pouvez-vous m'indiquer quels sont les fichiers nécessaires car devant le large éventail de possibilité de ce plugin-squelette je suis un peu perdue.

Je dois avouer que moi aussi.
Le plugin/squelette est trop compliqué pour être analysable rapidement.

Y'a une vieille version qui est documenté ici : Squelette : Menu dynamique accessible + 3 colonnes en CSS + géométrie variable - SPIP-Contrib

10

Renée Picard a écrit :

merci
j'essaie d'installer cela.
Mon objectif est d'avoir un menu multi-niveaux le plus accessible possible.
Est-ce que jquery peut faire cela?
RP

RealET a écrit :

* Renée Picard tapuscrivait, le 12/05/2009 13:49:

Bonjour

Le menu de soyez créateur est très intéressant.J'ai téléchargé le zip sur la zone.Je n'ai pas besoin de la configuration via l'espace privé. J'aimerais installé seulement le menu vertical dépliant. Pouvez-vous m'indiquer quels sont les fichiers nécessaires car devant le large éventail de possibilité de ce plugin-squelette je suis un peu perdue.

Je dois avouer que moi aussi.
Le plugin/squelette est trop compliqué pour être analysable rapidement.

Y'a une vieille version qui est documenté ici : Squelette : Menu dynamique accessible + 3 colonnes en CSS + géométrie variable - SPIP-Contrib

Le code que j'ai envoyé pour le menu de http://programmer.spip.org/ ne fait pas l'affaire

11

Ouos, je croyais avoir envoyé le code à la liste mais je ne l'ai envoyé qu'à Perline, avec en plus une petite erreur sur une balise de boucle fermante.
Donc je réponds aux quelques personnes intéressées par le menu vertical de http://programmer.spip.org/
D'abord, un grand merci à Matthieu Marcillaud pour ce menu.

Voici le code du fichier inc-menu.html

<div id="menuV">
   <!-- exclusion des rubriques avec le mot-clé "pas-au-menu" et de ses sous-rubriques -->
   <BOUCLE_exclure_rub(RUBRIQUES){titre_mot=pas-au-menu}{doublons}>
   <BOUCLE_exclure_ssrub(RUBRIQUES){id_parent}{doublons}></BOUCLE_exclure_ssrub>

   </BOUCLE_exclure_rub>

   <B_secteurs>
   <ul class="rubriques">
       <BOUCLE_secteurs(RUBRIQUES) {racine} {par titre} {doublons}>
           <li class="#EXPOSE">
     <a href="#URL_RUBRIQUE">[(#TITRE)]</a>
                 <!-- affichage des articles des secteurs s'il y en a -->
           <B_articles_racine>
               <ul class="articles">
                   <BOUCLE_articles_racine(ARTICLES) {id_rubrique} {par num titre, titre}{doublons}>
                   <li class="#EXPOSE">
                   <a href="#URL_ARTICLE">[(#TITRE)]</a>
                   </li>
                   </BOUCLE_articles_racine>
               </ul>
           </B_articles_racine>

           <!-- affichage des sous-rubriques -->
           <B_rubriques>
               <ul class="rubriques">
                   <BOUCLE_rubriques(RUBRIQUES) {id_parent} {par num titre, titre} {doublons}>
                   <li class="#EXPOSE">
               <a href="#URL_RUBRIQUE">[(#TITRE)]</a>

                 <!-- affichage des articles -->
                   <B_articles>
                       <ul class="articles">
                           <BOUCLE_articles(ARTICLES) {id_rubrique} {par num titre, titre}{doublons}>
                           <li class="#EXPOSE">
                               <a href="#URL_ARTICLE">[(#TITRE)]</a>
                               </li>
                           </BOUCLE_articles>
                       </ul>
                   </B_articles>

                   <!-- on refait tourner la boucle pour les sous-sous...-rubriques -->
                   <BOUCLE_sous_rubriques(BOUCLE_rubriques)></BOUCLE_sous_rubriques>
                   </li>
                   </BOUCLE_rubriques>
               </ul>
           </B_rubriques>
</li>
       </BOUCLE_secteurs>
       </ul>
       </B_secteurs>
</div>

Ensuite, la partie css pour l'affichage (à vous de mettre les images que vous voulez)

#menuV ul {
   list-style: none;
   margin: 5px 0 0 0;
   padding: 0px;
   line-height:18px;
}
#menuV ul li {
   padding: 0 0 2px 20px;
   min-height: 16px;
}
#menuV ul ul {
   margin-left: -15px;
   padding: 0 0 0 5px;
}
#menuV ul.rubriques li {
   background: url(../images/rubnormal.png) no-repeat;
}
#menuV ul.rubriques li.on {
   background: url(../images/rubexpose.png) no-repeat;
}
#menuV ul.articles li {
   background: url(../images/artnormal.png) no-repeat;
}
#menuV ul.articles li.on {
   background: url(../images/artexpose.png) no-repeat;
}
#menuV li.on>a {
   font-weight: bold;
}

Enfin, le javascript qui permet de dérouler ou d'enrouler les items du menu

(function($){
   $(document).ready(function(){

       /*
        * Menu depliant de navigation
        */
       $('#menuV li:not(.on) ul').hide();
       $('#menuV li a').hover(function(){
           var me=this;
           var time=400;
           // un temps plus long pour refermer !
           if ($(me).parent().find('>ul').is(':visible')) {
               time=1200;
           }

           $(me).addClass('hop');
           setTimeout(function(){
               // verifier que la souris n'est pas deja partie !
               if ($(me).hasClass("hop")) {
                   var parent = $(me).parent();
                   // verifier que ce n'est pas une liste exposee
                   if (!$(parent).hasClass('on')) {
                       // fermer les ul
                       var ul = $(parent).find('>ul');
                       if ($(ul).is(':visible')) {
                           $(ul).find('li:not(.on) ul').hide();
                           $(ul).slideUp('fast');
                       // ou ouvrir le premier
                       } else {
                           $(ul).slideDown('fast');
                       }
                   }
               }
           }, time);
       },function(){
           $(this).removeClass('hop');
       });

   });
})(jQuery);

Voilà voilà.