Header

Partagez | 

signature avec effet accordéon

Message Sujet: signature avec effet accordéon   Mer 6 Avr - 15:31

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

kiri

Doyenne
Bons Points (BP) : 60
Voir le profil de l'utilisateur
~ 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:
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

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

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

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 :

Voici la modif à faire si tu veux mettre des liens dans les onglets :

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




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].

Je soussignée, Kiri,  accepte qu'un directeur reposte le tutoriel "signature avec effet accordéon" tel que je l'ai rédigé.


Dernière édition par kiri le Ven 8 Avr - 8:18, édité 1 fois
Revenir en haut Aller en bas


Présidente LOTR = Ligue Organique des Taupes Ridicules

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 ]

Spoiler:
 

signature avec effet accordéon
Page 1 sur 1
 Sujets similaires
-
» Accordéon non numéroté
» Faire un tableau a onglet avec effet
» Signature avec lien sur image ?
» barre de navigation avec effet au passage de la souris
» [Resolu] Bannière avec lien dans une signature
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens