Accueil du site > Navigation > Menus réactifs > Menu dépliant Jquery > Menu dépliant (liste, CSS et jquery)

Menu dépliant (liste, CSS et jquery)

9 avril 2007 – par cam.lafit – 67

15 votes

Un menu déroulant / dépliant exploitant jquery, css et les listes (ul, li).

But

À ceux qui me diront : « Mais pourquoi une éniéme contrib sur les menus déroulant ? », je répondrais : « Parce que ».

Plus sérieusement, il se trouve que les contrib (à mon sens) n’exploitent pas jusqu’au bout les listes, ni jquery. Jquery est maintenant intégré dans SPIP, ce qui offre pas mal de petits agréments concernant l’exploitation de javascript.

Références

Je vous invite à lire, dans un premier temps, l’ensemble des travaux listés dans vide et Menus réactifs.

Puis pour les tenaces :
- http://be.twixt.us/jquery/treeViewH...
- http://jquery.bassistance.de/treeview/

Contraintes de travail

Parmi les contraintes que je me suis imposées, il y a :
- avoir un rendu minimal acceptable sur l’ensemble des navigateurs
- être exploitable dans le maximum de contexte (navigation, plan de site, ...)
- n’utiliser que jquery (pas d’import de script extérieur), (code non intrusif)
- n’utiliser que des liste (ul,li) mais pas de div ou a

Conséquence

Parmi les effets de bords désagréables, la version initiale n’est pas compatible avec Internet Explorer. Entre autre du fait que ce navigateur ne gére pas l’évènement click sur les listes. Toutefois un petit ajout, permet de remédier à ce détail. Allez voir en bas de page.

Se faire une idée

Il parait que des images parlent mieux que des mots. Les captures d’écrans ont été réalisées sous Opéra 9.1 (window XP), les rendus sont sensiblement les mêmes sous Firefox 2.


Menu deplié (sans js): Menu lorque javascript a été desactivé


Menu plié: Capture présentant le menu à son chargement lorsque le javascript est actif.


Menu actif: Capture présentant le menu déplié suite à un certains nombre de click

Un autre exemple, exploitant l’attribut #EXPOSE et une autre feuille de style


Version de base: Version témoin


Version triangle: Seule la feuille de style a été modifiée


Version #EXPOSE: Dans le cas d’une intégration dans un squelette article

Squelette

Le squelette reste simple et peu innovant. Il se base énormément sur les autres contributions.

Les éléments à noter sont :
- l’identifiant #arborescence, pour éviter de casser les autres listes présentes sur votre page.
- la classe noeud, qui indique l’existence d’éléments fils.
- la classe feuille, qui indique un élément terminal.

Dans le cadre d’une intégration comme menu de navigation,vous trouverez :
- #EXPOSE afin de mettre en valeur l’article/rubrique consulté(e)
- #SET{rub,(#ENV{cacher_article}|?{6666,#ID_RUBRIQUE})} , cette affectation permet de cacher les articles de l’arborescence si une variable cacher_article=1 est transmise via INCLURE.

