Effet au passage de la souris, s'effectuant au click
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Effet au passage de la souris, s'effectuant au click
- 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
Re: Effet au passage de la souris, s'effectuant au click
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") :
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;
}
Re: Effet au passage de la souris, s'effectuant au click
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^^)
(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
Re: Effet au passage de la souris, s'effectuant au click
donc ma recherche est toujours d'acualité^^
Sujets similaires
» Effet spécial au passage de la souris sur un nom
» Retirer l'effet majuscule au passage de la souris
» Effet lumineux sur un lien au passage de la souris
» barre de navigation avec effet au passage de la souris
» Effet sur image lors du survol de la souris
» Retirer l'effet majuscule au passage de la souris
» Effet lumineux sur un lien au passage de la souris
» barre de navigation avec effet au passage de la souris
» Effet sur image lors du survol de la souris
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum