Panier déroulant avec Jquery Easing Plugin

Ven. 12 Avr. 2013

Bonjour à tous,

Aujourd'hui je vais vous présenter un plugin Jquery fort sympathique. Ce plugin n'est autre que Easing. Grâce à ce plugin Jquery nous allons pouvoir masquer le panier de votre boutique en ligne, et le faire apparaître uniquement au passage de la souris, avec une petite animation que l'on aura pris le soin de choisir parmi celle qui sont proposés par le plugin Easing.

L'inspiration de ce tutoriel me vient en partie de ce menu réalisé en Jquery

La structure HTML et CSS du panier déroulant

HTML

<div id="ensemble">
<ul id="container">
<li class="yellow">
<p>
<a href="#" title="Cliquez ici pour gérer votre panier">Mon panier</a>
</p>
<p>
<iframe allowtransparency="true" class="panier" frameborder="no" height="120" marginheight="0" marginwidth="0" name="framemod" noresize="noresize" scrolling="auto" src="http://www.wifeo.com/tool/iframe/module_blog.php?idmod=1&amp;nba=3&amp;n_s=ordi-tips" width="250"></iframe>
</p>
<p>
<a class="commander" href="#">Commander</a></p>
</li>
</ul>
</div>

Cette partie est à coller à l'endroit même ou vous souhaitez faire apparaître le panier.

Note : L'iframe ( module exportable ) dans le code présente mes articles les plus vus ce mois ci. Il faudra donc la remplacer par la votre en prennant soin d'ajouter class:"panier" au code source.

Et voici les styles CSS qui l'accompagne :



#ensemble {
        position:relative;
        text-align:center;
        width:285px;
        margin: 0 auto;
}

/* structure du panier coulissant */

#container {
        margin:0;
        padding:0;
        position:absolute;
        z-index:1;
}
#container li {
        width:280px;
        height:38px;  /* Largeur et hauteur initial */
        color:#191919;
        text-align:center;
        overflow:hidden;  /* à ne pas retirer ! */
        border-radius: 20px 0px;
}

/* Styles des liens et du texte */

#container a {
        color:#000;
        text-decoration:none;
}

#container p {
        padding:0px 5px;
        color:#000;
}

/* Les styles pour l'iframe du panier */

.panier {
        background:#fff;
        margin:10px 3px 5px 0px;
        border-radius: 10px 0px;
        border: 1px solid #fff;
}

/* Les styles pour le bouton commander */

.commander {
        background: #fff;
        padding:10px;
        text-transform: uppercase;
        border-radius: 10px 0px;
}

/*classes de couleur pour panier déroulant*/

.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}
.white{background:#F3F3F3;}            

Si vous êtes en design libre :

Cette partie est à copier dans la partie css de votre template.

Si vous êtes en design préfabriqué :

Copier le code ci dessus et coller le dans une balise < style > dans la partie < head > de votre page.

Exemple :

<style type="text/css" />


Le code css ci dessus.


</style>

La partie jquery du panier déroulant

Pour commencer nous allons importer la bibliothèque Jquery en copiant ceci dans la partie head de votre page :

SCRIPT

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

Maintenant nous allons faire appel au plugin Jquery Easing et là, il y a 2 solutions.

Vous avez un Hébergeur de fichier : dans ce cas, il vous suffira de l'uploader et de faire un lien vers celui-ci comme dans l'exemple ci-dessus.

Vous n'avez pas d'hébergeur : Dans ce cas, copier l'intégralité du fichier jquery.easing.1.3.js dans une balise et copier la dans la partie de votre page.

Exemple :

<script type="text/javascript">

Contenu de jquery.easing.1.3.js

</script>         

Une fois que c'est fait, Il vous suffit de copier ce script à la suite des 2 autres :

<script type="text/javascript">
$(document).ready(function(){
   $("a").click(function(){$(this).blur();
    });
$("#container li").mouseover(function(){$(this).stop().animate({height:'222px'},{queue:false,duration:600,easing:'easeInOutCubic'})
});
$("#container li").mouseout(function(){$(this).stop().animate({height:'38px'},{queue:false,duration:600,easing:'easeInOutCubic'})
});
});
</script>            

Normalement à ce stade, votre bouton doit fonctionner correctement.

Personnaliser l'animation du panier déroulant

Changer l'animation

Le plugin Jquery Easing embarque une dizaine d'animations coulissantes différentes. Il suffit de modifier easing:'easeInOutCubic' par l'un des effets ci dessous :

  • easeInOutCubic ( page de demo )
  • easeInOutQuad
  • easeInOutQuart
  • easeInOutQuint
  • easeInOutSine
  • easeInOutExpo
  • easeInOutCirc
  • easeInOutElastic( à tendance à buger un petit peu )
  • easeInOutBack
  • easeInOutBounce ( L'effet le plus sympa )

Modifier la vitesse d'exécution de l'effet

il faut changer la valeur de duration:600 .

Adapter la taille du panier coulissant à votre design

  • Dans votre css : modifier la valeur de width; et height; de #container liEt modifier le valeur de width; de #ensemble
  • Dans le script ci-dessus : modifier la valeur de height, sachant que height:'222px correspond à la hauteur du bloc lors du passage de la souris, et height:'38px à la hauteur à laquelle doit revenir le bloc une fois que la souris à quitté la zone. ( En générale égale au height du CSS #container li)

Changer la couleur du design

Il suffit de sélectionner l'une des classes de couleurs présentent dans le css ( ou d'en créer une ! ) et de modifier la classe dans la structure HTML.

Il est tout à fais possible de réaliser un menu horizontal en partant de cette base, puisque cette meme base est basé sur ce menu Jquery ... Vous me suivez ?

Il y a simplement 2 modifications à faire dans votre css :

  • Ajoutez un float: left; à #container li
  • Modifier la valeur width; de #ensemble selon la largeur de votre design pour que les catégories puisse s'aligner horizontalement.

Et voila vous avez un jolie menu horizontal que vous pouvez personaliser à votre guise.

Conclusion

Beaucoup de possiblités d'animations sont offertes par le plugin Easing, meme si la mise en place peut paraitre un peu laborieuse, surtout si vous débutez.

Mais maintenant c'est à vous de jouer :) Et si vous meme vous avez créé quelque chose sur la base de ce plugin, n'hésitez pas à le partager en bas de page.

Fin de ce tutoriel.

Partagez sur les réseaux sociaux

Catégories

Autres publications pouvant vous intéresser :

Commentaires :

Laisser un commentaire
Aucun commentaire n'a été laissé pour le moment... Soyez le premier !

Articles les plus consultés

OrdiTips - Un Ordi et des Tips

Sur OrdiTips je vous propose des astuces, des tutoriels et plein d'autres choses sur le monde du webdesign, de l'informatique et des appareils mobiles.
Si vous l'avez trouvé intérréssant, je vous invite à faire découvrir OrdiTips auprès de votre entourage :)

Annonces