Discussion :

[polothentik]

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 :

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

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 :

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
<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 :

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
 
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 ??

[polothentik]

Bon j'ai modifié le code Javascript gérant le menu...

Maintenant, les soussousmenu s'affichent bien. Seulement si on sort du block parent (sousmenu) pour sortir vers la page ou pour se diriger vers le block enfant (soussousmenu) le menu disparait.

Je souhaiterais que s'il existe des soussousmenu(11, 12) rattachés au sousmenu11, un temps d'attente de peu de temps soit accordé pour permettre à l'utilisateur de se diriger vers les soussousmenu s'il le souhaite OU le menu disparait si sa souris est hors du menu

De même, le soussousmenu s'affiche même lorsque la souris n'est pas positionné sur le boutton auquel il se rattache... J'aimerais qu'il disparaisse si la souris est détecté onmouseover un autre bouton du même block

Code Javascript : (à l'arrache)

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
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";
		}
	}

[SpaceFrog]

setTimeout ?