modifier une arborescence dynamique [Fait]

**discusaigon** · 29/12/2008, 10h41

Bonjour,

je préviens d'avance, je suis débutant en html, programation, ...

je travail sur un site qui a été décrit en détail il y a quelques années sous la forme d'un document en html, avec un menu dynamique en javascript.

voila, ce boulot a été fait par un prestataire informaticien externe, et j'aimerai comprendre comment fonctionne la programmation de ce projet html pour pouvoir mettre à jour le document moi même sans passer par l'extérieur.

Pour la modification interne des pages html cela ne me pose pas de problème.

Par contre, j'aimerai pouvoir modifier la structure du site c'est à dire :

modifier l'arborescence dynamique de manière à pointer vers de nouvelles pages html.

J'ai essayé de creuser mais j'ai un peu du mal à me mettre dedans :

voici une extrait de l'aide du site html :

• Modification lourde (ajout / suppression / renommage de pages) :
· Un outil d'édition HTML ainsi que la connaissance du javascript sont nécessaires (cf. nota).

pour l'outil d'édition html, j'ai dreamweaver et je sais utiliser les fonctions de bases donc c'est bon par contre il me manque une petite connaissance du javascript.

Il y a un fichier script.js à la racine du site avec pas mal d'indications sur la définition des fonctions.

exemple :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
// * * * F O N C T I O N S   G E N E R A L E S * * * 
 
 
function NoRightButton(){    // Inhibe le menu contextuel (bouton droit souris)
   if (event.button==2){
     alert("Utilisez le bouton gauche");
   }
}
 
function DoOver(color) {
    oldcolor=window.event.srcElement.style.color
    window.event.srcElement.style.color=color
}
 
function DoOut() {
	window.event.srcElement.style.color=oldcolor;
}
 
function SomOver(oItem) {
 
	if(document.readyState != "complete") return;
	oItem.className = 'Som2';
	window.event.cancelBubble = true;
}
 
function SomOut(oItem) {
 
	if(document.readyState != "complete") return;
	oItem.className = 'Som1';
	window.event.cancelBubble = true;
}
 
 
// * * * FONCTION MAJ : Mise A Jour des variables de navigation * * *
 
function MAJ(navig,prec,info,suiv,Somm,NomRub) {     // Mise A Jour des variables :
 
parent.parent.nav=navig;                  //   bandeau de navigation
                                          //    1 : pour placer une page dans le cadre 'principal'
                                          //   12 : pour placer une page précédente dans le cadre 'principal'
                                          //        et une page suivante dans le cadre 'Fiche'
                                          //    2 : pour placer une page dans le cadre 'Fiche'
                                          //   21 : pour placer une page précédente dans le cadre 'Fiche'
                                          //        et une page suivante dans le cadre 'principal'
  if (navig==0){                   //   (si pas de bandeau : navig = 0)
	parent.parent.FramesGene.rows="17,*,0";
  }
  else{
        parent.parent.FramesGene.rows="17,*,29";
  }
 
parent.parent.pagep=prec;                 //   nom de la page précédente
  if (prec==null){                 //   (si première page : pas de page précédente)
	parent.parent.bas_droite.IMPP.style.display='none';
  }
  else{
        parent.parent.bas_droite.IMPP.style.display='';
  }
parent.parent.pages=suiv;                 //   nom de la page suivante
  if (suiv==null){                 //   (si dernière page : pas de page suivante)
	parent.parent.bas_droite.IMPS.style.display='none';
  }
  else{
        parent.parent.bas_droite.IMPS.style.display='';
  }
parent.parent.info=info;                  //   numéro de la page en cours
parent.parent.bas_droite.NumPage.innerText=parent.parent.info;
 
if (Somm=='S'){                    //   (si page précédente est un sommaire : changement d'image)
	Url = window.parent.parent.frames['sommaire'].location.href;        // calcul de la racine du site
	chemin = Url.substr(0,Url.lastIndexOf("/"))+"/images/Sommaire.gif"; // 
	parent.parent.bas_droite.IMPP.src=chemin;
  }
  else{
	Url = window.parent.parent.frames['sommaire'].location.href;        // calcul de la racine du site
	chemin = Url.substr(0,Url.lastIndexOf("/"))+"/images/PagePrec.gif"; // 
	parent.parent.bas_droite.IMPP.src=chemin;
  }
 
if (NomRub!=null){
	var i;                     // Mise à jour des couleurs des rubriques du bandeau haut
	var bouton = parent.parent.bandeau.document.all.tags("a");
    for (i=0; i<bouton.length; i++)
    {
            bouton(i).style.color ="#FFFFFF";
    }
    parent.parent.bandeau.eval(NomRub).style.color ="#00FF00";
    oldcolor="#00FF00";
  }
 
}

