.
Le changement d'onglet se produit grâce à l'interaction de l'attribut coché dans la balise et la pseudo-classe:checked , étroitement liées via des identifiants en CSS. C’est dans le traitement de cette méthode que bute le vieux et fameux frein au progrès. Internet Explorer 8, à partir de la version 9, tout fonctionne au mieux.

En douceur, nous arrivons à la partie la plus intéressante : styliser nos onglets en utilisant la magie du CSS. Ici les choses sont encore plus simples, ça ne sert à rien de décrire spécifiquement chaque propriété et paramètres, j'ai écrit quelques explications dans le code source, donc je pense qu'il ne sera pas difficile de comprendre ce qui va où et pourquoi, mais si vous avez des questions ou trouvez une erreur, écrivez dans les commentaires, je répondrai certainement et je vous aiderai.

CSS3

/* Conteneur d'onglets de base */ .tabs ( largeur min : 320 px ; largeur max : 800 px ; remplissage : 0 px ; marge : 0 auto ; ) /* Styles de section de contenu */ .tabs>section ( affichage : aucun ; remplissage : 15px ; arrière-plan : #fff ; bordure : 1px solide #ddd ; ) .tabs>section>p ( marge : 0 0 5px ; hauteur de ligne : 1,5 ; couleur : #383838 ; /* attacher l'animation */ -webkit-animation -durée : 1 s ; durée de l'animation : 1 s ; -webkit-animation-fill-mode : les deux ; animation-fill-mode : les deux ; -webkit-animation-name : fadeIn ; nom de l'animation : fadeIn ; ) /* Décrire le propriétés d'opacité de l'animation */ @-webkit-keyframes fadeIn ( de ( opacité : 0 ; ) à ( opacité : 1 ; ) ) @keyframes fadeIn ( de ( opacité : 0 ; ) à ( opacité : 1 ; ) ) /* Masquage du cases à cocher * / .tabs>input ( affichage : aucun ; position : absolue ; ) /* Styles des commutateurs de tabulation */ .tabs>label ( affichage : bloc en ligne ; marge : 0 0 -1px ; remplissage : 15px 25px ; police- poids : 600 ; alignement du texte : centre ; couleur : #aaa ; bordure : 0px solide #ddd ; largeur de la bordure : 1px 1px 1px 1px ; arrière-plan : #f1f1f1 ; rayon de bordure : 3px 3px 0 0 ; ) /* Icônes de police de Font Awesome au format Unicode */ .tabs>label:before ( font-family: fontawesome; font-weight: normal; margin-right: 10px; ) .tabs>label:before ( content: " \f19a"; ) .tabs>étiquette:avant ( contenu: "\f17a"; ) .tabs>étiquette:avant ( contenu: "\f13b"; ) .tabs>étiquette:avant ( contenu: "\f13c"; ) /* Modifie le style des sélecteurs d'onglets au survol */ .tabs>label:hover ( couleur : #888 ; curseur : pointeur ; ) /* Styles pour l'onglet actif */ .tabs>input:checked+label ( couleur : # 555; border -top: 1px solid #009933; border-bottom: 1px solid #fff; background: #fff; ) /* Activation des sections à l'aide de la pseudo-classe:checked */ #tab1:checked~#content-tab1, # tab2:checked~# content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 ( display: block; ) /* Supprimer le texte des boutons radio * et laisser les icônes sur les petits écrans */ @media screen et (max -width: 680px) ( .tabs>label ( font-size: 0; ) .tabs>label:before ( margin: 0; font-size: 18px; ) ) /* Modifier le remplissage de * commutateurs pour petits écrans */ @ media screen et (max-width : 400px) ( .tabs>label ( padding : 15px; ) )

Vous pouvez concevoir les onglets () comme bon vous semble, tout dans l'exemple n'est qu'un exemple, ma vision momentanée du produit, rien de plus. Vous pouvez connaître les valeurs Unicode des icônes de police dont vous avez besoin sur le site Web du développeur. Pour ce faire, cliquez simplement sur l'icône sélectionnée et copiez le code numérique émis, quelque chose comme ceci : \f13b .
Veuillez noter que lorsque vous réduisez la taille de la fenêtre du navigateur, les onglets s'ajustent automatiquement à la taille actuelle jusqu'à une certaine valeur (dans l'exemple 680px), après cette valeur, les titres de texte des onglets disparaissent, laissant des icônes. Cela garantit une compacité maximale de l'ensemble du bloc d'onglets ; il ne reste plus qu'à choisir les bonnes icônes qui correspondent à la signification du contenu présenté à l'intérieur des onglets.

Regardez un exemple en direct du fonctionnement des onglets, téléchargez les sources, expérimentez les paramètres et créez, créez, créez...

Si vous en avez assez de travailler avec des modèles en anglais et rêvez d'avoir la chance d'utiliser des modèles en russe, alors vous serez certainement satisfait d'une excellente nouvelle. Le marché TemplateMonster propose désormais les solutions prêtes à l'emploi dont vous avez besoin. Oui, oui, sur le site vous pouvez désormais trouver les meilleurs. Les modèles localisés sont exactement ce dont vous avez besoin si vous souhaitez créer votre projet en ligne en un minimum de temps. Outre le fait que les textes des modèles ont été rédigés manuellement, ils disposent de tous les outils nécessaires pour créer un site Internet professionnel.

Avec tout mon respect, Andrew

Dans la continuité du post précédent sur le style des éléments de sélection, j'aimerais vous expliquer comment le faire complètement onglets adaptatifs sans en utilisant javascript , positionnement absolu et hacks de liens.

Pour commencer, je voudrais dire que je n'appelle pas à abandonner le javascript au profit du CSS uniquement, je ne présenterai ci-dessous qu'une des manières d'implémenter les onglets. Il existe de nombreuses situations où cette approche ne vous conviendra pas et où vous ne pourrez pas vous passer de JS, mais ce n'est pas le cas maintenant.

Comprenons ce que nous voulons voir à la suite du travail et quelles exigences nous mettons en avant pour cela :

1. Travaillez sans JavaScript,
2. Il n'y a aucun rapport avec le nombre d'onglets (on peut utiliser un widget par différentes pages avec un contenu différent à l'intérieur),
3. Adaptabilité,
4. Compatibilité maximale entre navigateurs et multiplateformes,
5. L'interface utilisateur la plus pratique et la plus compréhensible,
6. Il n'y a aucune restriction sur le contenu interne des onglets, qu'il s'agisse de texte, de contenu multimédia ou de mise en page à l'intérieur de l'onglet.

Visuellement, cela devrait ressembler à ceci :

Avant d'afficher votre option onglets sans JS, je voudrais parler de certaines options de mise en œuvre que j'ai trouvées dans le processus de résolution de ce problème.

Première option

Soit la personne qui a proposé cette méthode voulait clairement se moquer des utilisateurs, soit il fait partie des visiteurs de Reddit qui ont créé ces contrôles de volume très « pratiques ». Cette approche me rend nerveux.

L'essence de la méthode est la suivante :

Les liens sont utilisés comme en-têtes (les boutons eux-mêmes) des onglets, dans l'attribut href, qui contient l'identifiant de l'onglet correspondant - un div ou tout autre élément. L'onglet actif est sélectionné à l'aide de la pseudo-class:target .

Cela fonctionne comme ceci :

Comme vous l'avez peut-être remarqué, nous rencontrons quelques problèmes avec cette méthode :

1. Lorsque nous cliquons sur l'onglet, la page commence à sauter, car le navigateur nous envoie là où ce lien mène. Bien sûr, cela peut être évité, mais sans JS, il n'y a aucun moyen.
2. Le titre de l'onglet actif n'est pas mis en surbrillance ; cela peut être fait, mais c'est extrêmement problématique.
3. Au départ, il n’y a pas d’onglets actifs (puisque nous n’avons pas encore cliqué sur les liens) et nous devons recourir à un hack et rendre le troisième onglet actif ; sélectionner le premier de cette manière ne fonctionnera pas.
4. Adaptabilité très controversée : oui, les onglets sont réorganisés pour nouvelle ligne lorsque l’écran se rétrécit et que le contenu de l’onglet se rétrécit avec lui, mais cela n’a pas l’air très joli. Ce problème peut être résolu par les requêtes multimédias, mais étant donné que nous n'allons pas être liés au nombre d'onglets, le problème persistera sur certaines tailles d'affichage.

Nous tirons une conclusion justifiée : cette méthode ne nous convient pas puisqu'elle ne satisfera pas la plupart des exigences. La mise en œuvre est terrible et je ne recommanderais pas de l'utiliser.

Deuxième option

Cette méthode créer des onglets sans JavaScript est déjà plus pratique, même si son application pose également quelques problèmes. L'essence de la méthode est la suivante : les éléments checkbox et label sont utilisés pour les titres des onglets, et en utilisant la pseudo-class:checked et un autre élément div, nous pouvons afficher le contenu de l'onglet actif uniquement et masquer tous les autres :

Entrée de l'onglet-wrapper : vérifié + étiquette + .tab-item (affichage : bloc ;)

Voici comment cela fonctionne:

Comme vous l'avez peut-être remarqué, dans cet exemple, nous utilisons position : absolue ; afin de placer les titres des onglets en haut et le contenu des onglets en bas. Cela crée certains problèmes :

1. Complètement non adaptable. Lors du changement de taille d'écran, les onglets tombent et leur contenu les recouvre. Cela peut être corrigé : faites un défilement horizontal des onglets, cette solution a sa place, mais je ne l'aime pas trop.
2. Puisque nous utilisons le positionnement absolu pour afficher le contenu des onglets, nous devrons spécifier une hauteur fixe des onglets, sinon ils chevaucheront le contenu qui se trouve en dessous (vu dans l'exemple), ce qui signifie que nous ne pouvons pas utiliser cette approche avec un nombre d'onglets jusqu'alors inconnu.

Bien entendu, dans certains cas, cette méthode peut être utilisée, par exemple lorsque vous connaissez à l'avance le nombre d'onglets et la quantité de contenu qu'ils contiennent. Mais nous recherchons une solution universelle, cette approche n’est donc pas applicable dans notre cas.

Solution

La troisième option, qui constitue également la solution, est une modification de la deuxième méthode. Cela fonctionne exactement de la même manière, mais nous n'utiliserons pas le positionnement absolu ni la propriété float pour les titres.

DANS cette méthode Nous utilisons la désormais à la mode flexbox pour placer les onglets et leur contenu. La beauté de flexbox ici est que nous pouvons désigner les éléments à afficher en premier et lesquels à la fin. Cela peut être fait en utilisant la propriété order : 1; , qui est par défaut zéro.

L'adaptabilité des onglets est également obtenue grâce à la propriété flex flex-grow : 1 ; , qui permet aux onglets de s'étendre sur toute la largeur du contenu, nous n'avons donc pas à nous soucier d'afficher un nombre différent d'onglets. Nous pouvons également placer du contenu de n'importe quelle taille dans chaque onglet, cela n'affectera pas l'affichage du contenu après eux.

Cette approche fonctionne dans tous navigateurs modernes, y compris les mobiles. Parmi les propriétés inhabituelles pour beaucoup, seule Flexbox est utilisée et elle est largement prise en charge depuis longtemps. DANS Navigateurs FireFox, Chrome, Safari et Opera, je n'ai trouvé aucun problème avec le fonctionnement des onglets.

Vous pouvez vérifier cette approche sur jsfiddle ou sur vos propres projets. Je serais heureux de voir d'autres propositions de solutions à ce problème dans les commentaires.