[Résolu] Menu Jquery

06 mars 2012, 17:19

Bonjour à tous,
après le PHP, je me lance maintenant au développement à l'aide de Jquery.

N'ayant pas encore la logique ... je me trouve confronté à un petit problème (surement simple à résoudre), concernant un menu déroulant fait avec Jquery.
Mon problème est que lorsque je survole le sous menu, celui-ci disparait pour réaparraitre ...
J'ai essayé plein de truc mais ça ne marche pas ....

Merci d'avance !!

Code : Tout sélectionner

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<SCRIPT type=text/javascript>
$(document).ready(function()
{
$("#parent").mouseover(function(){$('#test').fadeIn();});
$("#parent").contents().add('#parent').mouseout(function(){$('#test').fadeOut();});
});
</SCRIPT>
</head>
<body>
<div id="parent" style="background-color:red; display:inline; float:left; width:70; height:20; position:absolute;">
<div id="test" style="background-color:blue; width:70; height:200; top:20; position:absolute; display:none;"></div></div>

<div style="background-color:green; width:70; display:inline; height:20; float:left;"></div>
</body>
</html>

06 mars 2012, 22:35

Salut,

Essaye (attentivement) la démo à la fin de la page de manuel jquery sur l'évènement mouseover, et tu devrais comprendre tout seul ton problème et sa solution

http://api.jquery.com/mouseover/

06 mars 2012, 23:33

Merci beaucoup !!
J'avais pourtant consulté cette page avant de poster mais j'avoue que ça ne m'avais pas attiré l'oeil .. encore plus en anglais !

Je laisse mon code pour les personnes novices qui auraient rencontré le même soucis !

Code : Tout sélectionner

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<SCRIPT type=text/javascript>
$(document).ready(function()
{
$("#parent").mouseenter(function(){$('#test').fadeIn();}).mouseleave(function(){$('#test').fadeOut();});
});
</SCRIPT>
</head>
<body>
<div id="parent" style="background-color:red; display:inline; float:left; width:70; height:20; position:absolute;">
<div id="test" style="background-color:blue; width:70; height:200; top:20; position:absolute; display:none;"></div></div>

<div style="background-color:green; width:70; display:inline; height:20; float:left;"></div>
</body>
</html>

[Résolu] Menu Jquery

Qui est en ligne