et aussi un script à l'intérieur de la page html du menu dynamique :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<script>
//<!--
var ver = 0;
var oldcolor;
var rubrique;
 
function DoOver(color) {
	oldcolor=window.event.srcElement.style.color
   window.event.srcElement.style.color=color;
}
 
function DoOut() {
    window.event.srcElement.style.color=oldcolor;
}
 
function CloseAllDiv() {      // 28/01/98  cache toutes les sous-divisions de la page
    var i;
    var div = document.all.tags("DIV");
 
    for (i=0; i<div.length; i++) {
 
        if (div(i).className == "Outline")
            div(i).style.display = "none";
    }
}
 
function ExpandCollapse()    //affiche la sous-division et ferme les autres
{
    var targetElement, parentDiv;
    i = window.event.srcElement.sourceIndex; 
   // is this link already nested in a DIV?
    for (parentDiv = window.event.srcElement.parentElement; parentDiv!=null; parentDiv = parentDiv.parentElement) { 
		 if (parentDiv.tagName=="DIV") {
            j=1;
            break;
        }
        if (parentDiv.tagName=="BODY") {
           for (j=1; (i+j) < document.all.length && document.all(i+j).tagName=="BR"; j++);
            j+=2;
            break;
        }
    }
    if (parentDiv==null) {
       for (j=1; (i+j) < document.all.length && document.all(i+j).tagName=="BR"; j++);
        j+=2;
        parentDiv = document.body;
    	}
 
    //make sure element is not off page (test for last link)
    if ( ((i+j)<document.all.length)  && (document.all(i+j).tagName == "DIV")) {
 
        if ( parentDiv.contains(document.all(i+j))==true 
            &&  (document.all(i+j).className == "Outline") ) {
            targetElement = document.all(i+j);
            if (targetElement.style.display == "none")
					{
					CloseAllDiv();
					targetElement.style.display = "";
					}
            else {
                	targetElement.style.display = "none";
            		}
        }
    }
 
    window.event.cancelBubble = true;
}
 
 
function Titrage(montitre,monmodule)   //  28/01/98  Met à jour le titre et les variables qui vont avec (module,rubrique)
{												// et affiche la page principe de base du module dans la fenetre principal
	var i;
	var oldmodule;   
	var bouton = document.all.tags("a");
    for (i=0; i<bouton.length; i++) {
            bouton(i).style.color ="#FFFFFF";
    }
	window.event.srcElement.style.color ="#00FF00";
	oldcolor="#00FF00";
	with (window.top.frames['titre'])
	{	
		oldmodule=document.all.MyText.Module;			// on récupère le nom de l'ancien module avant de le changer
		document.all.MyText.innerText = montitre;
		document.all.MyText.Module = monmodule;
		rubrique=document.all.MyText.Rubrique;
	}
	with (window.top.frames['bandeau']) 
	{	
		if (monmodule == 'securite')	
		{
		ChgRub('AccSecur');				//si on clique sur 'securité' , alors on force la rubrique à 'pbase2'
		}
		else
			if ((oldmodule == 'securite')||(oldmodule == 'aide'))		
			{
			ChgRub('Loc');			// si l'ancien module était 'securité' ou 'aide' alors on force le nouveau à 'pbase'
			}
			else
			{
			ChgRub('nochange');		// si l'ancien module n'était pas 'securité' alors on ne change pas la rubrique
			}
		}
}
//-->
</script>

Voila est ce que vous pouvez m'aider à partir de ces éléments ?

Merci d'avance.

**RomainVALERI** · 29/12/2008, 16h58

Deux remarques de premier abord :

- ce code est très daté ^^ il y a un certain nombre de choses qui ne s'écrivent plus de cette façon et vont probablement nécessiter une mise à jour.

- même sans le tester, je peux te dire que ce code ne fonctionnera (éventuellement) que sur IE. Entre autres, parce qu'il fait appel à plusieurs endroits à document.all qui n'est reconnu que par IE, mais aussi pour la propriété className, la méthode cancelBubble() de l'objet event, etc.

Pour ces deux raisons, il est à mon avis plus que raisonnable d'envisager au plus vite :

- soit une réécriture complète par tes soins,
- soit la récupération d'un code plus récent et portable auprès de sources contributives (comme... les cours et tutos de developpez.com ? ^^).

Quel que soit ton choix, n'hésite pas à revenir demander de l'aide en cours de route si tu coinces...

**discusaigon** · 29/12/2008, 21h57

Eh bien merci pour ce coup d'œil éclairé !!

au moins je ne perdrai pas mon temps à essayer de comprendre ce code obsolète.

Je suis disposé à effectuer une refonte de la structure de ce site html.

Mon objectif est donc de réaliser une arborescence dynamique verticale à gauche puis d'appeler des pages html à partir de cette arborescence.

J'ai cru comprendre que le langage javascript était le plus adapté pour ce genre de projet.

Par contre je veux bien être orienté vers la technique la plus appropriée (javascript ou autre et les tutos qui correspondent).

Merci.

Merci d'avance.

**discusaigon** · 29/12/2008, 23h10

en fait en parcourant les pages de tuto je m'aperçois qu'il existe beaucoup de techniques variées.

Il faut que je prenne le temps de voir tout ce qui existe pour créer un menu avec au moins trois niveau et quelle technique sera la plus adaptées pour mon projet.

pour l'instant j'ai donc vu :

javascript : à voir
menu déroulant avec les ccs http://css.developpez.com/tutoriels/menu-deroulant/ , ça parait simple à réaliser, l'inconvénient est que cela ne soit pas supporté par internet explorer.

si vous avez d'autres pistes, je cherche plutôt une technique "universelle" acceptée par n'importe quel navigateur de base.

**RomainVALERI** · 30/12/2008, 12h54

Si tu recherches quelque chose d'universel, sache que javascript est un choix technologique qui va exclure beaucoup plus de visiteurs potentiels qu'une bonne mise en page CSS. Peut-être y a-t-il moyen d'adapter l'excellent exemple que tu donnes, quitte à accepter quelques concessions en termes de rendu pour être portable.

L'idéal serait, selon le principe de dégradation élégante, de réaliser un menu ne recourrant pas à javascript, et d'ajouter, pour les visiteurs acceptant javascript, toutes les fonctionnalités supplémentaires souhaitées...

**Bovino** · 30/12/2008, 13h01

Tu as été voir par ici ?

**discusaigon** · 31/12/2008, 16h09

Et bien merci pour tout ces liens,

je ne pouvais pas demander mieux pour m'aider à prendre une décision.

Bon réveillon à vous.

**discusaigon** · 24/01/2009, 22h32

Re-bonjour,

J'ai finalement sélectionné ce menu :

http://css.developpez.com/galerie/?p...-verticaux#MV2

pour tout ce qui est mise en page CSS, je me le suis approprié en le modifiant selon mon gout.

Par contre j'aimerai y apporter un niveau supplémentaire pour avoir au total trois niveaux de menus tout en conservant la fonction de cacher toute la partie de l'arborescence qui n'est pas sélectionnée (sauf le menu de premier niveau).

Je rappelle le code javascript :

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
function afficheMenu(obj){
 
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
 
	/*****************************************************/
	/**	on cache tous les sous-menus pour n'afficher    **/
	/** que celui dont le menu correspondant est cliqué **/
	/** où 4 correspond au nombre de sous-menus         **/
	/*****************************************************/
	for(var i = 1; i <= 4; i++){
		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
			document.getElementById('sousmenu' + i).style.display = "none";
		}
	}
 
	if(sousMenu){
		//alert(sousMenu.style.display);
		if(sousMenu.style.display == "block"){
			sousMenu.style.display = "none";
		}
		else{
			sousMenu.style.display = "block";
		}
	}
 
}

