Tableau à onglets verticaux

[Mouton.Electric]

Bonjour à tous,

Comme l'indique le titre, je cherche à faire un tableau à onglets verticaux, dont le contenu coulisserait par le bas dans l'idéal. J'ai bien essayé d'adapter le code du troisième tableau proposé ici dans les trucs et astuces mais plus je touche à la structure du tableau ou au css et moins ça ressemble à ce que je voudrais obtenir. -_-*
Voici un schéma de ce que je voudrais réaliser :

J'ai beau écumer les tuto concernant le jQuery, javascript ou même le html/css au moins pour la structure, je n'arrive à rien... Pourriez-vous donc m'apporter votre aide ou quelques conseils ?

Merci d'avance.

[Final-Blonde]

Bonjour,

En fait ce serait réalisable même en CSS.

As-tu des dimensions précises (largeur est hauteur générales du tableau) ?

[Mouton.Electric]

Bonjour,

Merci pour ta réponse. Je n'étais pas sûre qu'en css on puisse avoir les contenus interactifs en fonction de l'onglet sélectionné, mais je suis ravie de l'apprendre, ça me permettra sûrement de mieux comprendre les codes. Même si je débute complétement et que c'est souvent difficile pour moi. =)

Alors, je n'avais pas de dimensions précises mais finalement, ce serait peut-être plus esthétique si elles étaient définies... Je dirais 350px de largeur pour l'ensemble du tableau et 250px de hauteur pour les contenus avec un scrollbar pour éviter le débordement du blabla qui va atterrir dedans.
En tout cas, merci beaucoup de t'être penchée sur ma demande ! o/

[Final-Blonde]

Je t'en prie, mais voyons d'abord si j'arrive à t'aider à ce que tu voudrais atteindre...

En HTML, nous allons créer un tableau général et ensuite des blocs pour chaque onglet/contenu.
En CSS, hormis les bases, c'est surtout la propriété "transition" qui fera coulisser les différents blocs.

Dans le HTML, voici un exemple qui rend les onglets et les contenus uniformes:

Code:

<!-- smart onglets -->
<table align="center" width="350" border="4" cellspacing="3" cellpadding="3"><tr><td align="center" valign="middle"><div class="smartonglet">
<p class="outonglet">ONGLET 1</p><div class="inonglet">CONTENU 1<br />
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div><div class="smartonglet">
<p class="outonglet">ONGLET 2</p><div class="inonglet">CONTENU 2<br />
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div><div class="smartonglet">
<p class="outonglet">ONGLET 3</p><div class="inonglet">CONTENU 3<br />
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div><div class="smartonglet">
<p class="outonglet">ONGLET 4</p><div class="inonglet">CONTENU 4<br />
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div>
</td></tr></table>

Dans la feuille de style :

Spoiler:

/*------------------------------------------------------- smartonglets pour Mouton.Electric -----------------------------------------------------------*/
/*smart spoiler pour Ventus
------------------------------------*/
.smartonglet {
display: block;
overflow: hidden;
width: 350px;
height: 34px;
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
-ktm-transition: 1s all;
margin: 0px 4px;
cursor: pointer;
}
.outonglet {
display: inline-block;
width: 89%;
font: smallcaps bold 13px arial; /*ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size ez le family dans l ordre*/
text-align: center;
border: 3px solid #000;
padding: 4px;
}
.smartonglet:hover {
height: 250px;
overflow-y: auto; /*au cas où le texte serait trop long une scrollbar sera là*/
transition: height 1s linear;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ktm-transition: height 1s linear;
}
.inonglet {
display: inline-block;
width: auto;
font: 13px arial; /*ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size ez le family dans l ordre)*/
text-align: justify;
padding: 0px 4px;
margin: o auto;
}
/*------------------------------------------------------- end smartonglets pour Mouton.Electric -----------------------------------------------------------*/

A toi de personnaliser en couleurs, style de texte, etc.

Il y a aussi moyen de séparer les onglets et contenus pour les personnaliser différemment, dis-moi ce que tu préfères.

[Mouton.Electric]

Merci beaucoup !! C'est pratiquement parfait !
Pour la personnalisation, pas de soucis, je me ferais un plaisir de faire ça à ma sauce ! ^^
Mais actuellement, les onglets et contenus se distinguent, non ? La class outonglet permet de personnaliser les onglets et inonglet les contenus, ou alors je comprends encore moins bien que prévu ? ^^
Est-ce qu'il est possible de faire sortir les onglets pour qu'ils restent visibles ? Parce que ça manque un peu de clarté pour le moment et ça risque d'être difficilement exploitable en l'état actuel...

Merci encore pour ta réponse, je te souhaite une très bonne soirée !

[Final-Blonde]

Merci pour le gentil "merci". (-:

Oui, le outonglet est pour l'onglet, donc personnalisable à part du inonglet.
On peut aussi attribuer des identifiants différents pour chaque onglet et pour chaque contenu afin de les styler indépendamment les uns des autres.

Pour ce qui est de garder un onglet ouvert sans le curseur dessus, ce serait faisable qu'avec le clic, et là ce ne serait pas du tout le même code, et il faudrait ajouter un bout de JS.
C'est le principe du hover justement.

[Mouton.Electric]

Pas de quoi pour le merci, c'est la moindre des choses.
Ah oui, je vois où tu voulais en venir maintenant, je verrais bien, mais j'aime les codes uniformes, je trouve ça plus joli. J'improviserai au moment de la personnalisation s'il le faut. =)

En fait, en bidouillant ton code et en montant les <p class="outonglet">ONGLET 1</p> au dessus des <div class="smartonglet"> Les onglets restent visibles et la transition s'effectue sur le "Contenu 1". Ce qui me va très bien comme structure, car ça devient onglet/titre contenu/sous-titre paragraphe en latin/contenu.
Bref, je te vénère !! XD

Merci beaucoup pour ton aide ! Me reste plus qu'à personnaliser le tout. =)
Bonne soirée !

[Final-Blonde]

en montant les <p class="outonglet">ONGLET 1</p> au dessus des <div class="smartonglet"> Les onglets restent visibles et la transition s'effectue sur le "Contenu 1".

Han, c'était donc ça !!!
Eh oui, un pseudo pas uniquement "collector" mais aussi bien significatif^^

Je t'en prie et bien du plaisir.