Bonjour à tous !

A la demande de certains d’entre vous, je vous ai préparé un petit tutoriel qui devrait vous permettre de créer un petit menu de réseaux sociaux scrollable à l’image de celui que l’on peut aujourd’hui trouver sur Mashable.

Ce petit menu qui descend automatiquement que vos déplacement sur la page est en réalité un petit script jQuery relativement simple.

Etape 1 : Ajouter jQuery à votre site

Tout d’abord vous devez ajouter le script jQuery sur votre site, pour cela il vous suffit d’aller télécharger la dernière version ici.

Etape 2 : Créez une Div et Ajoutez un peu de CSS

Afin de créer votre petit menu, il vous faudra créer une Div à laquelle vous attribuerez une class :

<div class="dd_ajax_float"></div>

Ensuite vous allez créer le design de votre menu comme l’exemple ci-dessous :

.dd_ajax_float{
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-30px;
margin-right:10px;
position:relative;
}

Etape 3 : Ajoutez le script

Nous arrivons à l’étape finale ! Il ne vous reste qu’à ajouter le script suivant à votre code :


$(document).ready(function() {

//put content div class, when scroll beyond this y, float it
var $postShare = $('.dd_ajax_float');

if($('.dd_content_wrap').length > 0){

var descripY = parseInt($('.dd_content_wrap').offset().top) - 20;
var pullX = $postShare.css('margin-left');

$(window).scroll(function () {

var scrollY = $(window).scrollTop();
var fixedShare = $postShare.css('position') == 'fixed';

//make sure .post_share exists
if($('.dd_ajax_float').length > 0){

if ( scrollY > descripY &amp;&amp; !fixedShare ) {
$postShare.stop().css({
position: 'fixed',
left: '50%',
top: 20,
marginLeft: -310

});
} else if ( scrollY < descripY &amp;&amp; fixedShare ) {
$postShare.css({
position: 'relative',
left: 0,
top: 0,
marginLeft: pullX
});
}

}

});
}

});

Et voilà c’est terminé ! Bien évidement vous êtes libre de déposer ce code là où vous le souhaitez !

Pour ceux qui ne voudraient pas se prendre trop la tête avec le code, il existe une autre solution pour intégrer ce menu à votre blog WordPress. En effet il existe un plugin appelé « Digg Digg » qui prend en charge cette fonctionnalité !

A vous de voir ce qui vous tente le plus !

Have Fun !

Articles Similaires