Onglets coulissant

14.02.2012

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 =)