Et le code HTML (à l'interieur des balises body) :

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
<div id="menu">
	<div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Menu 1</a>
	</div>
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.4</a>
		</div>
	</div>
 
	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">Menu 2</a>
	</div>
	<div id="sousmenu2" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.3</a>
		</div>
	</div>
 
	<div class="menu" id="menu3" onclick="afficheMenu(this)">
		<a href="#">Menu 3</a>
	</div>
 
	<div class="menu" id="menu4" onclick="afficheMenu(this)">
		<a href="#">Menu 4</a>
	</div>
	<div id="sousmenu4" style="display:none">
		<div class="sousmenu">
			<a href="#" >Sous-Menu 4.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.4</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.5</a>
		</div>
	</div>
</div>

J'avoue que je suis toujours aussi perdu dans ce code javascript,

J'imagine qu'il faudrait faire quelque chose dans l'idée de faire une boucle dans la boucle mais je suis bien incapable de le réaliser. Je vous remercie par avance si vous pouvez m'aider.

Cordialement

**discusaigon** · 28/01/2009, 20h50

J'ai donc fait quelques essais mais je n'y arrive toujours pas.

j'ai ajouté ue fonction "soumenu" pour gerer les titres de niveau 3 mais j'ai un soucis, je n'arrive pas à afficher le niveau 3 en cliquant sur le niveau 2.

Je vous livre mon essai :

code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <title>Menu déroulant vertical sur clic</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" href="style.css" type="text/css" />
	 <script type="text/javascript" src="functions.js"></script>
</head>
<body>
 
<div id="menu">
 
	<div class="menu" id="menu1" onclick="afficheMenu(this)">		<a href="page_blanche.html" target="mainFrame">Menu 1</a>		</div>
    <div id="sousmenu1" onclick="afficheSousMenu(this)"   >
		<div class="sousmenu">  <a href="page_1-1.html" target="mainFrame">Sous-Menu 1.1</a> </div>
		    <div id="soussousmenu1"   style="display:none"    >
				<div class="soussousmenu">  <a href="page_1-1-1.html" target="mainFrame">Sous-Menu 1.1.1</a> </div>
				<div class="soussousmenu">  <a href="page_1-1-2.html" target="mainFrame">Sous-Menu 1.1.2</a> </div>
				<div class="soussousmenu">  <a href="page_1-1-3.html" target="mainFrame">Sous-Menu 1.1.3</a> </div>
			</div>			
		<div class="sousmenu"> <a href="page_1-2.html" target="mainFrame">Sous-Menu 1.2</a>  
		    <div id="soussousmenu2" style="display:none" >
				<div class="soussousmenu">  <a href="page_1-2-1.html" target="mainFrame">Sous-Menu 1.2.1</a> </div>
				<div class="soussousmenu">  <a href="page_1-2-2.html" target="mainFrame">Sous-Menu 1.2.2</a> </div>
			</div>			
		</div>
		<div class="sousmenu"> <a href="page_1-3.html" target="mainFrame">Sous-Menu 1.3</a> </div>
		<div class="sousmenu"> <a href="page_1-4.html" target="mainFrame">Sous-Menu 1.4</a> </div>
	</div>
 
	<div class="menu" id="menu2" onclick="afficheMenu(this)"> 	<a href="page_blanche.html"  target="mainFrame">Menu 2</a>   </div>
    <div id="sousmenu2" onclick="afficheSousMenu(this)"  >
		<div class="sousmenu"> <a href="page_2-1.html" target="mainFrame">Sous-Menu 2.1</a> </div>
		<div class="sousmenu"> <a href="page_2-2.html" target="mainFrame">Sous-Menu 2.2</a> </div>
		<div class="sousmenu"> <a href="page_2-3.html" target="mainFrame">Sous-Menu 2.3</a> </div>
	</div>
 
	<div class="menu" id="menu3" onclick="afficheMenu(this)"> <a href="page_blanche.html" target="mainFrame">Menu 3</a> </div>
 
	<div class="menu" id="menu4" onclick="afficheMenu(this)"> <a href="page_blanche.html" target="mainFrame">Menu 4</a> </div>
	<div id="sousmenu4" style="display:none">  
		<div class="sousmenu"> <a href="page_4-1.html" target="mainFrame" >Sous-Menu 4.1</a> 	</div>
		<div class="sousmenu"> <a href="page_4-2.html" target="mainFrame">Sous-Menu 4.2</a> 	</div>
		<div class="sousmenu"> <a href="page_4-3.html" target="mainFrame">Sous-Menu 4.3</a> 	</div>
		<div class="sousmenu"> <a href="page_4-4.html" target="mainFrame">Sous-Menu 4.4</a> 	</div>
		<div class="sousmenu"> <a href="page_4-5.html" target="mainFrame">Sous-Menu 4.5</a> 	</div>
	</div>
 
</div>
 
</body>
</html>

code javascript :

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
function afficheMenu(obj){
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
	/*****************************************************/
	/**	on ajoute ces variables pour gerer le niveau    **/
	/** supplementaire de sous sous menus               **/
	/*****************************************************/
 
	/*****************************************************/
	/**	on cache tous les sous-menus pour n'afficher    **/
	/** que celui dont le menu correspondant est cliqué **/
	/** où 4 correspond au nombre de sous-menus         **/
	/*****************************************************/
	for(var i = 1; i <= 4; i++){
		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
			document.getElementById('sousmenu' + i).style.display = "none";
		}
	}
 
	if(sousMenu){
		//alert(sousMenu.style.display);
		if(sousMenu.style.display == "block"){
			sousMenu.style.display = "none";
		}
		else{
			sousMenu.style.display = "block";
		}
	}
}
 
	/******************************************************/
	/**	NOUVELLE FONCTION POUR LES sous-sous-menus       **/
	/**	on cache tous les sous-sous-menus pour n'afficher**/
	/** que celui dont le menu correspondant est cliqué  **/
	/** où 4 correspond au nombre de sous-sous-menus     **/
	/******************************************************/
