☞ Menu dépliant pour les rubriques

Accueil Boite à Outils Menu dépliant pour les rubriques

Publié le : 26 janvier 2005

Imprimer cet article

Auteur :
Alain Sichel †

Menu dépliant pour les rubriques

Masquer ou afficher des éléments de vos pages

Il peut être utile de masquer certaines parties d’une page, notamment lorsque l’on présente des rubriques, toutes n’ont pas besoin d’être visibles quand on consulte la page, surtout quand on a un petit écran !

Cet article propose un JavaScript permettant de cacher ou de rendre visible un calque. Il est compatible avec une désactivation de JavaScript : dans ce cas, le calque reste visible, contrairement à beaucoup de scripts où le calque est caché par défaut.

Sommaire

Le script

Voici le code à mettre dans le <head> des pages [1] :

<script language="JavaScript" type="text/javascript">
<!--
var vis = new Array();
function MM_findObj(n, d) { //v4.0
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v3.0
 var i,p,v,obj,args=MM_showHideLayers.arguments;
 for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
   if (obj.style) { obj=obj.style; v=(v=='show')?'block':(v='hide')?'none':v; }
   obj.display=v; }
}
function swap_couche(couche){
        if (vis[couche] == 'show'){
                MM_swapImage('triangle'+couche,'','/images/voir.gif?'+couche,1)
                MM_showHideLayers('Layer'+couche,'','hide');
                vis[couche] = 'hide';
        } else {
                MM_swapImage('triangle'+couche,'','/images/cacher.gif?'+couche,1)
                MM_showHideLayers('Layer'+couche,'','show');
                vis[couche] = 'show';
        }
}
//-->
</script>

La fonction qui fait le changement visible/invisible est swap_couche(couche), elle est inspirée d’articles de SpipAge [2] et a besoin pour fonctionner des autres fonctions MM_findObj(n, d) MM_swapImage() et MM_showHideLayers() [3].

Le calque à masquer

Voici un exemple pour le calque d’une rubrique d’aide :

<div onclick="javascript:swap_couche('Aide')"><img name='triangleAide' src='/images/vide9.gif' border="0" alt="Déplier/Replier" /> Aide :</div><script language='JavaScript' type="text/javascript">

        <!--

        vis['Aide'] = 'hide';

        //-->

        </script><div id='LayerAide' onclick="javascript:swap_couche('Aide')">

Contenu à masquer ou à montrer

</div>

On peut avoir autant de calques à masquer qu’on le siouhaite dans sa page, chacun pourra être masqué ou affiché indépendamment des autres. Il faut simplement veiller à remplacer Aide par un autre nom pour que cela marche. Voici un deuxième exemple pour bien comprendre le changement de nom, pour le calque d’une rubrique Documentation :

<div onclick="javascript:swap_couche('Doc')"><img name='triangleDoc' src='/images/vide9.gif' border="0" alt="Déplier/Replier" /> Aide :</div><script language='JavaScript' type="text/javascript">

        <!--

        vis['Doc'] = 'hide';

        //-->

        </script><div id='LayerDoc' onclick="javascript:swap_couche('Doc')">

Contenu à masquer ou à montrer

</div>

Dans ces exemples, c’est un clic sur le calque (onclick=) qui rend celui-ci visible ou invisible, mais on peut remplacer par un autre évènement, double clic ondblclick= ou survol onmouseover=.

L’originalité du script

La particularité de ce script est d’utiliser une image transparente vide9.gif avant le titre de la rubrique. Ainsi, on ne voit rien... tant que le script n’est pas en action. Elle est remplacée par ou si JavaScipt est activé, selon que la rubrique est visible ou masquée. Ceux qui ont désactivé JavaScript ne voient pas ces images qui correspondent au script en action, et ils peuvent voir le menu qui est déplié.

Le script est activé au chargement de la page en remplaçant la balise <body> par <body onload="swap_couche('Aide');">. Si on utilise le script pour plusieurs menus, il faut que chacun soit activé : <body onload="swap_couche('Aide');swap_couche('Doc');"> [4].

Ainsi, au chargement de la page le menus sont dépliés. Si on veut au contraire que le menu soit replié, il suffit de le charger une deuxième fois pour le rendre invisible :

<body onload="swap_couche('Aide');swap_couche('Aide');">

Exemple d’utilisation

Voici sur le site du CYES un exemple de l’utilisation de ce script pour l’affichage des rubriques dans la colonne gauche des pages :

Les deux menus dépliés	Menu Aide replié

[1] Ou dans une feuille de style externe appellée par le code suivant mis dans le <head> :

<script language="JavaScript" type="text/javascript" src="/script.js"></script>

[2] Voir les articles Menu dépliant 1, 2 et 3.

[3] Ces fonctions sont reprises du code JavaScript proposé par Dreamweaver.

[4] Voici une actuce pour ceux qui utilisent des modèles pour leurs pages (personnellement j’utilisent des modèles créés par Dreamweaver), car il n’est alors pas facile de modifier <body onload="...;"> pour chaque page :

pour la balise <body>, j’écris dans le modèle <body onload="cacher_voir();">,

dans le head de chaque page, dans le champ  après le title, j’écris :

<script language="JavaScript" type="text/javascript">

<!--

function cacher_voir() {

                swap_couche('Doc');

                swap_couche('Aide');

        } 

//-->

</script>

il suffit de rajouter la fonction swap_couche() pour chaque calque utilisé dans la page.

Document joint à l'article

Images voir.gif cacher.gif et vide9.gif

Imprimer cet article

Réactions à l'article :

Menu dépliant pour les rubriques
17 juin 2006, par FRED

Bonjour, c’est exactement ce que je cherchais, un truc qui ressemeble à ce qu’on voit dans l’interface privée de spip. Merci.

Donc, tout marche... SAUF (car il fallait bien un sauf) l’affichage des images. Je n’ai droit qu’à la vide9.gif que le calque soit plié ou déplié, ce qui n’est pas très intuitif pour l’internaute sauf à lui préciser par écrit qu’il doit cliquer.

Auriez-vous une idée de ce qui peut se passer ?

Merci d’avance
- Menu dépliant pour les rubriques
  5 avril 2009, par Informatique La Baule
  
  Script parfait ! Mais j’ai également un problème d’affichage des images, une idée ?
  
  Informatique La Baule
- Menu dépliant pour les rubriques
  18 juin 2009, par bormat
  
  bha pas besoins d(utliser du javascript pour un menu dépliant sur ce site on explique comment faire avec rien que du html et du css http://bormat2.free.fr/
  Site : menu dépliant
Menu dépliant pour les rubriques
21 avril 2006, par Le Tigre

Bravo et merci pour votre script. Une petite question : j’aimerais l’utiliser pour afficher une image sur la page d’accueil, image qu’on peut faire disparaître ensuite en cliquant / et réapparaître.

Est-il possible, selon vous, que la première fois qu’on arrive sur la page, l’image soit visible (=dépliée), et que si on va sur une autre page du site et qu’on revient à l’accueil, cette fois l’image ne soit plus visible (=repliée) ?

J’imagine que c’est possible avec des cookies, mais sinon ?

Site : http://www.le-tigre.net
- Menu dépliant pour les rubriques
  22 avril 2006, par Alain Sichel
  
  Une information peut être transmise dans une variable par un formulaire (post ou get), une session ou un cookie. Dans le cas présent, le cookie me parait être le plus simple.
  
  Si vous voulez que l’image de la page d’accueil ne soit visible que la première fois que cette page est chargée dans une journée, il suffit d’un cookie, créé au chargement de cette page pour une durée de 24h : avant de déplier l’image, le script vérifie l’absence de cookie, si le cookie existe, l’image reste cachée.
  
  Evidemment, pour que cela marche, il faut que le visiteur accepte les cookies, sinon l’image sera toujours visible.
  - Menu dépliant pour les rubriques
    26 avril 2006, par Le Tigre
    
    Bon alors merci, j’utilise un système de cookie, et ça marche presque parfaitement. J’ai juste un tout petit souci.
    
    Par défaut, je veux que l’image soit cachée : donc j’utilise votre astuce avec deux fois l’appel du script via body onload.
    
    Ensuite s’il n’y a pas de cookie (ie la personne n’est pas venue depuis moins de 12 heures), j’appelle l’image avec un onload.
    
    Voici le code pour le cookie :
    
    <script language="JavaScript"> // On place la donnée du cookie dans une variable var deja = lire_cookie("bibliopopjour"); // Si elle n'existe pas (le cookie est absent ou expiré) if (deja == null) { // On ouvre l'image onload="swap_couche('Aide');" // Et on place le cookie enregistrer(1); } // Sinon (le cookie est valable), on ne fait rien </script>
    
    et enfin j’ai votre code, que j’ai un peu adapté :
    
    <div onclick="javascript:swap_couche('Aide')"><img name='triangleAide' src='pix.gif' border="0" alt="Déplier/Replier" /><span class="txtart"> Cliquez ici pour afficher/cacher la une</div><script language='JavaScript' type="text/javascript">  </script><div id='LayerAide' onclick="javascript:swap_couche('Aide')"> <span class="titregrand">En kiosques cette semaine:</span> <br><img src="img/une_grande.jpg" border="1" alt="Le Tigre, hebdomadaire curieux"> </div>
    
    Le problème que j’ai, c’est que, par défaut (ie première visite), il n’y a pas le petit [-], mais juste l’image vide (chez moi : pix.gif). Il faut cliquer une première fois sur l’image pour faire apparaître le [-] et c’est lors du 2° clic seulement que l’image se cache.
    
    Auriez-vous une idée de ce qui provoque ça ? J’imagine que c’est l’appel via le onload dans le script du cookie, mais ?
    
    Merci beaucoup.
Menu dépliant pour les rubriques
21 mars 2006, par Prom

C’est exactement ce que je cherchais pour dissimuler mon menu d’aide dans le coin droit de mon travail de fin de session, un petit outil superformant. Maintenant, je sais ce qu’est un "menu dépliant".

Prom

Site : Étudiant
Menu dépliant pour les rubriques
10 mars 2006, par scan

merci pour ce script qui fonctionne parfaitement avec un minimum de code
Menu dépliant pour les rubriques
18 novembre 2005, par argolance

Cela marche parfaitement moyennant quelques heures de bidouille pour personnaliser sans corrompre ! C’est le lot des petits amateurs... Merci ! Une chose cependant : Comment faire en sorte que le menu reste déroulé une fois que l’on a cliqué sur l’un des liens. En effet, à chaque fois, le menu se replie automatiquement, obligeant l’utilisateur à cliquer de nouveau sur l’icone + ! Merci de votre réponse.
- Menu dépliant pour les rubriques
  18 novembre 2005, par Alain Sichel
  
  Pour cela vous pouvez remplacer le clic simple onclick par un autre évènement comme ondblclick (double clic) pour replier/déplier le menu (vous pouvez voir le résultat sur le site du CYES).
  - Menu dépliant pour les rubriques
    18 novembre 2005, par argolance
    
    Merci beaucoup pour la célérité de votre réponse ! Ça marche, c’est parfait !
    - Menu dépliant pour les rubriques
      9 mai 2009, par max15
      
      Merci également pour ce script qui m’a déjà servi plusieurs fois.
      
      Informatique La Baule