Effet au passage de la souris, s'effectuant au click

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Effet au passage de la souris, s'effectuant au click

Message par Ayael le Sam 19 Nov 2011 - 10:15

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>menu jQuery spécial partenaires</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/rejquery-132.js"></script>

<style>

div#conteneur {
position: fixed; 
margin: 0px;     
padding: 0px;
top: 50px;       
left: 0px;   
list-style: none;   
z-index:9999;     
}

div#conteneur ul {
width: 410px;
margin-bottom: 4px;
margin-left: -40px;
/margin-left: 0px;
background-color: transparent;
}



div#conteneur ul li{
background-color:#6E0000;
display:block; 
width: 400px;       
height: 139px;           
background-repeat:no-repeat; 
background-position:center center;
border:1px solid #000;         
-moz-box-shadow: 1px 1px 3px #000; 
-webkit-box-shadow: 1px 1px 3px #000; 
box-shadow: 1px 1px 3px #000;   

}

div#conteneur li .lien_bas{
background-color: #555555;
border:1px solid #000;
font-family: Arial;
font-style: italic;
font-size: 10px;

vertical-align: center;
margin-top: 2px;
/margin-top: 7px;
}

.lien_bas a{
text-decoration: none;
color: #fff !important;
outline: none;
}

.cred {
margin-right:-5px;
}


</style>

    </head>

    <body>

    <div id="conteneur">         
   
      <ul>
        <li>
  <table><tr><td>        >> Idée originale d'Ayael<br>
>> Design version 3  par Ayael <br>
<center><strong>Optimisé pour firefox & Google chrome</center></strong>
>> Codage par Ayael avec l'aide de Kaëlle. <br>
>> Formulaires et texte explicatif rédigé par Albar & Ayael<br>
<div style="text-align:right; color:#8F8D8D;"><a href="http://terramystica.forums-rpg.com/t308-credits-copyright" target="_blank" >Voir les crédits complet ?</a></div></td><td><div class="cred"><img src="http://i46.servimg.com/u/f46/16/36/06/79/cradit10.png"/></div></td></tr></table>
        </div>
        </li>         
      </ul>   
   
     
    </div>       
<script type="text/javascript">
            $(function() {
                $('#conteneur li').stop().animate({'marginLeft':'-365px'},1000);
                $('#conteneur > ul').click(
                    function () {
                        $('li',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                      $('li',$(this)).stop().animate({'marginLeft':'-365px'},200);
                    }
                );
            });
        </script> 

  </body>
</html>

J'ai installé ce code, sauf qu'il est programmé pour s'ouvrir au passage de la souris, j'aimerai donc que se soit au click, j'ai remplacer "hover" par click
Code:
    $('#conteneur > ul').click(

Ca marche très bien, sauf que je voudrais que lorsqu'on retire notre souris de la zone ça se referme automatiquement.
Pouvez vous m'aidez?

Ah et comme vous pouvez le constater c'est fait sur une page html, est ce quelqu'un sait comment je peux faire pour l'afficher sur l'index de mon forume en bas à droite?


Dernière édition par Ayael le Jeu 24 Nov 2011 - 18:07, édité 1 fois

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet au passage de la souris, s'effectuant au click

Message par Final-Blonde le Sam 19 Nov 2011 - 10:49

Salut Ayael,

Pour ce qui est du script, je ne saurais te répondre vu que je commence tout juste à apprendre.

Pour l'avoir que sur l'index :
- Mettre le script sur les pages de gestion des JS > Cocher "index"
> Placer le HTML dans le message d'accueil
> Le template overall_header (après l'ouverture de la balise "body")
> Le template overall_footer (avant entre des fermetures de "div" ou de "table")
Les > sont deschoix

Pour le positionnement, c'est dans le CSS (attention tu as un slash en rouge devant un "margin") :
Spoiler:
div#conteneur {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}

div#conteneur ul {
width: 410px;
margin-bottom: 4px;
margin-left: -40px;
/margin-left: 0px;
background-color: transparent;
}



div#conteneur ul li{
background-color:#6E0000;
display:block;
width: 400px;
height: 139px;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #000;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;

}

div#conteneur li .lien_bas{
background-color: #555555;
border:1px solid #000;
font-family: Arial;
font-style: italic;
font-size: 10px;

vertical-align: center;
margin-top: 2px;
/margin-top: 7px;
}

.lien_bas a{
text-decoration: none;
color: #fff !important;
outline: none;
}

.cred {
margin-right:-5px;
}

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet au passage de la souris, s'effectuant au click

Message par Ayael le Sam 19 Nov 2011 - 13:46

merci à toi (décidément^^) j'attends donc là réponse pour le click^^

(Dans la page d'accueil, ça ne fonctionne pas sur Google Chrome^^)


Dernière édition par Ayael le Sam 19 Nov 2011 - 17:58, édité 1 fois

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet au passage de la souris, s'effectuant au click

Message par Ayael le Sam 19 Nov 2011 - 16:30

donc ma recherche est toujours d'acualité^^

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet au passage de la souris, s'effectuant au click

Message par Ayael le Dim 20 Nov 2011 - 8:06

up

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet au passage de la souris, s'effectuant au click

Message par Ayael le Dim 20 Nov 2011 - 17:50

Up

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet au passage de la souris, s'effectuant au click

Message par Ayael le Lun 21 Nov 2011 - 18:00

up

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet au passage de la souris, s'effectuant au click

Message par Ayael le Mar 22 Nov 2011 - 19:23

up

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet au passage de la souris, s'effectuant au click

Message par Ayael le Mer 23 Nov 2011 - 16:05

up!

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://terramystica.forums-rpg.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum