Construisez un accordéon Pure CSS génial!

Qui a deux pouces et aime pousser les limites de CSS? Ce mec. Passons à un projet qui fait exactement cela. C'est assez expérimental et ne passera pas devant la police sémantique, mais cela vous en apprendra énormément sur les tactiques CSS avancées et vous procurera énormément de plaisir.

Ce que nous allons construire est un pur curseur accordéon horizontal CSS. Vous pourrez insérer autant de diapositives que vous le souhaitez, chacune avec un contenu unique et chacune accessible via un événement clic, le tout sans aucune couche de JavaScript. Impossible tu dis? Jamais!

Ce que nous construisons

Le produit final des efforts actuels sera un menu accordéon horizontal coulissant, animé et cliquable. Nous voulons quelques barres étroites qui, lorsqu'elles sont cliquées, se développent pour afficher le contenu masqué.

Démo: Cliquez ici pour lancer.

CSS cliquable

Comme vous le savez bien, CSS ne prend pas en charge les événements de clic, alors comment allons-nous faire en sorte que cette chose passe d'une diapositive à l'autre? Nous pourrions utiliser la solution de facilité et utiliser un vol stationnaire, mais où est le plaisir? Au lieu de cela, essayons quelque chose d'un peu plus difficile et détournons un ensemble de boutons radio.

Avec les boutons radio, nous avons tout ce dont nous avons besoin: un groupe d’éléments cliquables dans lequel un seul peut être sélectionné et cet élément sélectionné est facile à cibler et à styler. Parfait! Sémantique? Pas assez? Si vous souhaitez effectuer cette opération de manière à résister à une évaluation par des pairs, utilisez JavaScript. Aujourd'hui, nous poussons simplement le CSS aussi loin que nous pouvons le faire pour voir si nous pouvons apprendre quelque chose en cours de route.

Étape 1: Cadre HTML

Construire un nouveau projet de conception Web, c'est comme construire une maison. La première étape consiste à mettre en place un cadre simple mais solide sur lequel vous pourrez construire le reste. Pour ce faire, nous allons définir un code HTML de démarrage.

La première chose dont nous avons besoin est une liste non ordonnée à l'intérieur d'un élément de formulaire. Cela semble un peu bizarre à ce stade, mais cela aura plus de sens dans une minute.

Ici, chaque élément de la liste représente une diapositive. Si vous voulez cinq diapositives, vous devriez avoir cinq éléments de liste. Notre projet de test utilisera trois diapositives. Alors pourquoi l'élément de formulaire? Attaquons la prochaine.

À l'intérieur de chaque élément de la liste, nous allons placer trois éléments: une entrée, une étiquette et une div. Les entrées seront des boutons radio, qui sont attachés aux étiquettes. Ensemble, ces deux éléments constitueront nos contrôles en accordéon. La div contiendra le contenu que nous voulons dans chaque diapositive.

Comme je l'ai mentionné ci-dessus, nous utilisons des boutons radio ici, car ils fournissent toutes les fonctionnalités dont nous avons besoin pour réaliser ce petit exploit. Le problème est bien sûr qu’ils ressemblent à des boutons radio. Nous pouvons résoudre ce problème avec la magie de CSS.

Étape 2: Remplacer les styles de formulaire

Notre prochain défi est de rendre jolis les boutons radio laids. Voici à quoi ressemblera notre code HTML sans style:

Comme vous pouvez le constater, entre les puces de la liste et les boutons radio, notre travail est réduit à néant. Tout d’abord, avant de faire quoi que ce soit, jetons la réinitialisation d’un homme paresseux:

Cela garantit que nos marges et nos marges intérieures seront compatibles avec tous les navigateurs et que ces dernières n'interféreront pas avec les dimensions explicitement indiquées. Pour ce faire, Border-box manipule le modèle de boîte CSS standard afin d’être un peu plus convivial.

Effacer les styles de liste

Ensuite, abordons quelque chose de facile. Ces points peuvent être supprimés avec un simple bloc de style que vous connaissez sûrement.

Masquer les boutons radio

Il est maintenant temps de cibler les boutons radio et de les retirer de l'écran. Pour ce faire, nous allons simplement définir leur position sur absolue, puis les placer loin.

Notez que mon sélecteur ici est super générique. Si vous placez cet objet dans un projet, assurez-vous de ne pas cibler toutes les entrées comme je l'ai fait ici. Mélangez le tout dans une div avec une classe et ciblez uniquement les entrées associées à cette classe.

Style de l'étiquette

Maintenant notre bouton radio est caché, mais pourquoi diable avons-nous décidé de le faire? Comment allons-nous contrôler l'accordéon? La réponse est bien sûr que l’étiquette d’un bouton radio sert de point de clic alternatif et peut être stylée plus librement. Cela signifie que même lorsque le bouton radio est parti, nos fonctionnalités seront toujours présentes dans les étiquettes, tout ce que nous avons à faire est de les rendre présentables.

Ici, j'ai divisé mon code en trois morceaux afin que nous puissions le parcourir facilement. Le premier bloc régit le facteur de forme de l'étiquette: hauteur, largeur, marge, débordement, etc. Nous avons essentiellement transformé les étiquettes en grands rectangles qui se superposent.

Vient ensuite le bloc de styles qui régit l’apparence des étiquettes. Nous avons défini l'arrière-plan sur gris, aligné le texte au centre (les petits chiffres) et défini la taille de la police.

Enfin, nous avons mis en place des transitions pour que les modifications que nous allons apporter ultérieurement soient animées.

Étape 3: Plus de style d'étiquette

Avec ce dernier morceau de style, nous avons complètement transformé nos vieux boutons radio ennuyeux en quelque chose qui ressemble beaucoup plus à ce que nous cherchons à réaliser.

Je n'aime pas le fait qu'il n'y ait pas de définition entre les trois onglets, alors aidons-le avec un peu plus de style.

Ici, nous avons assombri le deuxième onglet pour le distinguer des premier et troisième, ajouter une autre transition et définir les styles de survol pour assombrir encore davantage les onglets lorsque l'utilisateur les survole. Cela rendra beaucoup mieux nos onglets:

Étape 4: Slide HTML

Maintenant que nous avons nos onglets comme nous le souhaitons, revenons en arrière et complétons notre code HTML. Ce contenu aurait été gênant si nous l'avions inséré auparavant, mais il devrait rester caché maintenant.