signature avec effet accordéon

Date d'inscription: 24/06/2010

~ Signature avec effet accordéon ~
Coucou,

voici un tutoriel pour embellir vos signatures

Le but

Réaliser une signature avec effet accordéon comme celle-ci

Voyons le code de plus près

Code du début

Code:

<!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" />
<title>Le titre de la page</title>

ça c'est basique, c'est le début de la page html. On précise grâce au "Charset" qu'on accepte les accents (iso-8859-1 = caractère de notre partie de l'europe)

On danse la Java ..

On appelle les différents fichiers jquery. Le jquery permet de donner un coté dynamique à nos pages en jouant avec leur aspect visuel.

Le tout premier :

Code:

Appelle la bibliothèque de base de jquery (celle qui contient toutes les fonctions prédéfinis, comme le .slide, ou le .show qu'on peut utiliser pour les en-têtes par exemple Smile

)

Code:

appellent la fonction qui va vraiment déclencher l'animation de la sign'

Explication du javascript

On s'accroche pour cette partie !!

Voici le décryptage du javascript:

Code:

$("ul li a").hover(

-> Quand tu passes sur un lien de la liste

Code:

function(){

-> ça déclenche une fonction

Code:

$(lastBlock).animate({width: minWidth+"px"},

-> qui fait que le bloc affiché par défaut va voir sa largeur passer de sa taille actuel à la largeur minimum fixé

Code:

{ queue:false, duration:400 });

-> Cette animation va durer 400 milliseconde (duration). Et la seconde animation ne sera déclenchée que lorsque celle-ci sera finie (queue:false)

Code:

$(this).animate({width: maxWidth+"px"},

-> ensuite, le lien sur lequel on a cliqué (this) va lui voir sa largeur passer de la taille actuelle à la taille maximale que l'on a choisi

Code:

{ queue:false, duration:400});

-> Cette animation va durer 400 millisecondes (duration). Et l'étape suivant du javascript ne sera fait que lorsque l'animation sera finie (queue:false)

Code:

lastBlock = this;

-> et le lien sur lequel on a cliqué (this) devient le dernier bloc affiché (celui à partir duquel commencera l'animation si on clique ailleurs)

( merci à Miettes pour les explications )

Un peu de Décoration

On règle l'apparence de notre signature

Code:

On remplit tout ça

Chaque slide va se présenter de la manière suivante :

Code:

<li>
<a>
<img src="/images/onglet3.jpg" />
<p>
<strong>Onglet3</strong><br/>
contenu Onglet3
</p>
</a>
</li>

Code Final

La signature va se présenter sous cette forme la :

Code:

<!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" />
<title>Le titre de la page</title>

<style>

ul{
list-style: none;
margin: 0;
padding: 0;
}

ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}

ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}

#a1{
width: 210px;
}

ul li img{
position: absolute;
border: 3px solid #881212;
}

ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;

$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
</head>
<body>

<ul>
<li>
<a id="a1">
<img src="http://i68.servimg.com/u/f68/15/28/98/12/img-1710.png" />
<p>
<strong>Onglet1</strong><br/>
contenu Onglet1
</p>
</a>
</li>
<li>
<a>
<img src="http://i68.servimg.com/u/f68/15/28/98/12/img-1710.png" />
<p>
<strong>Onglet2</strong><br/>
contenu Onglet2
</p>
</a>
</li>
<li>
<a>
<img src="http://i68.servimg.com/u/f68/15/28/98/12/img-1710.png" />
<p>
<strong>Onglet3</strong><br/>
contenu Onglet3
</p>
</a>
</li>
</ul>

</body>

</html>

vous pouvez bien sur personnaliser tout ceci en vous aidant de ces petits [Trucs] Code CSS

Modifier les images, les tailles etc Smile

Bon courage et si vous avez des soucis, n'hésitez pas great

Tuto réalisé par ©kiri avec surtout des explications de Miettes pour Sop

EDIT Miettes :

Ma sign est actuellement faite grâce à ce tuto (à 2 ou 3 détails prêts). En effet, les liens ne fonctionnent pas si vous laissez le code tel quel. Bah oui, comment mettre un lien dans un lien. Une petite modif est donc à faire :

1/ Transformer les liens dans le html

Pour cela, remplacez ça (ne regardez qu'au niveau des "a" des liens ^^ )

Code:

<li>
<a>
<img src="/images/onglet3.jpg" />
<p>
<strong>Onglet3</strong><br/>
contenu Onglet3
</p>
</a>
</li>

par ça

Code:

<li>
<div>
<img src="/images/onglet3.jpg" />
<p>
<strong>Onglet3</strong><br/>
contenu Onglet3
</p>
</div>
</li>

sans oublier celui là :

Code:

<li>
<a id="a1">
<img src="http://i68.servimg.com/u/f68/15/28/98/12/img-1710.png" />
<p>
<strong>Onglet1</strong><br/>
contenu Onglet1
</p>
</a>
</li>

à remplacer par :

Code:

<li>
<div id="a1">
<img src="http://i68.servimg.com/u/f68/15/28/98/12/img-1710.png" />
<p>
<strong>Onglet1</strong><br/>
contenu Onglet1
</p>
</div>
</li>

2/ Je modifie le javascript

Là on ne déclanche plus sur les "a" mais sur les "div". Donc on remplace ça :

Code:

$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}

par ça :

Code:

$("ul li div").click(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}

3/ N'oublions pas le css

Ici, on va modifier ceci

Code:

ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}

par ça

Code:

ul li div{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}

Et hop ! Vous pouvez mettre des liens dans cette sign' Smile

Cool hein ? Very Happy

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]

_________________

J’ai toujours rêvé que mon ordinateur soit aussi simple à utiliser que mon téléphone.
Ce rêve est devenu réalité : je ne comprends plus comment utiliser mon téléphone [ by Bjarne Stroustrup ]

Mes cadeaux de Noel : Merci Clo

Merci Volt