Bonjour à tous,
j'ai un petit soucis sur un site internet que je souhaites créer. Je dois faire un menu en bas qui ouvre une grande div. Pour le moment, je pense avoir trouvé une petite solution mais qui reste toujours en réflexion car j'ai désormais un nouveau problème.
Je crée, pour le moment, une image qui, lorsque je passe ma souris dessus, je lance un javascript qui ouvre la balise div initialement en caché. Mais dès que je rajoute des éléments dans cette balise et que je passe ma souris, la balise div se referme (c'est triste
, je sais). Apparemment, le javascript détecte que je quitte la balise mais ce n'est pas le cas, savez-vous comment je peux palier au problème ? Voici mon code
Merci pour votre aide.
Modifié par Javascripteur (24 May 2011 - 10:02)
j'ai un petit soucis sur un site internet que je souhaites créer. Je dois faire un menu en bas qui ouvre une grande div. Pour le moment, je pense avoir trouvé une petite solution mais qui reste toujours en réflexion car j'ai désormais un nouveau problème.
Je crée, pour le moment, une image qui, lorsque je passe ma souris dessus, je lance un javascript qui ouvre la balise div initialement en caché. Mais dès que je rajoute des éléments dans cette balise et que je passe ma souris, la balise div se referme (c'est triste
, je sais). Apparemment, le javascript détecte que je quitte la balise mais ce n'est pas le cas, savez-vous comment je peux palier au problème ? Voici mon code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animated Drop Down Menu with jQuery</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsfiles/jquery.js"></script>
<script type="text/javascript" src="jsfiles/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img.menu_head").mouseover(function(){
$('div.menu_body').slideDown("normal");
$('div.menu_body').show();
});
$("div.menu_body").mouseout(function(){
$('div.menu_body').fadeOut("normal");
$('div.menu_body').hide();
})
});
</script>
</head>
<body>
<div class="container">
<img src="images/navigate.png" width="184" height="32" class="menu_head" />
<div class="menu_body">
<p>
<a class="element1" href="#" style="text-decoration:none; color:#fff; ">C'est du contenu</a>
</p>
</div>
</div>
</body>
</html>
Merci pour votre aide.
Modifié par Javascripteur (24 May 2011 - 10:02)
Wouhou, c'est exactement ça ! 
