Comment créer un contenu basé sur CSS
Dans le tutoriel d’aujourd’hui, nous allons apprendre comment créer un contenu accordéon horizontal et vertical en utilisant simplement CSS3. Il existe de nombreux plugins jQuery qui peuvent faire ce travail pour vous, mais que faites-vous si le visiteur a désactivé Javascript, l'accordéon ne fonctionnera pas correctement. Si votre accordéon est uniquement en CSS, il fonctionnera pour tous vos visiteurs.
Nous allons créer un horizontal et verticale contenu accordéon. En cliquant sur le titre du titre, la diapositive s'ouvrira et affichera le contenu complet. Voici un aperçu rapide (captures d'écran)..
Aimez ce que vous voyez? Que le codage commence!
1. Préparation du HTML et du contenu
Pour commencer, nous allons créer le code HTML pour l'accordéon.
La structure a besoin d'un conteneur div et ensuite un section pour chaque diapositive dans l'accordéon. Dans cet exemple, nous allons avoir 5 diapositives. Chacune des diapositives va avoir un titre et un paragraphe pour le contenu.
À propos de nous
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, assis amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris assis amet justo tempor nca lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Mécène elit quam, Egestas egetas placerat non, fringilla vel eros. Nam véhicula elementum nulla sedat conséquent. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque a eu lorem.
Prestations de service
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, assis amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris assis amet justo tempor nca lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Mécène elit quam, Egestas egetas placerat non, fringilla vel eros. Nam véhicula elementum nulla sedat conséquent. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque a eu lorem.
Blog
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, assis amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris assis amet justo tempor nca lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Mécène elit quam, Egestas egetas placerat non, fringilla vel eros. Nam véhicula elementum nulla sedat conséquent. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque a eu lorem.
Portefeuille
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, assis amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris assis amet justo tempor nca lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Mécène elit quam, Egestas egetas placerat non, fringilla vel eros. Nam véhicula elementum nulla sedat conséquent. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque a eu lorem.
Contact
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, assis amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris assis amet justo tempor nca lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Mécène elit quam, Egestas egetas placerat non, fringilla vel eros. Nam véhicula elementum nulla sedat conséquent. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque a eu lorem.
Maintenant que nous avons nos diapositives, nous pouvons commencer à coiffer l'accordéon.
2. Style CSS
Nous devons d’abord styler le contenant div de l'accordéon. Cela nous donnera une idée de la façon d’afficher chacune des diapositives et chacun des titres..
/ * Définir la boîte d'accordéon * / .accordion width: 830px; débordement caché; marge: auto 10px; couleur: # 474747; arrière-plan: # 414141; rembourrage: 10px;
Ensuite, nous allons créer les titres pour chacune des diapositives.
.section accordéon float: left; débordement caché; couleur: # 333; curseur: pointeur; arrière-plan: # 333; marge: 3px; section .accordion: survol background: # 444;
Nous définissons la couleur d’arrière-plan gris foncé de la section sur laquelle les visiteurs cliqueront pour afficher la diapositive. Nous utilisons cette section à la fois pour le titre et le contenu, ce qui nous permet d’utiliser moins de HTML et de réutiliser le titre de la diapositive comme titre du contenu..
.section accordéon p display: none;
Pour le moment, toutes les diapositives seront fermées. Nous devons donc nous assurer que le paragraphe est caché jusqu'à ce que la diapositive soit ouverte. Pour le moment, réglez l'affichage du paragraphe sur none.
.section accordéon: après position: relative; taille de police: 24px; couleur: # 000; poids de police: gras; .accordion section: nth-child (1): après contenu: '1'; .accordion section: nth-child (2): après contenu: '2'; .accordion section: nth-child (3): après contenu: '3'; .accordion section: nth-child (4): après contenu: '4'; .accordion section: nth-child (5): après contenu: '5';
Les diapositives fermées, nous souhaitons afficher un numéro au bas du titre pour indiquer le numéro de la diapositive sur laquelle nous nous trouvons. Pour cela, nous allons utiliser CSS pour ajouter du contenu après le titre de la section. Pour ce faire, utilisez la commande :après sélecteur de pseudo-classe.
Maintenant que nous avons créé le titre de la diapositive, nous pouvons créer l'événement click pour afficher la diapositive à l'accordéon. Mais il y a un problème, CSS n'a pas d'événement click, c'est pourquoi l'accordéon est normalement créé en utilisant jQuery afin que nous puissions attacher un événement click au texte du titre..
Nous devons imiter l’événement click en CSS, ce qui peut être fait en utilisant le :cible sélecteur de pseudo-classe.
3. Utilisation :cible sélecteur de pseudo-classe
:cible nous permet de styliser l'identifiant de fragment. Parfois, nous utilisons une balise d'ancrage sur la page pour pointer sur un emplacement de la page. En cliquant sur le lien le identifiant dans la balise d'ancrage devient la cible et vous pouvez dénommer cela en utilisant le :cible sélecteur.
Pour ajouter cela à l'accordéon, nous devons ajouter un lien autour du titre pointant vers un identifiant de la glissière.
À propos de nous
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, assis amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris assis amet justo tempor nca lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Mécène elit quam, Egestas egetas placerat non, fringilla vel eros. Nam véhicula elementum nulla sedat conséquent. Phasellus eu erat enim. Praesent a magna non massa dapibus scelerisque a eu lorem.
.section accordéon: target background: #FFF; rembourrage: 10px; .accordion section: target: hover background: #FFF; section .accordion: cible h2 largeur: 100%; section .accordion: cible h2 a color: # 333; rembourrage: 0; section .accordion: cible p display: block; .accordion section h2 a padding: 8px 10px; bloc de visualisation; taille de police: 16px; poids de la police: normal; couleur: #eee; texte-décoration: aucun;
Le code ci-dessus modifiera la taille de la diapositive pour l'adapter au reste de l'accordéon et changera la couleur de fond en blanc. Le paragraphe était caché alors maintenant sur la cible, nous devons afficher le paragraphe.
Maintenant, lorsque vous cliquez sur le titre de l'accordéon, la diapositive change de style pour afficher le contenu de la diapositive..
4. Accordéon Horizontal
Le code ci-dessus créera l'accordéon général. Nous pouvons maintenant commencer à faire les changements CSS pour les différences entre l'accordéon horizontal et vertical. Ces deux accordéons ont la même fonctionnalité mais le style de titre serait différent.
.section horizontale largeur: 5%; hauteur: 250px; -moz-transition: largeur 0,2 s atténuation; -webkit-transition: largeur 0.2s allégée; -o-transition: largeur 0,2 s atténuation; transition: largeur 0.2s facilité;
D'abord nous avons mis le largeur de la section du titre à 5%, il s’agit donc d’une diapositive fermée. Comme la section est à la fois le titre et le contenu de la diapositive, nous devons ajouter l'animation pour afficher le contenu à l'aide de la propriété de transition..
/ * Positionne le numéro de la diapositive * /. Section horizontale: after top: 140px; à gauche: 15px;
La position du numéro sur la diapositive sera la même position sur chaque titre fermé, ceux-ci sont positionnés différemment des titres verticaux..
/ * En-tête de la diapositive fermée * / Section .horizontal h2 -webkit-transform: rotation (90deg); -moz-transform: rotation (90deg); -o-transformer: faire pivoter (90deg); transformer: faire pivoter (90 °); largeur: 240px; position: relative; à gauche: -100px; en haut: 85 px; / * Sur la diapositive ouverte * / .horizontal: target width: 73%; hauteur: 230px; .horizontal: target h2 top: 0px; gauche: 0; -webkit-transform: rotation (0deg); -moz-transform: rotation (0deg); -o-transformer: faire pivoter (0deg); transformer: faire pivoter (0deg);
Le code ci-dessus modifiera la taille de la diapositive pour l'adapter au reste de l'accordéon. Le titre a été pivoté verticalement pour le parcourir, mais maintenant que la diapositive est ouverte, nous devons redéfinir le texte pour qu'il soit horizontal en le faisant revenir à 0 degré..
5. Accordéon vertical
L’accordéon vertical fonctionne de la même manière que l’accordéon horizontal, sauf que nous devons changer la la taille à la place du largeur et on n'a pas besoin de changer l'alignement du texte.
.section verticale largeur: 100%; hauteur: 40px; -webkit-transition: hauteur 0.2s facilité; -moz-transition: hauteur 0,2 s atténuation; -o-transition: hauteur 0,2 s atténuation; transition: hauteur 0.2s facilité; / * Définir la hauteur de la diapositive * / .vertical: target height: 250px; largeur: 97%;
Sur le cible cas de l'accordéon vertical, nous allons changer la la taille du titre pour afficher la diapositive.
.section verticale h2 position: relative; gauche: 0; en haut: -15px; / * Définir la position du numéro sur la diapositive * /. Section verticale: after top: -60px; à gauche: 810px; .vertical section: target: after left: -9999px;
Ce qui précède va changer le position du titre sur la diapositive fermée. Avec la diapositive fermée, nous devons définir la position du numéro qui se trouve à droite de l'accordéon. Lorsque la diapositive est ouverte, nous devons masquer ce nombre dans le titre lorsque la cible est définie afin de changer la position de gauche de l'écran..
Maintenant, lorsque vous cliquez sur le titre de l'accordéon, la diapositive change de style pour afficher le contenu de la diapositive..
Note de l'éditeur: Cet article est écrit par Paul Underwood pour Hongkiat.com. Paul est un développeur Web PHP de Bristol, au Royaume-Uni. Il écrit des tutoriels sur le développement Web: les sujets principaux incluent PHP, jQuery, CSS3 et HTML5. Il enregistre également des extraits de code utiles sur Paulund.co.uk.