<ul id="arborescence">
  <BOUCLE_racine(RUBRIQUES){racine}{par titre}>
    <li class="noeud [(#EXPOSE)]">
      <a href="#URL_RUBRIQUE" [class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]> 
        [(#TITRE|supprimer_numero)]
      </a>
       <ul [class="(#EXPOSE)"]>
        #SET{rub,(#ENV{cacher_article}|?{6666,#ID_RUBRIQUE})}
        <BOUCLE_article(ARTICLES){id_rubrique=#GET{rub}}{par num titre}>
          <li class="feuille [(#EXPOSE)]">
            <a href="#URL_ARTICLE" [class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]> 
              [(#TITRE|supprimer_numero)]
            </a>
          </li>
        </BOUCLE_article>
        <BOUCLE_ss_rubrique(RUBRIQUES){id_parent}{par num titre}>
          <li class="noeud [(#EXPOSE)]">
            <a href="#URL_RUBRIQUE" [class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]>
              [(#TITRE|supprimer_numero)]
            </a>
            <ul [class="(#EXPOSE)"]> 
              #SET{rub,(#ENV{cacher_article}|?{6666,#ID_RUBRIQUE})}              
              <BOUCLE_articlea(ARTICLES){id_rubrique=#GET{rub}}{par num titre}>
                  <li class="feuille [(#EXPOSE)]">
                    <a href="#URL_ARTICLE" [class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]>
                        [(#TITRE|supprimer_numero)]
                    </a>
                  </li>
               </BOUCLE_articlea>
               <BOUCLE_n(boucle_ss_rubrique)></BOUCLE_n>
            </ul>
          </li>
        </BOUCLE_ss_rubrique>         	
      </ul>
    </li>
  </BOUCLE_racine>
</ul>

Styles CSS

Nous pouvons maintenant mettre tout ceci en page. Le code est commenté pour restituer l’utilisation des différentes mises en page. Vous constaterez la présence de la classe .plier qui correspondra à l’action plier qu’effectuera le script. Par défaut un navigateur déplie les listes, c’est pourquoi vous ne trouverez pas de classe .deplier.

/* expose le chemin de l'article ou rubrique en cours */
	#arborescence .oui {
		color :red;
	}

	/* annule les marges pour les items et les sous items */
	#arborescence li, #arborescence li ul {
		margin: 0;
		padding : 0;		
		list-style : none;
	}
	
	/* par défaut les puces sont dans le corps des items */
	#arborescence li {
		list-style-position: inside;
		margin-left:2em;	
		vertical-align : top;		
	}
	
	#arborescence li a {
		height: 20px;				
	}
	
	/* par defaut les element noeuds (ie déplié) */
	#arborescence .noeud {
		list-style-image:url(../images/tree/minus.gif);
		background-image : url(../images/tree/line.gif);	
		background-repeat : repeat-y;	
	}

	/* lorsque le bloc fils est fermé */			
	#arborescence .plier {
		list-style-image:url(../images/tree/plus.gif);
	}

	#arborescence .plier > ul {
		display : none;
	}

	#arborescence .feuille {
		list-style-image: url(../images/tree/branch.gif);
		background-repeat : repeat-y;			
		height : 20px;		
	}

Script

Bon ce n’est pas tout ça, mais j’ai promis un menu dépliant. Dans un premier temps, il faut penser à mettre dans votre le <head> de votre squelette ceci :

#INSERT_HEAD

ou bien

<INCLURE{fond=inc-head}>

C’est ce qui permet d’accéder aux fonctions de jquery. De ce fait il faut mettre cette inclusion avant le code suivant.

Voyons voir ce que peut donner notre script proprement dit :

<script type="application/javascript">
  $(document).ready(function () {
    //parcours une fois le document à la recherche des élements noeud.
    var noeud = $(".noeud"); 
    //cache toutes les sous liste
    noeud.addClass("plier");
    //determine le comportement lors d'un click
    noeud.click(function (e) {
      //affiche ou cache la sous liste  sur click de l'élément
      $(this).toggleClass("plier");
      //interdit la propagation sur les noeuds parents
      e.stopPropagation();
    });
    //éviter un effet de bord (pliage) lors d'un click sur le lien
    $("a").click(function (e) {
      e.stopPropagation();
    });
    //éviter un effet de bord (pliage) lors d'un click sur une feuille
    $(".feuille").click(function (e) {
      e.stopPropagation();
    });


  });	
</script>

Comme vous pouvez le constater il est court et son action assez simple. Dans un premier temps, il cache l’ensemble des éléments contenu par un noeud. (à l’exception de Internet Explorer qui ne sait pas traiter .plier>li)

Ensuite, le script capture l’évènement click sur chaque noeud. Sur le noeud considéré la classe plier est ajoutée ou enlevée en fonction de sa présence. Le e.stopPropagation(); interdit la propagation de l’évènement sur les noeuds parents.

Et Internet Explorer ?

Pour les tenaces, il existe une solution qui nécessite de mettre un peu plus les mains dans le camboui.

Dans un premier temps, il nous faut détecter Internet Explorer. Les développeurs de jquery ont pensé à nous. Il existe une directive $.browser qui permet de déterminer le navigateur. Pour les curieux (uniquement :), il existe une surcharge plus évoluée (jqbrowser 2)

Pour commencer nous allons modifier la page pour Internet Explorer. Juste avant le code précédemment saisi, nous ajoutons :

$(document).ready(function() {
    if  ($.browser.msie) {
      var noeud = $(".noeud");
      noeud.prepend("<a href=# class=noeud>&nbsp;</a>");
      noeud.children("ul").addClass("pliermsie");
    }
  });

Ce code va donc rajouter un lien nommé déplier devant chaque noeud. Et rajoute une classe pliermsie à l’élément fils qui permettra de le plier. Pour ceci rajoutons dans la CSS :

/* personalisation de l'ancre pour ie */
	#arborescence a.noeud {
		/* ramene l'ancre au dessus de la puce */
		margin-left : -2em;
		/* formate l'anre à la taille de la puce */
		width : 20px;
		height : 20px;
		text-decoration: none ;
		background-image:url(../images/tree/invisible.gif);
	}

	/* éléments terminaux, qui ne possédent pas de sous partie */				
	#arborescence .feuille {
		list-style-image: url(../images/tree/branch.gif);
		background-repeat : repeat-y;
		height : 20px;			
	}

