Menu dynamique : "onMouseOut"

**Canopus** · 28/06/2008, 19h35

Bonjour,

J'ai un petit soucis avec un script de menu dynamique...

Pour faire disparaitre le div dans lequel se trouve le menu, j'utilise un onMouseOut. Le problème est que ce div contient des balises <a href=..> (des liens quoi..) . Dès que la souris passe sur un lien, le pointeur de la souris n'est plus considéré comme étant sur le div, mais sur le lien.
et donc le menu disparait...

le script qui foire : >> ICI

et le code :

Code Javascript :

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
<script type="text/javascript">

function menuDeroulant (indice,left,top,lien,tableau) {
	this.indice=indice;
	this.id=genericID+indice;
	this.left=left; //position absolue LEFT
	this.top=top; //position absolue TOP
	this.lien=lien;
	this.tableau=tableau;
	this.printCadre=afficheDivMenu;
	this.printMenu=afficheListe;
}

function afficheDivMenu() {
	document.write("<div id=\"",this.id,"\" style=\"position:absolute;left:",this.left,"px;top:",this.top,"px;background:pink;z-index:5;height:500px;\" onMouseOut=\"javascript:clearAll();\"></div>");
}



function afficheListe () {
	document.getElementById(this.id).style.display='block';
	var txtHTML="";
	for (var i=0;i<=this.tableau.length;i=i+2) {
		txtHTML=txtHTML+"<a href=\""+this.tableau[i+1]+"\" style='display:block;z-index:1;background:yellow;'>"+this.tableau[i]+"</a><br />";
	}
	document.getElementById(this.id).innerHTML=txtHTML;
}




function clearAll () {
	var idMenu="";
	for (var i=1;i<5;i++) {
		idMenu=genericID+i;
		if (document.getElementById(idMenu)) {
			document.getElementById(idMenu).style.display='none';
		}
	}
}

var genericID="menu";

var rubriqueSoin=new Array ("Gamme Ultimate","soins.php","Gamme Integral","soins.php?idGamme=2","Gamme Optimal","soins.php?idGamme=3");
var rubriqueAbout=new Array ("Philosophie","#","Recherche & Innovation","#","Carriere","#","Contact","#");
var rubriqueDiagnostic=new Array ("La dermo-cosmétique","#","Diagnostic Peau","#","Diagnostic Solaire","#","Actualités","#");

var menuSoin= new menuDeroulant (1,0,40,'soins.php',rubriqueSoin);
var menuAbout= new menuDeroulant (2,160,40,'diag.php',rubriqueAbout);
var menuDiagnostic= new menuDeroulant (3,230,40,'about.php',rubriqueDiagnostic);


menuSoin.printCadre();
menuAbout.printCadre();
menuDiagnostic.printCadre();

</script>
</head>
<body onClick="javascript:clearAll();">

<a onMouseOver="javascript:menuSoin.printMenu();">Soins</a>
<a onMouseOver="javascript:menuAbout.printMenu();">About</a>
<a onMouseOver="javascript:menuDiagnostic.printMenu();">Diagnostic</a>

</body>

Si quelqu'un a une idée ? J'ai l'impression que c'est surtout un problème de CSS...
Merci.

**Zwiter** · 28/06/2008, 21h37

ajoute un onmouseover a ton div qui provoque l'affichage du menu, comme tes liens : onmouseover=javascript:menuSoin.printMenu();

J'avais le meme probleme :

Code :

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

1
2
3
4
//ca bug avec les liens du menu
<div id="menu" onmouseout="$('menu').hide();"> 
//ca bug plus avec les liens
<div id="menu" onmouseout="$('menu').hide();" onmouseover="$('menu').show();">

Z.

**Canopus** · 28/06/2008, 23h11

Ca ne marche qu'à moitié parce que bizarrement les liens ne sont plus fonctionnels après avoir rajouté le onmouseover dans le div...

Mais j'ai trouvé ce script beaucoup plus simple : http://css.developpez.com/galerie/?p...orizontaux#MH1

Merci pour ta réponse

Menu dynamique : "onMouseOut"

JavaScript

Discussions similaires

Partager

Partager