Première partie :
On va d'abord s'occuper du CSS.
La partie CSS permet de personnalisé l'onglet.
#menugauchecoulissant { background:linear-gradient(top right,COULEUR EN ANGLAIS,COULEUR EN ANGLAIS); border: Xpx solid COULEUR EN ANGLAIS; boder-radius: Xpx Xpx Xpx Xpx; box-shadow: Xpx Xpx Xpx COULEUR EN ANGLAIS; position: fixed; width: Xpx; height: Xpx; top: Xpx; left: Xpx; padding: Xpx Xpx Xpx Xpx; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.50s; }
#menugauchecoulissant:hover { width: 0px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; box-shadow: Xpx Xpx Xpx COULEUR EN ANGLAIS; }
Remplacez les X par une valeur.
Deuxième partie :
Maintenant on va s'occuper du HTML.
(Donc code à placer d'un la partie HTML dun module simple !)
<div id="menugauchecoulissant" style="top: Xpx;><a href="URL DE D'UN LIEN DE RUBRIQUE"><img style="float: right;" src="URL DE L'IMAGE" alt="" /></span></a></div>
Remplacez le X par une valeur pour gérer la hauteur.
-
EDIT : Pour mettre plusieurs étiquettes changer la valeur du X pour ne pas que la deuxième étiquette soit sur la première. Par exemple si vous avez mis 50px pour la première, mettez 100px pour la deuxième, et 150px pour la troisième, etc ...
Si vous avez des questions n'hésitez pas.