4 façons de créer de superbes accordéons CSS
Les accordéons de contenu constituent un modèle de conception utile. Vous pouvez les utiliser pour différentes choses: pour les menus, les listes, les images, les extraits d'articles, les extraits de texte et même les vidéos.
La plupart des accordéons reposent sur JavaScript, principalement sur jQuery, mais depuis que l’utilisation des techniques CSS3 avancées s’est généralisée, on peut aussi trouver de beaux exemples qui utiliser uniquement HTML et CSS, qui les rendent accessibles dans des environnements avec JavaScript désactivé.
Créer des accordéons exclusivement CSS peut être une tâche délicate. Dans cet article, nous allons essayer de: comprendre les principaux concepts utilisés par les développeurs lorsqu'ils en ont besoin pour en créer un.
En créant des onglets réservés aux CSS, il existe généralement deux approches principales, chacune d’elles ayant deux cas d’utilisation fréquents. La première approche utilise éléments de forme cachés, tandis que le second utilise Pseudo-sélecteurs CSS.
1. La méthode du bouton radio
La méthode du bouton radio ajoute une entrée radio cachée et une étiquette correspondante à chaque onglet de l'accordéon. La logique est simple: lorsque l'utilisateur sélectionne un onglet, il coche le bouton radio correspondant à cet onglet, de la même manière lorsqu'il remplit un formulaire. Quand ils cliquent sur le prochain onglet de l'accordéon, ils sélectionnent le bouton radio suivant, etc..
Dans cette méthode, un seul onglet peut être ouvert en même temps. La logique du HTML ressemble à ceci:
Titre du contenu (n'utilisez pas la balise h1 ici)
Un peu de contenu…
p>
Tu dois ajouter une paire de radio-étiquettes séparée pour chaque onglet à l'accordéon. Le code HTML seul ne donnera pas le comportement souhaité, vous devez également ajouter les règles CSS appropriées. Voyons comment vous pouvez y parvenir..
Onglets verticaux à hauteur fixe
Dans cette solution (voir la capture d'écran ci-dessous), le développeur a masqué le bouton radio à l'aide du bouton affichage: aucun; règle, il a ensuite attribué une position relative à l’étiquette qui contient le titre de chaque onglet et une position absolue à la position correspondante. étiquette: après pseudo-élément.
Ce dernier tient la poignée marquée d'un signe + vert qui ouvre les onglets. Les onglets fermés utilisent également une poignée marquée en vert “-” des signes. Dans la CSS, les onglets fermés sont sélectionnés à l'aide du sélecteur élément + élément.
Vous devez également donner au contenu de l'onglet ouvert une hauteur fixe. Pour ce faire, sélectionnez le corps de l'onglet ouvert (indiqué par la classe de contenu d'onglet dans le code HTML ci-dessus) à l'aide du sélecteur CSS element1 ~ element2.
La logique de base du CSS est la suivante:
entrée [type = radio] display: none; label position: relative; bloc de visualisation; label: after content: "+"; position: absolue; à droite: 1em; entrée: vérifié + étiquette: après contenu: "-"; input: vérifié ~ .tab-content height: 150px;
Vous pouvez consulter le CSS complet ici sur Codepen. Le CSS est écrit à l’origine en Sass, mais si vous cliquez sur le bouton “Voir compilé” bouton, vous pouvez voir le fichier CSS compilé.
Accordéon avec boutons radio
Cet accordéon de belle image utilise la même méthode de bouton radio, mais au lieu d'étiquettes, le développeur ici utilisé la balise HTML figcaption accomplir le comportement d'accordéon.
Le CSS est quelque peu différent, principalement parce que dans ce cas les onglets ne sont pas placés verticalement mais horizontalement. Le développeur a utilisé le sélecteur CSS élément + élément (qui était utilisé dans le cas précédent pour sélectionner les bascules) afin de garantir que les bords des images couvertes restent visibles..
Lisez le guide détaillé sur la création de cet élégant accordéon CSS..
2. La méthode de la case à cocher
La méthode de case à cocher utilise le type d'entrée de case à cocher au lieu du bouton radio. Lorsque l'utilisateur sélectionne un onglet, il coche la case correspondante.
La différence par rapport à la méthode du bouton radio est que c'est possible d'ouvrir plus d'un onglet en même temps, tout comme il est possible de cocher plus d'une case à l'intérieur d'un formulaire.
D'autre part, les onglets ne se ferment pas d'eux-mêmes lorsque l'utilisateur clique sur un autre. La logique du HTML est la même que précédemment, dans ce cas, vous devez utiliser une case à cocher pour le type d'entrée.
Titre du contenu (n'utilisez pas la balise h1 ici)
Un peu de contenu…
p>
Accordéon à hauteur fixe
Si vous voulez des onglets de contenu à hauteur fixe, la logique du CSS est à peu près la même que dans le cas du bouton radio, c'est juste le type d'entrée qui est passé de radio à case à cocher. Dans ce stylo Codepen, vous pouvez consulter le code.
Hauteur de fluide accordéon
Lorsque plusieurs onglets sont ouverts en même temps, l'affichage d'onglets à hauteur fixe peut avoir un impact négatif sur l'expérience utilisateur, car la hauteur de l'accordéon peut augmenter considérablement. Cela peut être amélioré si vous changer la hauteur fixe en hauteur fluide; cela signifie que la hauteur des onglets ouverts se dilate ou se contracte en fonction de la taille du contenu qu'ils contiennent.
Pour ce faire, vous devez modifier la hauteur fixe du contenu de l'onglet à une hauteur maximale, et utiliser des unités relatives:
entrée: vérifié ~ .tab-content hauteur maximale: 50em;
Si vous voulez mieux comprendre le fonctionnement de cette méthode, vous pouvez jeter un oeil à ce Codepen.
3. La méthode cible
: target est l'un des pseudo-sélecteurs CSS3. Avec son aide, vous pouvez lier un élément HTML à une balise d'ancrage de la manière suivante:
Titre de l'onglet
Contenu de l'onglet
Lorsque l'utilisateur clique sur le titre d'un onglet, toute la section s'ouvre grâce au bouton :cible pseudo-sélecteur, et l'URL sera également modifiée au format suivant: www.some-url.com/#tab-1.
L'onglet ouvert peut être stylé en CSS à l'aide de l'outil section: cible … règle. Nous avons un excellent tutoriel ici sur hongkiat sur la façon de créer de beaux accordéons CSS uniquement avec le :cible méthode dans les dispositions verticales et horizontales.
La principale lacune de la :cible la méthode est que cela change l'URL quand l'utilisateur clique sur les onglets. Cela affecte l'historique du navigateur et le bouton précédent du navigateur ne ramène pas l'utilisateur à la page précédente, mais à l'état précédent de l'accordéon.
4. La méthode: hover
Cette dernière lacune peut être surmontée si nous utilisons les :flotter Pseudo-sélecteur CSS au lieu de :cible, mais dans ce cas, les onglets ne réagiront pas au clic mais à l'événement de survol. Le truc ici est que vous devez soit masquer les éléments non recouverts, ou réduire leur largeur ou leur hauteur - en fonction de la disposition des onglets
L'élément survolé doit être rendu visible ou réglé sur la largeur / hauteur totale pour que l'accordéon fonctionne.
Les 3 accordéons CSS suivants ont tous été créés avec la méthode: hover, cliquez sur les liens situés en dessous des captures d’écran pour consulter le code..
Accordéon Image Horizontal
Accordéon asymétrique
Accordéon activé par survol avec état par défaut
