un menu géré avec javascript sur plusieurs niveaux (logique)
Salut,
Le problème suivant est un problème de logique pur et dur !
L'objectif est d'afficher (display:block) l'arborisation d'un menu progressivement onmouseover sur les éléments de l'arborisation et de les cacher (display:none) selon certaine condition onmouseout.
L'arborisation est la suivante :
Code:
1
2
3
4
5
6
7
8
9
10
11
| menu
menu1
sousmenu1
sousmenu11
soussousmenu11
soussousmenu12
sousmenu12
soussousmenu21
soussousmenu22
sousmenu13
menu2 |
On note que l'on fera un onmouseover sur un menu1 et un sousmenu11 (groupement d'entités) tandis que l'on fera un onmouseout sur un sousmenu1 et un soussousmenu11 (une seule entité)
Code:
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
| <div id="menu">
<div id="menu1" onmouseover="affiche(this,2,'');">
<a href="#" onclick="myfunction();">Ajouter</a>
<div id="sousmenu1" onmouseout="affiche(this,2,'');">
<div id="sousmenu11" onmouseover="affiche(this,2,'');">
<a href="#" onclick="myfunction();">Materiel</a>
<div id="soussousmenu11">
<div>
<a href="#" onclick="myfunction();">Informations du Materiel</a>
<a href="#" onclick="myfunction();">Fichiers du Materiel</a>
<a href="#" onclick="myfunction();">Levageurs du Materiel</a>
</div>
</div>
</div>
</div>
<div>
<a href="#" onclick="myfunction();">Constructeur</a>
</div>
<div>
<a href="#" onclick="myfunction();">Levageur</a>
</div>
<div>
<a href="#" onclick="myfunction();">Type</a>
</div>
<div>
<a href="#" onclick="myfunction();">Localisation</a>
</div>
<div>
<a href="#" onclick="myfunction();">Deplacement</a>
</div>
</div>
<div id="menu2" onmouseover="affiche(this,2,'');">
<a href="#" onclick=":myfunction();">Mofifier</a>
<div id="sousmenu2" onmouseout="affiche(this,2,'');">
<div id="sousmenu21" onmouseover="affiche(this,2,'');">
<a href="#" onclick="myfunction();">Materiel</a>
<div id="soussousmenu21">
<div>
<a href="#" onclick="myfunction();">Informations du Materiel</a>
<a href="#" onclick="myfunction();">Fichiers du Materiel</a>
<a href="#" onclick="myfunction();">Levageurs du Materiel</a>
</div>
</div>
</div>
</div>
</div>
</div> |
pour afficher l'arborescence, le onmouseover est simple on demande d'afficher le sousmenu enfant de celui sur lequel on se trouve:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function affiche(obj,nSM,idSSM) {
var id = obj.id;
var nSSM = 6;
//var j = '';
for(var i=1;i<=nSM;i++) {
for(var j=1;j<=nSSM;j++) {
if(document.getElementById('sousmenu'+i+j)) {
document.getElementById('sousmenu'+i+j).style.display = "none";
}
}
document.getElementById('sousmenu'+i).style.display = "none";
}
if(document.getElementById('sous'+id)) {
document.getElementById('sous'+id).style.display = "block";
}
} |
Maintenant, le problème c'est de rajouter les bonnes conditions sur ce onmouseover pour que lorsqu'il reset tous les block de menu à chaque fois de tel sorte que onmouse out on fait aussi affiche() et il reset tout à display="none"
Le souci maintenant c'est qu'il ne veut plus m'afficher materiel qui contient une sous arborescence et je ne comprend pas pourquoi ??
