Autres astuces en CSS - Des textes à onglets verticaux

→ Une solution de textes à "onglets" verticaux, uniquement en CSS, en partie responsive.

La proposition ci-dessous est issue de ce site : (auteur : Rey Wang)

info licence : https://tympanus.net/codrops/licensing/

Sur mon site : http://www.71site.fr  et pages suivantes, j'avais adapté plusieurs versions à onglets horizontaux mais moyennement satisfaisantes, à part la version à onglets verticaux que j'avais améliorée et qui est utilisée sur ce site à plusieurs reprises...

Je n'ai donc conservé que cette version adaptée des propositions de l'auteur, en l'aménageant afin d'être utilisée à peu près confortablement sur les smartphones du fait de la taille des onglets. La hauteur des volets est fixe, mais on peut, comme ici mettre en place un ascenseur vertical simplement.

0 1 2 3 4 5 6 7 8 9 A B C

Titre 0

Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.

Ce texte a pour autre avantage d'utiliser des mots de longueur variable, essayant de simuler une occupation normale. La méthode simpliste consistant à copier-coller un court texte plusieurs fois (« ceci est un faux-texte ceci est un faux-texte ceci est un faux-texte ceci est un faux-texte ceci est un faux-texte ») a l'inconvénient de ne pas permettre une juste appréciation typographique du résultat final.

Il circule des centaines de versions différentes du Lorem ipsum, mais ce texte aurait originellement été tiré de l'ouvrage de Cicéron, De Finibus Bonorum et Malorum (Liber Primus, 32), texte populaire à cette époque, dont l'une des premières phrases est : « Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... » (« Il n'existe personne qui aime la souffrance pour elle-même, ni qui la recherche ni qui la veuille pour ce qu'elle est... »).

Expert en utilisabilité des sites web et des logiciels, Jakob Nielsen souligne que l'une des limites de l'utilisation du faux-texte dans la conception de sites web est que ce texte n'étant jamais lu, il ne permet pas de vérifier sa lisibilité effective. La lecture à l'écran étant plus difficile, cet aspect est pourtant essentiel. Nielsen préconise donc l'utilisation de textes représentatifs plutôt que du lorem ipsum. On peut aussi faire remarquer que les formules conçues avec du faux-texte ont tendance à sous-estimer l'espace nécessaire à une titraille immédiatement intelligible, ce qui oblige les rédactions à formuler ensuite des titres simplificateurs, voire inexacts, pour ne pas dépasser l'espace imparti.

Titre 1

Contrairement à une idée répandue, le faux-texte ne donne même pas un aperçu réaliste du gris typographique, en particulier dans le cas des textes justifiés : en effet, les mots fictifs employés dans le faux-texte ne faisant évidemment pas partie des dictionnaires des logiciels de PAO, les programmes de césure ne peuvent pas effectuer leur travail habituel sur de tels textes. Par conséquent, l'interlettrage du faux-texte sera toujours quelque peu supérieur à ce qu'il aurait été avec un texte réel, qui présentera donc un aspect plus sombre et moins lisible que le faux-texte avec lequel le graphiste a effectué ses essais. Un vrai texte pose aussi des problèmes de lisibilité spécifiques (noms propres, numéros de téléphone, retours à la ligne fréquents, composition des citations en italiques, intertitres de plus de deux lignes...) qu'on n'observe jamais dans le faux-texte.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Titre 2

Il est bien sûr possible de placer d'autres éléments... des images...

puzzle_adHoc

Titre 3

Une vidéo locale ou embed... à visualiser plutôt en mode paysage sur un smartphone...

Titre 4

Et bien d'autres selon votre imagination...

Titre 5

Contenu-5

Titre 6

Contenu-6

Titre 7

Contenu-7

Titre 8

Contenu-8

Titre 9

Contenu-9

Titre A

Contenu-A

Titre B

Contenu-B

Titre C

Contenu-C