function afficheSousMenu(obj){
	var idSousMenu     = obj.id;
	var idSousSousMenu = 'soussous' + idMenu;
	var soussousMenu   = document.getElementById(idSousSousMenu);
 
	for(var i = 1; i <= 4; i++){
		if(document.getElementById('soussousmenu' + i) && document.getElementById('soussousmenu' + i) != soussousMenu){
			document.getElementById('soussousmenu' + i).style.display = "none";
		}
	}
	if(soussousMenu){
		//alert(soussousMenu.style.display);
				if(soussousMenu.style.display == "block"){
				soussousMenu.style.display = "none";
				}
			else{
				soussousMenu.style.display = "block";
			}
	}	
}

voila, si vous avez des idées pour m'orienter, ça m'aiderait pas mal.
merci

**discusaigon** · 31/01/2009, 23h39

Je suis encore là avec mon menu

J'ai refais un test en repartant du menu de base et en ajoutant une fonction afficheMenubis au lieu de affichesousmenu pour éviter les confusions d'ID entre les sousmenu de la première et de la deuxième fonction.

J'arrive à un menu qui commence à ressembler à quelque chose mais j'ai encore un soucis :

Je peux afficher le menu de niveau 2 et celui de niveau 3 donc c'est pas mal.

par contre mon menu de niveau 3 ne s'affiche pas en repoussant le reste de l'arborescence vers le bas mais il se superpose au menu de niveau 2

voila donc ou j'en suis actuellement :

http://discusaigon.free.fr/ESSAIS_SI...20de%20menu2/#

je vous redonne les codes actuels :

html :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <title>Menu déroulant vertical sur clic</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" href="style.css" type="text/css" />
	 <script type="text/javascript" src="functions.js"></script>
</head>
<body>
 
<div id="menu">
	<div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Menu 1</a>
	</div>
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu" id="menubis1" onclick="afficheMenubis(this)" >
			<a href="#">Sous-Menu 1.1</a>
							<div id="sousmenubis1"   style="display:none"   >
							<div class="sousmenubis">  <a href="#" >Sous-Menu 1.1.1</a> </div>
							<div class="sousmenubis">  <a href="#" >Sous-Menu 1.1.2</a> </div>
							<div class="sousmenubis">  <a href="#" >Sous-Menu 1.1.3</a> </div>
							</div>		
		</div>
		<div class="sousmenu" id="menubis2" onclick="afficheMenubis(this)">
			<a href="#">Sous-Menu 1.2</a>
							<div id="sousmenubis2"   style="display:none"  >
							<div class="sousmenubis">  <a href="#" >Sous-Menu 1.2.1</a> </div>
							<div class="sousmenubis">  <a href="#" >Sous-Menu 1.2.2</a> </div>
							<div class="sousmenubis">  <a href="#" >Sous-Menu 1.2.3</a> </div>
							</div>		
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.4</a>
		</div>
	</div>
 
	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">Menu 2</a>
	</div>
	<div id="sousmenu2" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.3</a>
		</div>
	</div>
 
	<div class="menu" id="menu3" onclick="afficheMenu(this)">
		<a href="#">Menu 3</a>
	</div>
 
	<div class="menu" id="menu4" onclick="afficheMenu(this)">
		<a href="#">Menu 4</a>
	</div>
	<div id="sousmenu4" style="display:none">
		<div class="sousmenu">
			<a href="#" >Sous-Menu 4.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.4</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.5</a>
		</div>
	</div>