Et enfin nous rajoutons un bout de code pour traiter le (dé)pliage. Nous rajouterons donc ceci après les 2 blocs de code saisis jusqu’à présent.

$(document).ready(function() {
    $(".noeud").click(function () {
      if($.browser.msie) {
        $(this).siblings("ul").toggleClass("pliermsie");
      }
    });
  });

Au final nous avons rajouté des comportements propres à Internet Explorer, sans modifier les éléments de base.

Télécharger

En attendant que contrib accepte à nouveau les documents zippés, vous pouvez charger le menu ici

Conclusion

En mettant tout ceci dans un beau squelette ça devrait le faire, non ?

Vos commentaires

0 | 10

# Le 30 juillet 2009 à 23:00, par ? En réponse à : Menu dépliant (liste, CSS et jquery)

voici un menu dépliant tout en css http://bormat2.free.fr/

Répondre à ce message
# Le 10 avril 2009 à 18:05, par MacGeol En réponse à : Menu dépliant (liste, CSS et jquery)

Bonjour,

Alors en fait je cherchais depuis un moment une solution dépliante, non pas pour le menu de navigation pour la page plan du site.
Et je suis donc tombé sur cette solution qui me convient parfaitement.

Cependant, j’ai un énorme souci : CA NE MARCHE sur aucun des 4 navigateurs que j’ai à ma disposition (Mac et PC).

Pour essayer vous même voici l’adresse de test : ICI

L’erreur donnée par FireBug est :

$(document).ready is not a function $(document).ready(function(){

et celle donnée par le débogueur Safari est :
Value undefined (result of expression $(document).ready) is not object.
Comme si le navigateur ne chargeait pas jQuery. Et pourtant j’ai le plug-in couteau suisse duquel j’utilise la lame BLOCS DEPLIABLES qui fonctionne très bien et ne semble pas être en conflit avec ce petit script puisque que je l’active ou que le désactive l’erreur est la même.

Quelqu’un pourrait donc me dire d’où pourrait provenir cette erreur, et surtout : Comment la résoudre !

MERCI beaucoup d’avance
- # ^ Le 8 juin 2009 à 13:18, par ? En réponse à : Menu dépliant (liste, CSS et jquery)
  
  Moi j’ai le même problème... enfin à peu près :
  
  Erreur : jQuery.easing[this.options.easing || (jQuery.easing.swing ? « swing » : « linear »)] is not a function
  Fichier Source : http://www.missorien.com/prive/javascript/jquery.js
  Ligne : 3324
  
  Si quelqu’un a une idée...
Répondre à ce message
# Le 11 mars 2009 à 16:27, par alexis En réponse à : Menu dépliant (liste, CSS et jquery)

Bonjour,

le lien d’accès à l’archive est cassé. Y-a t’il moyen d’obtenir cette archive tant espérée quelque part ?

Merci pour ce travail !

Amicalement,

Répondre à ce message
# Le 4 février 2009 à 21:25, par Shinji En réponse à : Menu dépliant (liste, CSS et jquery)

He ben super merci pour l’info, je mets çà en bookmark dès demain ^^.

Répondre à ce message
# Le 4 février 2009 à 19:23, par Shinji En réponse à : Menu dépliant (liste, CSS et jquery)

Bonjour, j’ai effectué a peu près le même genre de menu pour le boulot et le stoPropagation me sauve la vie ! Merci beaucoup, savez vous si il y a une doc de tout ces petits éléments e ?
- # ^ Le 4 février 2009 à 21:15, par cam.lafit En réponse à : Menu dépliant (liste, CSS et jquery)
  
  Bonjour
  
  Le e est en fait l’evenement javascript. Du coup on peut trouver le doc par ici, par là ou bien là
  
  J’espere que cela vous aider à meiux comprendre ce petit event
Répondre à ce message
# Le 12 septembre 2008 à 11:47, par Draikhin En réponse à : Menu dépliant (liste, CSS et jquery)

Bonjour,

Félicitation pour cette excellente contrib, très simple.
Pour une meilleure ergonomie comment pourrait-on faire afin que la rubrique (ou sous-rubrique) sur laquelle on est soit automatiquement dépliée lorsque nous y accédons ? Idem pour les articles.
Pour l’instant tout est plié et il faut redéplier à chaque fois. pas pratique pour un internaute ;)

Merci pour tout.

Bonne journée,
Olivier
- # ^ Le 15 septembre 2008 à 16:53, par cam.lafit En réponse à : Menu dépliant (liste, CSS et jquery)
  
  Bonjour
  
  La liste contenant la rubrique en cours se voit affecter la classe oui. Il semble donc possible de faire ce que vous demandez en mettant dans votre css :
  .oui { display : block; }
  Je fais ça de tete et apres une relecture rapide du code proposé.
  Si vous pouvez confirmer ou infirmer cette solution, je pourrais alors mettre à jour la documentation.
Répondre à ce message
# Le 29 juillet 2008 à 14:47, par aire 42 En réponse à : Menu dépliant (liste, CSS et jquery)

Bonjour,

Le lien est de nouveau cassé !!! help please
- # ^ Le 30 juillet 2008 à 15:00, par cam.lafit En réponse à : Menu dépliant (liste, CSS et jquery)
  
  Bonjour
  
  Par mégarde j’ai supprimé le zip sur mon serveur et je n’ai pas de sauvegarde sous le coude.
  
  Toutefois tout est expliqué dans l’article :) Le temps que je refasse le zip et propose une grosse simplification du squelette
