Dans ce tutoriel, nous allons voir comment mettre en place un élément interactif dans la page. L'objectif ici est de créer un bloc caché qui deviendra visible par l'action de l'utilisateur. Nous prendrons pour l'exemple des liens sociaux que nous ne souhaitons pas afficher de prime abord.

Ce tutoriel utilise jQuery, bibliothèque JavaScript disponible ici. Pour la mise en forme CSS3 sous IE8 et antérieur, utilisez le hack PIE.

Voir la démo | Télécharger la source

Création de la template HTML :


Dans un premier temps, nous allons créer un bloc conteneur et un bloc contenu qui contiendra les informations de notre page :


Nous allons rapidement styliser notre page :

Plaçons d'abord l'appel à la feuille de style CSS dans notre page :

<link rel="stylesheet" type="text/css" href="styles.css" />

Nous initialisons les marges de tous les éléments à 0.

* {
padding:0;
margin:0;
}

Nous allons centrer le bloc conteneur dans la page et mettre un fond :

html, body {
height:100%;
}
body {
background:url(images/fond-rp.jpg) repeat;
font-size:.9em;
min-height:400px;
}
#global {
font-family:arial;
position:relative;
top:50%;
height:400px;
width:600px;
margin:-200px auto 0 auto;
}

Un peu de mise en forme du contenu :

#content {
position:relative;
margin-top:10px;
}
#content-cadre {
position:inherit;
z-index:1;
height:260px;
width:560px;
padding:20px;
-moz-box-shadow: -1px 5px 5px #2e2e2e;
-webkit-box-shadow: -1px 5px 5px #2e2e2e;
box-shadow: -1px 5px 5px #2e2e2e;
background:#eeeeee url(images/content-pict.png) bottom left no-repeat;
}
#content-cadre h2 {
font-size:1.8em;
}
#content-cadre p {
margin-top:40px;
font-size:1.2em;
font-weight:bolder;
}

Nous devrions arriver à ce résultat :

images/uploads/screen-tuto-social-comp-1.jpg

Nous allons ensuite intégrer notre bloc social dans le bloc conteneur "content". Notre bloc social contient deux blocs contenus, un bloc pour le bouton d'activation et un bloc comprenant le contenu à afficher :

<div id="content-social">				
<div id="content-social-btn">
<img id="content-social-fleche" src="images/title-pict.png" alt="" />
</div>
<div id="content-social-cadre">
<a id="facebook" class="content-social-lien" href="#"></a>
<a id="twitter" class="content-social-lien" href="#"></a>
<a id="linkedin" class="content-social-lien" href="#"></a>
<a id="rss" class="content-social-lien" href="#"></a>
</div>
</div>

Mettons en place un peu de style :

Nous positionnons le bloc en haut à droite du conteneur, caché sous le bloc de contenu.

#content-social {
position:absolute;
top:0;
right:0;
z-index:0;
margin-top:10px;
}
#content-social-cadre {
background-color:#dddddd;
padding:16px 16px 0 13px;
height:264px;
-moz-box-shadow: -1px 5px 5px #2e2e2e;
-webkit-box-shadow: -1px 5px 5px #2e2e2e;
box-shadow: -1px 5px 5px #2e2e2e;
border-radius:0 15px 15px 0;
}
#content-social-btn {
position:absolute;
top:0;
right:-30px;
margin-top:20px;
background-color:#dddddd;
height:30px;
width:30px;
border-radius:0 15px 15px 0;
cursor: pointer;
}
#content-social-btn:hover {
-moz-box-shadow: 3px 0px 2px #2e2e2e;
-webkit-box-shadow: 3px 0px 2px #2e2e2e;
box-shadow: 3px 0px 2px #2e2e2e;
}
#content-social-btn img {
max-width:12px;
margin:6px 0 0 6px;
}
a.content-social-lien {
display:block;
height:62px;
width:62px;
opacity:.8;
}
a.content-social-lien:hover {
opacity:1;
}
a#facebook {
background-image:url(images/facebook.png);
}
a#twitter {
background-image:url(images/twitter.png);
}
a#linkedin {
background-image:url(images/linkedin.png);
}
a#rss {
background-image:url(images/rss.png);
}

Nous devrions arriver ici à ce résultat :

images/uploads/screen-tuto-social-comp-2.jpg

Mise place des scripts :

Maintenant que nous avons mis en place notre corps html et stylisé le tout, attaquons nous à la partie jQuery. Première étape, appeler la bibliothèque et notre script :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

Création des fonctions JavaScript

Nous utilisons 4 fonctions : une pour détecter le statut du bloc (affiché ou caché) et appeler les fonctions voulues, une pour afficher et cacher le bloc et une pour changer l'image du bouton cliquable en fin d'animation.
Nous placerons nos fonctions dans ce code afin de les rendre utilisables comme tout autre fonction jQuery :

(function($){
/** Nos fonctions **/
})(jQuery);

Fonction détection du statut :

Il nous faut tout d'abord détecter le statut de notre bloc, à savoir visible ou non. En fonction de ce statut, on appelle la fonction voulue. L'objectif étant de reproduire la fonction .toggle() de jQuery, mais en exécutant une animation personnalisée.

$.fn.socialToogle = function(img_b,img_a){
var boutton=$(this);
var largeur=boutton.parent().width();
(this.data('status'))?
this.socialHide(boutton,img_b):
this.socialShow(largeur,boutton,img_a);
return this;
}

Fonctions affichage et cache :

Ces deux fonctions restent relativement simples, l'une remet le bloc à sa position initiale, l'autre fait une translation sur la droite, de la largeur du bloc. Une fois l'animation finie, on change l'image du bouton via la fonction dédiée que nous verrons après. En fin de fonction, on change le statut.

$.fn.socialShow = function(lg,btn,img){
this.parent().stop().animate({right:-lg},500,function(){
btn.socialSwitchImg(img);
});
this.data('status',true);
return this;
}
$.fn.socialHide = function(btn,img){
this.parent().stop().animate({right:0},500,function(){
btn.socialSwitchImg(img);
});
this.data('status',false);
return this;
}

Fonction du changement d'image :

$.fn.socialSwitchImg = function(img){
this.children('img').fadeOut(100,function(){
$(this).attr('src',img);
$(this).fadeIn(400);
});
}

Il nous faut maintenant appeler la fonction "socialToogle" sur l'évènement "click" du bouton, avec en paramètre les images (on et off) :

$(document).ready(function(){
$('#content-social-btn').click(function(){
$(this).socialToogle('images/title-pict.png','images/social-fleche-g.png');
});
});

Il ne reste plus qu'à tester !

images/uploads/screen-tuto-social-comp-3.jpg

Voilà, j'espère que ce tutoriel vous a intéressé, n'hésitez pas à fouiller dans le code et à l'adapter sur vos projets.

Et si vous le souhaitez, faites nous part de vos commentaires dans l'espace prévu à cet effet ;)