[JS] jBar – Créer une barre call to action avec jQuery

jBar est une combinaison d’instructions jQuery permettant de créer des barres call to action qui permettent d’ajouter une zone d’information cachée par défaut (ou pas) avec un ruban incitant l’utilisateur à cliquer dessus pour afficher le contenu de cette dernière.

jbar-barre-call-to-action-jquery

Cette pratique est intéressante pour ajouter des infos sans détourner de prime abord l’attention de vos visiteurs de votre contenu principal. On peut par exemple y afficher le lien vers le téléchargement de la ressource, ou encore les dernières actus sur la mise à jour de votre service …

De base le plugin affiche le ruban en haut à droite (après le load de la page) et cache le contenu. Vous pouvez replier à tout moment la barre en cliquant sur la flèche montante.

Coté utilisation, c’est simple, et ça tient en 7 lignes de code jQuery:

$('.jBar').delay(2000).slideUp(function() {
	$('.jRibbon').show().removeClass('up', 300);
});
$('.jTrigger').click(function(){
	$('.jRibbon').toggleClass('up', 300);
	$('.jBar').slideToggle();
});

Vous l’aurez constaté, il ne s’agit pas vraiment d’un plugin à proprement parlé mais plutôt d’une combinaison simple d’instructions jQuery. C’est léger et fonctionnel ! C’est plutôt l’aspect pratique qui est intéressant, plus que la technique qui est relativement basique.

Source