Le code ci-dessous est détaillé et commenté le plus possible, il a une première partie [style type="text/css"]...[/style] à mettre au début du code source de la page ou de la boîte encadrée de ces balises, ou bien tel quel, dans un fichier spécifique comme c'est le cas ici (nommé CSS_textes_onglets_verticaux.css) dont l'appel au début du code source est le suivant :


    <link charset="utf-8" href="skin/css/CSS_textes_onglets_verticaux.css" rel="stylesheet" />    

.tabs { /*attributs du conteneur*/
	position: relative;
	margin: 20px 0 auto; /*marges extérieures*/
	width: 100%; /*largeur*/
}
.tabs input { /*attributs zones onglets*/
	position: absolute;
	z-index: 1000;
	width: 30px; /*largeur*/
	height: 30px; /*hauteur*/
	left: 0px; /*position à gauche*/
	top: 0px; /*position 1er onglet en haut*/
	opacity: 0;
	cursor: pointer;
}

.tabs input#tab-1 {
	top: 30px; /*position 2ème onglet en haut*/
}
.tabs input#tab-2{
	top: 60px; /*position 3ème onglet en haut*/
}
.tabs input#tab-3{
	top: 90px; /*position 4ème onglet en haut*/
}
.tabs input#tab-4 {
	top: 120px; /*position 5ème onglet en haut*/
}
.tabs input#tab-5{
	top: 150px; /*position 6ème onglet en haut*/
}
.tabs input#tab-6{
	top: 180px; /*position 7ème onglet en haut*/
}
.tabs input#tab-7 {
	top: 210px; /*position 8ème onglet en haut*/
}
.tabs input#tab-8{
	top: 240px; /*position 9ème onglet en haut*/
}
.tabs input#tab-9{
	top: 270px; /*position 10ème onglet en haut*/
}
.tabs input#tab-A {
	top: 300px; /*position 11ème onglet en haut*/
}
.tabs input#tab-B{
	top: 330px; /*position 12ème onglet en haut*/
}
.tabs input#tab-C{
	top: 360px; /*position 13ème onglet en haut*/
}

.tabs titre { /*attributs titres onglets*/
	background: #000; /*couleur fond*/
	font-size: 1.2rem; /*taille police*/
	height: 30px; /*hauteur*/
	position: relative;
	margin-bottom: 0px; /*marge basse pour séparer les onglets*/
	padding: 0px 3px; /*marges intérieures*/
	float: left;
	display: block;
	clear: both;
	width: 30px; /*!! largeur idem .tabs input !!*/
	color: #fff; /*couleur texte*/
	text-transform: uppercase; /*tout en majuscule*/
	font-weight: bold; /*gras de la police*/
	text-align: center; /*alignement*/
	writing-mode: vertical-rl; /*texte vertical*/
	text-orientation: upright; /*texte H>B*/
	border-radius: 3px 0 0 3px; /*arrondis*/
	border:1px solid #c0c0c0;
}
.tabs titre:after { /*pseudo-élément : permet de masquer l'ombre à gauche des contenus*/
	content: ''; /*!!NE PAS MODIFIER!!*/
	background: transparent; /*couleur fond : mieux si = couleur fond .content */
	position: absolute;
	right: -2px;
	top: 0;
	width: 2px;
	height: 100%;
}
.tabs input:hover + titre {
	background: transparent; /*couleur fond onglet survolé*/
	border: 1px solid #c0c0c0;
}

