Eklablog Tous les blogs Top blogs Musique & Divertissements Tous les blogs Musique & Divertissements
Editer l'article Suivre ce blog Administration + Créer mon blog
MENU

Site d'informations sur la culture metal, rock, et punk.

Publicité

onglets coulissants

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. 

Publicité
Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
L
Aha désolée mais même avec ça, les etiquettes se chevauchent quand même... :\
Répondre
N
Pour tout ceux qui avez du mal avec les autres étiquettes j'ai modifié l'article. <br /> 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 ... 
Répondre
E
merci beaucoup grâce a toi j'ai réussi ( malgré que j'ai galerer ^^' ) TwT
Répondre
E
bonjour , je n'arrive pas a mettre un deuxieme onglet , quelqu'un peut m'aider ?<br /> Edit : c'est bon j'ai reussi avec un autre code ^^
Répondre
C
moi , sa marche . Je met mon code dans le HTML d'un menu MAIS, si j'en met un autre dans les hlml de code , sa remplace le 1er onglet par celui que je vien de mettre ! 
Répondre