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

2 participants

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 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

Ayael
*****

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

http://valsedupouvoir.forumactif.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 kheino 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:
kheino

kheino
Membre habitué

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

http://www.siteduzero.com/
kheino 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 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

Ayael
*****

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

http://valsedupouvoir.forumactif.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 Sam 19 Nov 2011 - 16:30

donc ma recherche est toujours d'acualité^^
Ayael

Ayael
*****

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

http://valsedupouvoir.forumactif.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 Dim 20 Nov 2011 - 8:06

up
Ayael

Ayael
*****

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

http://valsedupouvoir.forumactif.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 Dim 20 Nov 2011 - 17:50

Up
Ayael

Ayael
*****

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

http://valsedupouvoir.forumactif.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 Lun 21 Nov 2011 - 18:00

up
Ayael

Ayael
*****

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

http://valsedupouvoir.forumactif.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 Mar 22 Nov 2011 - 19:23

up
Ayael

Ayael
*****

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

http://valsedupouvoir.forumactif.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 Mer 23 Nov 2011 - 16:05

up!
Ayael

Ayael
*****

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

http://valsedupouvoir.forumactif.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

- Sujets similaires

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