.tabs titre:first-of-type { /*attributs titre 1er onglet*/
	z-index: 13; /*index superposition : important*/
}
.tab-titre-1 { /*2ème onglet*/
	z-index: 12; /*index superposition : important*/
}
.tab-titre-2 { /*3ème onglet*/
	z-index: 11; /*index superposition : important*/
}
.tab-titre-3 { /*4ème onglet*/
	z-index: 10; /*index superposition : important*/
}
.tab-titre-4 { /*5ème onglet*/
	z-index: 9; /*index superposition : important*/
}
.tab-titre-5 { /*6ème onglet*/
	z-index: 8; /*index superposition : important*/
}
.tab-titre-6 { /*7ème onglet*/
	z-index: 7; /*index superposition : important*/
}
.tab-titre-7 { /*8ème onglet*/
	z-index: 6; /*index superposition : important*/
}
.tab-titre-8 { /*9ème onglet*/
	z-index: 5; /*index superposition : important*/
}
.tab-titre-9 { /*10ème onglet*/
	z-index: 4; /*index superposition : important*/
}
.tab-titre-A { /*11ème onglet*/
	z-index: 3; /*index superposition : important*/
}
.tab-titre-B { /*12ème onglet*/
	z-index: 2; /*index superposition : important*/
}
.tab-titre-C { /*13ème onglet*/
	z-index: 1; /*index superposition : important*/
}


.tabs input:checked + titre { /*attributs titre onglet sélectionné*/
	background: #eee; /*couleur fond*/
	color: #000;
	z-index: 15; /*index superposition : important*/
}
.clear-shadow {
	clear: both;
}
.content { /*attributs contenu*/
	background: linear-gradient(rgba( 75, 75, 75, .8), rgba( 0, 0, 0, .8)); /*couleur de fond*/
	position: relative;
	width: auto; /*largeur = auto*/
	margin: -400px 0 0 30px; /*marges extérieures */
	/* !!important : en haut à ajuster // nb onglets et hauteur ||| !!important : à gauche = largeur onglet */
	height: 450px; /*hauteur*/
	z-index: 14; /*index superposition : important*/
	overflow: hidden; /*masque les débordements extérieurs : important*/
	border: 1px solid #c0c0c0;
	border-radius: 3px; /*arrondis*/
}
.content div { /*attributs div contenu*/
	position: absolute;
	top: 0; /*position*/
	padding: 10px 20px; /*marges intérieures*/
	z-index: 1; /*index superposition : important*/
	opacity: 0; /*opacité : 0=invisible*/
	transition: all linear 0.05s; /*transition tout  : nature temps*/
}
.content div h2,
.content div h3{ /*attributs div h2 et h3 (titres) du contenu*/
	color: #d6af84; /*couleur texte*/
	margin:5px auto;
}
.content div p { /*attributs div paragraphe du contenu*/
	font-size: 1rem; /*taille police*/
	line-height: 1.5; /*hauteur ligne*/
	font-style: normal; /*à ajuster ou supprimer*/
	text-align: left; /*alignement*/
	margin: 15px 0; /*marges extérieures*/
	color: #fff; /*couleur texte*/
	padding:0 10px; /*marge intérieure gauche*/
}
.contentoverflow { /*mise en place ascenseur vertical*/
	max-height: 370px; /*hauteur maxi... forcément inférieure à height de .content */
	overflow:auto;
}

.tabs input.tab-selector-0:checked ~ .content .content-0,
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4,
.tabs input.tab-selector-5:checked ~ .content .content-5,
.tabs input.tab-selector-6:checked ~ .content .content-6,
.tabs input.tab-selector-7:checked ~ .content .content-7,
.tabs input.tab-selector-8:checked ~ .content .content-8,
.tabs input.tab-selector-9:checked ~ .content .content-9,
.tabs input.tab-selector-A:checked ~ .content .content-A,
.tabs input.tab-selector-B:checked ~ .content .content-B,
.tabs input.tab-selector-C:checked ~ .content .content-C { /*attributs contenu si sélectionné*/
	z-index: 100; /*index superposition : important*/
	opacity: 1; /*opacité : 1=visible*/
	width: 100%; /*largeur*/
	transition: all linear 0.05s; /*transition tout  : nature temps*/
}

