Menu arborescent javascript

**silenceW** · 05/03/2008, 11h06

Bonjour,

J'essaie de réaliser un menu arborescent en javascript qui aurait par exemple la forme suivante :

- Lien 1
- Lien 1.1
- Lien 1.2
- Lien 2
- Lien 2.1
- 2.1.1
- 2.1.2
- Lien 2.2
etc.

Son fonctionnement : Un clique sur le lien 1 ferait apparaitre les liens 1.1 et 1.2 tout en ouvrant la page du lien 1. Il en serait de même pour les autres liens.
C'est la différence avec les autres menus arborescent que j'ai pu trouver sur le net qui lorsqu'on clique sur le lien 1, la seule action qui se produit est l'apparition des liens 1.1 et 1.2. Pas de nouvelles pages.
J'ai d'ailleurs quelques contraintes : ce menu est décrit dans une page php qui est inclus dans toutes les autres pages de mon site. Et je ne peux pas utiliser de fichier xml.

J'aimerais donc l'aide de quelq'un pour me dire comment afficher un sous-menu tout en changeant de page.

J'espère que j'ai pas été trop confus.
Merci d'avance pour votre aide.

**d-Rek** · 05/03/2008, 11h21

Faut faire joujou avec des boites.. enfin des div.

Structure HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="menu">
	<div id="lien1" onclick="show('lien1');"><a href="#1">Lien 1</a></div>
	<div id="lien2" onclick="show('lien2');"><a href="#2">Lien 2</a>
		<div id="lien2_1" style="display:none; padding-left:10px;"><a href="#2_1">Lien 2 - 1</a></div>
		<div id="lien2_2" style="display:none; padding-left:10px;"><a href="#2_2">Lien 2 - 2</a></div>
	</div>
 
</div>

Pour le code JS, tu balances à ta fonction id de la div et tu bosses avec les enfants que tu met en display:block ou none...

**silenceW** · 05/03/2008, 11h53

Merci.

Je vais tester ça.

**silenceW** · 05/03/2008, 13h58

Je viens de passer un peu de temps dessus et j'arrive bien à faire mon arborescence, mais dès que je remplace les #1 par des noms de pages, je vois le menu apparaitre puis disparaitre lorsque je change de page.
Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function show(id)
{
nbr = document.getElementsByTagName("div" );
   for (i = 1; i < nbr.length; i++) 
   {
       if ((document.getElementById(id+"_"+i).style.display)=="none") {
           document.getElementById(id+"_"+i).style.display="block";
       } else {
           document.getElementById(id+"_"+i).style.display="none";
       }
   }
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="menu">
	<div id="lien1" onclick="show('lien1');"><a href="#1">Lien 1</a></div>
	<div id="lien2" onclick="show('lien2');"><a href="#2">Lien 2</a>
		<div id="lien2_1" style="display:none; padding-left:10px;"><a href="#2_1">Lien 2 - 1</a></div>
			<div id="lien2_1_1" style="display:none; padding-left:20px;"><a href="#2_1">Lien 2 - 1 - 1</a></div>
			<div id="lien2_1_2" style="display:none; padding-left:20px;"><a href="#2_1">Lien 2 - 1 - 2</a></div>
		<div id="lien2_2" style="display:none; padding-left:10px;"><a href="#2_2">Lien 2 - 2</a></div>
</div>

**_Mac_** · 05/03/2008, 14h24

Bah c'est normal : une nouvelle page est affichée et donc le menu est rechargé depuis le début. En gros, l'état de ton menu n'est pas conservé d'une page à l'autre. Donc soit tu te contente de ce comportement, soit tu vois pour utiliser un cookie par exemple pour persister l'état de ton menu d'une page à l'autre.

**silenceW** · 05/03/2008, 17h34

Je ne suis pas doué du tout avec les cookies.

Alors j'ai fait ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
<script type="text/javascript">
function setCookie(c_name, value, expiredays) {
 
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
 
}
 
function getCookie(c_name)
{
 if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1; 
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    } 
  }
return "";
 
}
 
function show(id)
{
	nbr = document.getElementsByTagName("div" );
	for (i = 1; i < nbr.length; i++) 
	{
		if ((document.getElementById(id+"_"+i).style.display)=="none") 
		{
			document.getElementById(id+"_"+i).style.display="block";
                                       setCookie("tree",document.getElementById("menu").innerHTML,10);
 
	    }
		else
		{
			document.getElementById(id+"_"+i).style.display="none";
       }
	}
 
}
setCookie("tree",document.getElementById("menu").innerHTML,10);
</script>
 
 
 
<script type="text/javascript">
var printCookie=getCookie("tree");
document.writeln(printCookie);
</script>
 
<div id="menu">
	<div id="lien1" onclick="show('lien1');"><a href="#1">Lien 1</a></div>
	<div id="lien2" onclick="show('lien2');"><a href="#2">Lien 2</a>
		<div id="lien2_1" style="display:none; padding-left:10px;"><a href="#3">Lien 2 - 1</a></div>
		<div id="lien2_2" style="display:none; padding-left:10px;"><a href="#4">Lien 2 - 2</a></div>
	</div>
</div>

J'ai 2 menus mais c'est ok, je sais pourquoi. Par contre, lorsque je clique sur lien 2 puis reviens sur le lien1, le sous menu du lien 2 qui était apparu ne veut pas disparaitre.
Qu'est-ce qui me manque ?

**_Mac_** · 05/03/2008, 18h07

Je dirais qu'il faut que tu appelles ta fonction setCookie à la fin de show, de manière à ce qu'elle soit mise à jour à chaque modification de l'affichage du menu.

**silenceW** · 06/03/2008, 10h30

Quand je le mets à la fin de show(), le sous-menu disparait dans la nouvelle page.

**_Mac_** · 06/03/2008, 10h47

Autre solution : mettre ton appel à setCookie dans l'attribut onunload de <body> : ça appelera ta fonction au changement de page uniquement. En espérant que le navigateur accepte le cookie à ce moment-là...

**_Mac_** · 06/03/2008, 10h47

Envoyé par _Mac_

Autre solution : mettre ton appel à setCookie dans l'attribut onunload de <body> : ça appelera ta fonction au changement de page uniquement, ce qui sauvera le dernier état de ton menu. En espérant que le navigateur accepte le cookie à ce moment-là...

**silenceW** · 06/03/2008, 11h18

Ca ne semble pas fonctionner non plus.

J'abandonne mon idée. Je pense que je vais faire un autre type de menu.

Merci de votre aide.

Menu arborescent javascript

JavaScript

Discussions similaires

Partager

Partager