Eklablog
Editer l'article Suivre ce blog Administration + Créer mon blog

Onglets coulissant

Et revoici le tuto pour faire des onglets coulissants (comme sur le côté gauche du blog) en plus développé, mais plus simple à coder ;)

/!\ Compatible seulement avec les dernière version de Chrome, Safari et Firefox. Ne fonctionne pas avec IE. Autre navigateur non testé.

Commençons par le css:

.coulissant {
z-index: 99;
position: fixed;      
height: Xpx;         
width: Xpx;          
left: -Xpx;              
top: Xpx;              
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.coulissant:hover{
left: -1px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s
}

Explications:
Modifiez les Xpx
Pour height, par la hauteur de vos onglets
Pour width, par la largeur de vos onglets

Top indique à combien de px du haut de la page sont placé les onglets
Left est une marge négative servant à masquer l'onglet. Si vos onglets font 100px en largeur, mettez environ -80px à left, pour laisser dépasser 20px. 

Au survol (hover) la valeur de left indique de combien de px dépasse l'onglet. Je vous conseil de laisser à -1px.

Si vous voulez les onglets à droite, remplacez "left" par "right"
Si vous voulez les onglet en haut  gauche, inversez "top" et "left"
Si vous voulez les onglets en haut à droite, remplacez "top" par "right" et "left" par "top"


Voici le css de base. Rajoutez des bordures, de la couleur ou autre pour faire quelque chose de joli ;) 

Passons au HTML. Mettezr le code suivant dans un module simple de votre blog

 <div class="coulissant">DU TEXTE; DES IMAGES...</div>
 <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>
 <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>
<div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div> 

Structure de base pour 4 onglets. Pour éviter qu'ils ne se chevauchent, il faut rajouter "stlyle="top: Xpx"" à partir du deuxièmes: Remplacez Xpx par la hauteur de l'onglet (+les marges). Pour le troisième, remplacez Xpx par la hauteur de 2 onglets (+les marges) etc...

Pour les connaisseur, je pense que je n'ai pas besoin d'en dire plus, vous aller me personnaliser tou ça ;)
Pour ceux qui ne comprenne pas grand chose, je vous propose un exemple de personnalisation. Après, vous faie comme vous voulez ;)
=> Apperçu 

CSS

.coulissant { z-index: 99;
position: fixed;
height: 80px;
width: 150px;
left: -130px;
top: 40px;
background: #B7E5C7;
border: 2px solid #50B27C;
box-shadow: 0 0 10px #50B27C, inset 0 0 5px #50B27C;
border-radius: 0 10px 10px 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
.coulissant:hover{ left: -2px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
.coulissant img {max-height: 70px;
padding-top: 5px;
margin-right: 5px;
}
.bout { -webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
float:right;
margin-right: -10px;
height: 80px;
line-height:80px;
font-size: 15px;
font-weight: bold;
text-shadow: 1px 1px 1px #D1FFE9
}

HTML

<div class="coulissant">
<img style="float: left;" src="http://data0.ek.la/test-blog/mod_articles646820_1.jpg?2008" />
<div class="bout">Accueil</div>
Bienvenu sur mon blog!
</div>

<div class="coulissant" style="top: 140px; background: url('http://data0.eklablog.com/merry0712/mod_article1651277_5.jpg?9340') 100% 50%;">
<div class="bout">Galerie</div>
<a href="#">Clique ICI</a>
</div> 

Voilà sur deux onglets quelques exemple de ce que vous pouvez faire =)

Tuto d'Eklatuce plus simple pour faire un lien sur les image =) 

Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
F
Bonjour, désolée mais j'ai une question...En fait sur mon blog, j'ai mis un menu coulissant à gauche (grâce à ton code :3), mais je n'arrive pas à le monter sur le bord de la page  pour qu'il soit plus en hauteur sur le côté et aussi pour qu'on voit le bas du texte, (j'explique très mal...)Du coup je voulait savoir comment faire pour le monter vers le haut de la page, svp
Répondre
C
Coucou Nagalia, merci pour ta réponse.<br /> çà ne fonctionne pas.<br /> Aurais-tu les bon chiffres ?<br /> J'aimerai avoir comme sur ce blog http://tara-tara.eklablog.com/ mais en dessous de la bar de navigation.
Répondre
C
Coucou, superbe tutoriel.<br /> je voudrais bien ce style d'onglet tout en haut juste en dessous de la barre? Comment dois-je faire ?<br /> Merci d'avance :)
Répondre
R
super blog ^0^
Répondre
M
Coucou, j'ai un gros souci, je voudrais mettre correctement le titre de mon coulissant au milieu. Et mon image agrandir un peu pour qu'elle puisse faire tout le coulissant mais je n'y arrive pas. J'ai voulu mettre aussi mon titre dans l'autre sens, en mettant Right comme j'ai bien vue mais ça ne marche pas. <br /> .coulissant { z-index: 99;position: fixed; height: 170px; width: 160px;left: -130px;top: 70px; background: #2c020a;border: 2px solid #9d6972; -webkit-transition-duration: 0.3s; -moz-transition-duration: 1s;transition-duration: 1s; }.coulissant:hover{ left: -2px; -webkit-transition-duration: 0.5s;-moz-transition-duration: 1s; transition-duration: 1s; } .coulissant img {max-height: 70px;padding-top: 5px;margin-right: 4px;} .bout { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);transform: rotate(90deg); float:left;margin-right: -10px; height: 80px;line-height:80px; font-size: 15px; font-weight: bold; text-shadow: 1px 1px 1px #D1FFE9 }​
Répondre