→ J'ai mis volontairement 13 onglets numérotés de 0 à C... Il est possible de laisser tout le style en l'état, et de n'utiliser dans le code ci-dessous que les onglets nécessaires, il suffira ensuite d'adapter dans .content, le margin: -400px 0 0 30px; pour installer les onglets à la hauteur souhaitée, ou de préciser dans le code ci-dessous un autre margin pour .content, par exemple [div class="content" style="margin: -310px 0 0 30px;"]. Solution bien pratique, si comme moi, on utilise plusieurs fois cette feuille de style dans des pages différentes avec un nombre d'onglets différent...

→ Notez bien dans ce code les Id de chaque onglet #tab-0 #tab-1 ... accompagnés des classes qui leur correspondent .tab-titre-0 .tab-titre-1 ...  dans la totalité du style... Y compris lors de l'association avec les contenus lorsque les onglets sont sélectionnés ( par exemple : .tabs input.tab-selector-0:checked ~ .content .content-0 ). Vous pouvez en ajouter ou en supprimer, mais ces Id devront être repris dans le code ci-dessous.

Puis ci-dessous le code simplifié pour ne conserver que la structure, afin de placer ces textes à onglets où vous le souhaitez dans votre page.


<section class="tabs">

	<input checked="checked" class="tab-selector-0" id="tab-0" name="radio-set" type="radio" />
	<titre class="tab-titre-0" for="tab-0">0</titre>

	<input class="tab-selector-1" id="tab-1" name="radio-set" type="radio" />
	<titre class="tab-titre-1" for="tab-1">1</titre>

	<input class="tab-selector-2" id="tab-2" name="radio-set" type="radio" />
	<titre class="tab-titre-2" for="tab-2">2</titre>

	<input class="tab-selector-3" id="tab-3" name="radio-set" type="radio" />
	<titre class="tab-titre-3" for="tab-3">3</titre>

	<input class="tab-selector-4" id="tab-4" name="radio-set" type="radio" />
	<titre class="tab-titre-4" for="tab-4">4</titre>

	<input class="tab-selector-5" id="tab-5" name="radio-set" type="radio" />
	<titre class="tab-titre-5" for="tab-5">5</titre>

	<input class="tab-selector-6" id="tab-6" name="radio-set" type="radio" />
	<titre class="tab-titre-6" for="tab-6">6</titre>

	<input class="tab-selector-7" id="tab-7" name="radio-set" type="radio" />
	<titre class="tab-titre-7" for="tab-7">7</titre>

	<input class="tab-selector-8" id="tab-8" name="radio-set" type="radio" />
	<titre class="tab-titre-8" for="tab-8">8</titre>

	<input class="tab-selector-9" id="tab-9" name="radio-set" type="radio" />
	<titre class="tab-titre-9" for="tab-9">9</titre>

	<input class="tab-selector-A" id="tab-A" name="radio-set" type="radio" />
	<titre class="tab-titre-A" for="tab-A">A</titre>

	<input class="tab-selector-B" id="tab-B" name="radio-set" type="radio" />
	<titre class="tab-titre-B" for="tab-B">B</titre>

	<input class="tab-selector-C" id="tab-C" name="radio-set" type="radio" />
	<titre class="tab-titre-C" for="tab-C">C</titre>



<div class="clear-shadow">
</div>

<div class="content">

<div class="content-0">
	<h4>Titre 0</h4>
<section class="contentoverflow">
<p>Contenu-0</p>
</section><!-- fin overflow -->
</div><!-- fin content-0 -->

<div class="content-1">
	<h4>Titre 1</h4>
<section class="contentoverflow">
<p>Contenu-1</p>
</section><!-- fin overflow -->
</div><!-- fin content-1 -->

<div class="content-2">
	<h4>Titre 2</h4>
<section class="contentoverflow">
<p>Contenu-2</p>
</section><!-- fin overflow -->
</div><!-- fin content-2 -->

<div class="content-3">
	<h4>Titre 3</h4>