Répondre à ce message
# Le 26 mai 2008 à 12:59, par LPG En réponse à : Menu dépliant (liste, CSS et jquery)
Bonjour

comment faire pour que certaines rubriques aient leurs sous rubriques dépliées par défaut et pas d’autres indépendemment de là ou on se trouve sur le site. Je m’explique :

rubrique à déplier 1

rubriqueà déplier 2

rubrique dépliée par défaut 3

sous rubrique1

sous rubrique2

etc...

rubrique4 à déplier

Merci d’avance !!!

LPG
- # ^ Le 26 mai 2008 à 14:39, par cam.lafit En réponse à : Menu dépliant (liste, CSS et jquery)
  Bonjour
  
  Il vous faut :
  
  modifier le squelettes pour identifier chaque element de liste par exemple avec une classe class="rubriqueX", X : l’identifiant de la rubrique
  rajouter dans votre script, une fonction qui surcharge le comportement du script en fonction de la classe rubriqueX
Répondre à ce message
# Le 11 mai 2008 à 16:41, par Renée Picard En réponse à : Problème avec IE

Bonjour

J’ai demandé de l’aide sur la liste pour « déboguer » ce menu lorsqu’il est utilisé avec IE. On me répond que la dernière version du zip de cette page est « déboguée » ce qui n’est pas le cas.

Voir en ligne mon site en construction :

http://www.conceptvirtuel.ca/SansDino/

Merci pour ce menu qui fonctionne très bien autrement que sur IE
- # ^ Le 19 mai 2008 à 21:23, par Etienne Lemieux En réponse à : Problème avec IE
  
  Idem avec moi. En effet, le menu tout seul fonctionne bien, une fois dans les squelettes il est incorrect avec IE. Ce n’est pourtant pas un conflit de CSS, j’ai vérifié. C’est à voir.
Répondre à ce message
# Le 4 avril 2008 à 10:30, par Neru En réponse à : Menu dépliant (liste, CSS et jquery)

Bonjour,

Je trouve ce menu sympa comme tout, il va bien en profondeur jusqu’aux articles.
Seul petit problème, je voudrais qu’il soit en horizontal et non en vertical.
J’ai essayé de modifier le fichier css mais ça ne fonctionne pas comme je le voudrais.
pouvez vous m’éclairer sur ce point SVP ? merci d’avance.

Répondre à ce message

0 | 10

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )

Texte de votre message

Ajouter un document

gif, jpg, png

SPIP-Contrib

Menu dépliant (liste, CSS et jquery)

But

Références

Contraintes de travail

Conséquence

Se faire une idée

Squelette

Styles CSS

Script

Et Internet Explorer ?

Télécharger

Conclusion

Rubriques

Derniers commentaires

Vos commentaires

Répondre à cet article

Ça discute par ici

Transaction : créer des formulaires avec paiement en ligne

Formulaire de contact avancé

Squelette Multi-Saisons

JQuery Masonry

Thélia

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN