Scriptaculous Menu, effet de combinaison [Résolu]

Signaler
Messages postés
45
Date d'inscription
lundi 29 janvier 2007
Statut
Membre
Dernière intervention
13 mars 2009
-
Messages postés
45
Date d'inscription
lundi 29 janvier 2007
Statut
Membre
Dernière intervention
13 mars 2009
-
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>
   
       
             <li>
          [# onmouseover="Effect.Appear('menu1');" onmouseout="Effect.Fade('menu1');">Champ1]
         
            <li>[# champ1.1]</li>
            <li>[# champ1.2]</li>
            <li>[# champ1.3]</li>
         
      </li>
            <li>[# Champ2]</li>
            <li>[# Champ3]</li>
            <li>[# Champ4]</li>
            <li>[# Champ5]</li>
       
   
</html>

Voilà donc si avez des idées sur d'où ça peut venir, ce serait top! Merci d'avance.

4 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour,
Effectivement, une solution serait de passer par un setTimeout, donc petit fichier de test
<html>
<head>
<script type="text/javascript">
var ID_Timer = null;
//---------------------
function Fct_Over( id_){
  clearTimeout( ID_Timer);




// clear le timeout







  var Obj = document.getElementById( id_);
  if( Obj)
    Obj.style.display = "";
}
//--------------------
function Fct_Out( id_){
  var Obj = document.getElementById( id_);
  if( Obj)
    Obj.style.display = "none";
}
</script>
</head>

  <li>
    [# Champ1]
   
      <li>[# champ1.1]</li>
      <li>[# champ1.2]</li>
      <li>[# champ1.3]</li>
   
  </li>

</html>



voilà il te suffit de mettre à ta sauce..



;0)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour,

Sans aller plus loin il me semble qu'il y ait incohérence dans tes appels

[# onmouseout="Effect.Fade('menu1');"</strike>>Champ1]
onmouseover="Effect.Appear('menu1');"</strike> onmouseout="Effect.Fade('menu1');">
  <li>[# champ1.1]</li>
  <li>[# champ1.2]</li>
  <li>[# champ1.3]</li>

en effet dès que tu quittes le lien, mouseout donc, tu hides ce que tu viens d'afficher.

à tester...


;0)
Messages postés
45
Date d'inscription
lundi 29 janvier 2007
Statut
Membre
Dernière intervention
13 mars 2009

Merci pour ta réponse, mais il y a un petit soucis.
En effet si j'enlève le onmouseout="Effect.Fade('menu1');"  dans la balise du menu visible dés le départ, ça aura pour effet que si je passe ma souris seulement sur cet élément et non ensuite sur le sous-menu qui vient de s'afficher, et je passe ensuite sur un autre élément de ma fenêtre, le sous-menu restera affiché alors que je souhaiterai qu'il disparaisse même si on ne va pas dedans avec la souris.<strike>
</strike>
Messages postés
45
Date d'inscription
lundi 29 janvier 2007
Statut
Membre
Dernière intervention
13 mars 2009

Merci beaucoup, c'était juste le clearTimeout() qui me manquait, et puis l'idée de mettre la variable globale ID_Timer merci bien ;)