Bonjour à tous. Je suis en train de développer un site web, et j'en suis au départ à créer mon menu.
Et pour un peu de style je souhaite intégrer des effets bien sympa.
Pour cela, j'ai intégré la dernière bibliothèque de
Scriptaculous et je souhaite appliquer des effets tels que
Effect.Appear() ou encore
Effect.fade(). Je m'explique: je voudrais que lors du passage de la souris sur un élément du menu, le sous menu apparaît avec l'effet souhaité (cité précédemment). Donc pour cela je met les évènement onmouseover et onmouseout pour gérer tout bien ces évènements.
Mais j'ai un gros problème. En effet lorsque je passe ma souris sur le 1° élèment de mon menu, le sous menu s'affiche correctement, mais dès que je met ma souris sur les élèments du sous-menu, il disparaît. Alors que je pense avoir géré correctement les évènements.
Voici mon code pour que vous compreniez mieux:
<!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=iso-8859-1" />
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/lib/prototype.js"></script>
<script type="text/javascript" src="js/src/scriptaculous.js"></script>
<title>test</title>
<style type="text/css">
<!--
@import url(style/index.css);
#ecranPrincipal div{float:left;width:32%;margin-left:1%;}
#ecranPrincipal div div{background:#399;width:100%;margin-top:10px; border:1px solid #333;height:125px;}
-->
</style>
</head>
<body>
<ul id="menu">
<li>
<a href="#" title="champ1" onmouseover="Effect.Appear('menu1');" onmouseout="Effect.Fade('menu1');">Champ1</a>
<ul style="display:none;" id="menu1" onmouseover="Effect.Appear('menu1');" onmouseout="Effect.Fade('menu1');">
<li><a href="#">champ1.1</a></li>
<li><a href="#">champ1.2</a></li>
<li><a href="#">champ1.3</a></li>
</ul>
</li>
<li><a href="#" title="champ2">Champ2</a></li>
<li><a href="#" title="champ3">Champ3</a></li>
<li><a href="#" title="champ4">Champ4</a></li>
<li><a href="#" title="champ5">Champ5</a></li>
</ul>
</body>
</html>Voilà donc si avez des idées sur d'où ça peut venir, ce serait top!
Merci d'avance.