</div>
 
</body>
</html>

javascript :

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
function afficheMenu(obj){
 
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
 
	/*****************************************************/
	/**	on cache tous les sous-menus pour n'afficher    **/
	/** que celui dont le menu correspondant est cliqué **/
	/** où 4 correspond au nombre de sous-menus         **/
	/*****************************************************/
	for(var i = 1; i <= 4; i++){
		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
			document.getElementById('sousmenu' + i).style.display = "none";
		}
	}
 
	if(sousMenu){
		//alert(sousMenu.style.display);
		if(sousMenu.style.display == "block"){
			sousMenu.style.display = "none";
		}
		else{
			sousMenu.style.display = "block";
		}
	}
 
}
	/******************************************************/
	/**	NOUVELLE FONCTION POUR LES sous-sous-menus       **/
	/**	on cache tous les sous-sous-menus pour n'afficher**/
	/** que celui dont le menu correspondant est cliqué  **/
	/** où 4 correspond au nombre de sous-sous-menus     **/
	/******************************************************/
function afficheMenubis(obj){
	var idMenubis     = obj.id;
	var idSousMenubis = 'sous' + idMenubis;
	var sousMenubis   = document.getElementById(idSousMenubis);
 
	for(var i = 1; i <= 4; i++){
		if(document.getElementById('sousmenubis' + i) && document.getElementById('sousmenubis' + i) != sousMenubis){
			document.getElementById('sousmenubis' + i).style.display = "none";
		}
	}
 
	if(sousMenubis){
		//alert(sousMenubis.style.display);
		if(sousMenubis.style.display == "block"){
			sousMenubis.style.display = "none";
		}
		else{
			sousMenubis.style.display = "block";
		}
	}
 
}

style CSS :

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
64
65
66
67
68
*{
	margin:0;
	padding:0;
}
#menu{
	width:150px;
	margin:20px auto 0 auto;
}
.menu, .sousmenu, .sousmenubis{
	text-align:center;
}
.menu{
	height:18px;
	width:150px;
	padding:2px 0;
	background:#404040;
	color:#fff;
}
.sousmenu{
	height:18px;
	width:150px;
	padding:1px 0;
	background:#808080;
	color:#fff;
}
.sousmenubis{
	height:18px;
	width:150px;
	padding:1px 0;
	background:#0033FF;
	color:#fff;
}
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#404040;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#808080;
}
.sousmenubis a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:8px;
	font-weight:bold;
	text-decoration:none;
	background:#808080;
}
.menu a:hover, .sousmenu a:hover, .sousmenubis a:hover, .menu a:active, .sousmenu a:active, .sousmenubis a:active, .menu a:focus, .sousmenu a:focus, .sousmenubis a:focus{
	background:#ca0008;
}

voila,

toute aide est toujours la bienvenue ;-)

Merci d'avance.

**discusaigon** · 01/02/2009, 14h13

MAJ :

je viens de m'apercevoir que mon menu fonctionne presque correctement sous IE ( le seul problème est que quand on clique sur un niveau 3 le niveau 3 disparait) mais sous Firefox il donne des sous menus de niveaux 3 qui sont superposés avec le sous menu 2.

je ne comprend pas pourquoi car j'ai utilisé exactement la même fonction et les mêmes classes CSS que le menu de base.

**discusaigon** · 16/02/2009, 09h47

Bonjour,

est ce vous pourriez me donner un petit coup de pouce sur mon dernier avancement (post #10) ?

à savoir, est ce que je suis sur une bonne piste, est ce que je doit enrichir la première fonction ou bien est ce que j'ai bien fait de créer une deuxième fonction ? ou bien est ce que je dois repartir de 0 ?

Merci

**discusaigon** · 23/02/2009, 08h40

Bonjour,

finalement je laisse tomber et me contente d'un menu à deux niveau,*

en fait je remplace le troisième niveau par un menu en bandeau horizontal sur la page qui est appelée.

modifier une arborescence dynamique [Fait]

JavaScript

Discussions similaires

Partager

Partager