Panier déroulant avec Jquery Easing Plugin

Accès rapide :

• Démonstration du panier déroulant
• La structure HTML et CSS du panier déroulant
• La partie jquery du panier déroulant
• Personnaliser lanimation du panier déroulant
• Changer l'animation
• Changer la vitesse d'éxécution de l'effet
• Adapter la taille du panier coulissant à votre design
• Changer la couleur du design
• Et si on faisait un menu horizontal en Jquery ?
• Conclusion

Les fichiers nécessaires à l'installation du plugin sur votre site wifeo sont téléchargable ci dessous. ( cliquez sur la flèche en haut à droite pour accéder au dossier source )

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.

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.

Et si on faisait un menu horizontal en Jquery ?

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.

Christian Aslan