Sujet Précédent Sujet Suivant

Scriptaculous Menu, effet de combinaison

Résolu
obitskater Messages postés 45 Date d'inscription lundi 29 janvier 2007 Statut Membre Dernière intervention 13 mars 2009 - 16 nov. 2007 à 11:24
obitskater Messages postés 45 Date d'inscription lundi 29 janvier 2007 Statut Membre Dernière intervention 13 mars 2009 - 22 nov. 2007 à 12:54
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

Réponse 1 / 4
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
19 nov. 2007 à 18:52
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)
3
Réponse 2 / 4
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
17 nov. 2007 à 09:22
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)
0
Réponse 3 / 4
obitskater Messages postés 45 Date d'inscription lundi 29 janvier 2007 Statut Membre Dernière intervention 13 mars 2009
17 nov. 2007 à 12:33
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>
0
Réponse 4 / 4
obitskater Messages postés 45 Date d'inscription lundi 29 janvier 2007 Statut Membre Dernière intervention 13 mars 2009
22 nov. 2007 à 12:54
Merci beaucoup, c'était juste le clearTimeout() qui me manquait, et puis l'idée de mettre la variable globale ID_Timer merci bien ;)
0
Rejoignez-nous