<section class="contentoverflow">
<p>Contenu-3</p>
</section><!-- fin overflow -->
</div><!-- fin content-3 -->

<div class="content-4">
	<h4>Titre 4</h4>
<section class="contentoverflow">
<p>Contenu-4</p>
</section><!-- fin overflow -->
</div><!-- fin content-4 -->

<div class="content-5">
	<h4>Titre 5</h4>
<section class="contentoverflow">
<p>Contenu-5</p>
</section><!-- fin overflow -->
</div><!-- fin content-5 -->

<div class="content-6">
	<h4>Titre 6</h4>
<section class="contentoverflow">
<p>Contenu-6</p>
</section><!-- fin overflow -->
</div><!-- fin content-6 -->

<div class="content-7">
	<h4>Titre 7</h4>
<section class="contentoverflow">
<p>Contenu-7</p>
</section><!-- fin overflow -->
</div><!-- fin content-7 -->

<div class="content-8">
	<h4>Titre 8</h4>
<section class="contentoverflow">
<p>Contenu-8</p>
</section><!-- fin overflow -->
</div><!-- fin content-8 -->

<div class="content-9">
	<h4>Titre 9</h4>
<section class="contentoverflow">
<p>Contenu-9</p>
</section><!-- fin overflow -->
</div><!-- fin content-9 -->

<div class="content-A">
	<h4>Titre A</h4>
<section class="contentoverflow">
<p>Contenu-A</p>
</section><!-- fin overflow -->
</div><!-- fin content-A -->

<div class="content-B">
	<h4>Titre B</h4>
<section class="contentoverflow">
<p>Contenu-B</p>
</section><!-- fin overflow -->
</div><!-- fin content-B -->

<div class="content-C">
	<h4>Titre C</h4>
<section class="contentoverflow">
<p>Contenu-C</p>
</section><!-- fin overflow -->
</div><!-- fin content-C -->

</div><!-- fin content -->

</section><!-- fin section tabs -->
  • Après la balise [section class="tabs"] vous trouvez la zone dans laquelle sont définis les titres des onglets, leur ordre et celui qui est actif. Les onglets sont de type="radio" (un onglet s'ouvre et celui qui était ouvert se ferme). Il faut reprendre obligatoirement les id="tab-X" tous différents et repris également dans [titre class="tab-titre-X for="tab-X"]X[/titre]. Vous pouvez ajouter ou supprimer autant d'onglets que nécessaire.

  • Pour ouvrir un onglet par défaut, il faut placer dans la balise [input... /] checked="checked" ainsi : [input checked="checked" class="tab-selector-0" id="tab-0" name="radio-set" type="radio" /] pour l'onglet tab-0 par exemple. Important : Il est nécessaire d'en avoir un actif.

  • Dans la partie [div class="content"]...[/div][!-- fin content --] vous trouvez autant de blocs [div class="content-X"]...[/div][!-- fin content-X --] que d'onglets pour y placer le contenu du volet de chaque onglet associé. J'y ai placé après le titre [h4]Titre X[/h4] un bloc [section class="contentoverflow"]...[/section][!-- fin overflow --] afin de placer un ascenseur vertical en cas de dépassement de la hauteur prévue dans le style. Il est possible de laisser ce bloc tel quel, vous pouvez aussi le supprimer et ne laisser que le contenu : des paragraphes, des images... etc...

  • Une astuce bien pratique pour travailler les contenus directement avec l'éditeur de texte Whizziwig dans adHoc si vous avez placé le style dans un fichier spécifique : Vous copiez-coupez la ligne d'appel [link..... /] vous la collez provisoirement dans le blocnote ou notepad++ ou ... et à la fin vous recopiez-collez cette ligne au début de votre code source... et le tour est joué il n'y a plus qu'à enregistrer...!

    Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.


    Astuces

    adHoc

    Iframes responsives

    Camera

    Unite Gallery

    Animations au survol

    Autres astuces en CSS

    Audio-Players

    Carousels