So erstellen Sie CSS-basiertes Inhaltsakkordeon
Im heutigen Tutorial lernen wir, wie wir eine erstellen können Horizontales und vertikales Inhalts-Akkordeon durch Verwendung von CSS3. Es gibt viele jQuery-Plugins, die diese Aufgabe für Sie erledigen können. Was tun Sie jedoch, wenn der Besucher Javascript deaktiviert hat, funktioniert das Akkordeon nicht richtig. Wenn Ihr Akkordeon rein in CSS ist, funktioniert es für alle Ihre Besucher.
Wir werden eine erstellen horizontal und Vertikale Inhalt Akkordeon. Wenn Sie auf den Überschriftentext klicken, wird die Folie mit dem vollständigen Inhalt geöffnet. Hier sehen Sie eine kurze Vorschau (Screenshots), wie sie aussehen.
Wie was Sie sehen? Lassen Sie die Codierung beginnen!
1. HTML und Inhalt vorbereiten
Zunächst erstellen wir den HTML-Code für das Akkordeon.
Die Struktur benötigt einen Container div und dann eine Sektion für jede Folie im Akkordeon. In diesem Beispiel werden wir 5 Folien haben. Jede der Folien hat einen Titel und einen Absatz für den Inhalt.
Über uns
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc Viverra Velit Leo, sitzen amet elementum mi. Fusce posuere nunc mi mi tempus malesuada. Curabitur Facilisis Rhoncus Eros Eget Placerat. Aliquam sempre mauris sitzt gerade aus 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. Maecenas elite quam, Egestas eget placerat non, Fringilla vel eros. Nam vehicula elementum nulla sed follat. Phasellus eu erat enim. Präsentiert bei magna non massa dapibus scelerisque in eu lorem.
Dienstleistungen
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc Viverra Velit Leo, sitzen amet elementum mi. Fusce posuere nunc mi mi tempus malesuada. Curabitur Facilisis Rhoncus Eros Eget Placerat. Aliquam sempre mauris sitzt gerade aus 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. Maecenas elite quam, Egestas und Placerat non, Fringilla vel eros. Nam vehicula elementum nulla sed follat. Phasellus eu erat enim. Präsentiert bei magna non massa dapibus scelerisque in eu lorem.
Blog
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc Viverra Velit Leo, sitzen amet elementum mi. Fusce posuere nunc mi mi tempus malesuada. Curabitur Facilisis Rhoncus Eros Eget Placerat. Aliquam sempre mauris sitzt gerade aus 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. Maecenas elite quam, Egestas und Placerat non, Fringilla vel eros. Nam vehicula elementum nulla sed follat. Phasellus eu erat enim. Präsentiert bei magna non massa dapibus scelerisque in eu lorem.
Portfolio
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc Viverra Velit Leo, sitzen amet elementum mi. Fusce posuere nunc mi mi tempus malesuada. Curabitur Facilisis Rhoncus Eros Eget Placerat. Aliquam sempre mauris sitzt gerade aus 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. Maecenas elite quam, Egestas eget placerat non, Fringilla vel eros. Nam vehicula elementum nulla sed follat. Phasellus eu erat enim. Präsentiert bei magna non massa dapibus scelerisque in eu lorem.
Kontakt
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc Viverra Velit Leo, sitzen amet elementum mi. Fusce posuere nunc mi mi tempus malesuada. Curabitur Facilisis Rhoncus Eros Eget Placerat. Aliquam sempre mauris sitzt gerade aus 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. Maecenas elite quam, Egestas eget placerat non, Fringilla vel eros. Nam vehicula elementum nulla sed follat. Phasellus eu erat enim. Präsentiert bei magna non massa dapibus scelerisque in eu lorem.
Jetzt haben wir unsere Folien, mit denen wir das Akkordeon gestalten können.
2. CSS-Styling
Zuerst müssen wir das Containing gestalten div des Akkordeons. Dadurch erhalten Sie eine Vorstellung davon, wie die einzelnen Folien und die Überschriften angezeigt werden.
/ * Akkordeonfeld definieren * / .accordion width: 830px; Überlauf versteckt; Marge: 10px auto; Farbe: # 474747; Hintergrund: # 414141; Polsterung: 10px;
Als Nächstes erstellen wir die Überschriften für jede der Folien.
.Akkordeonabschnitt Float: Links; Überlauf versteckt; Farbe: # 333; Cursor: Zeiger; Hintergrund: # 333; Marge: 3px; .accordion section: hover Hintergrund: # 444;
Wir setzen die Hintergrundfarbe des Abschnitts auf dunkelgrau als Überschrift, auf die die Besucher klicken, um die Folie anzuzeigen. Wir verwenden diesen Abschnitt sowohl für die Überschrift als auch für den Inhalt. Dies bedeutet, dass wir weniger HTML verwenden und den Titel der Folie als Überschrift des Inhalts wiederverwenden können.
.Akkordeonabschnitt p Anzeige: keine;
Im Moment werden alle Folien geschlossen. Wir müssen also sicherstellen, dass der Absatz bis zum Öffnen der Folie ausgeblendet ist. Setzen Sie also die Anzeige des Absatzes auf "none".
.Akkordeonabschnitt: nach Position: relativ; Schriftgröße: 24px; Farbe: # 000; Schriftdicke: fett; .accordion section: nth-child (1): after content: '1'; .accordion section: nth-child (2): after content: '2'; .accordion section: nth-child (3): after content: '3'; .accordion section: nth-child (4): after content: '4'; .accordion section: nth-child (5): after content: '5';
Wenn die Folien geschlossen sind, möchten wir am unteren Rand der Überschrift eine Zahl anzeigen, um zu sagen, auf welcher Zahlenleiste wir uns befinden. Dazu werden wir CSS verwenden, um nach der Überschrift des Abschnitts Inhalte hinzuzufügen. Dies kann mit der :nach dem Pseudoklassenselektor.
Jetzt haben wir die Überschrift für die Folie erstellt. Wir können das Klickereignis erstellen, um die Folie im Akkordeon anzuzeigen. Es gibt jedoch ein Problem: CSS hat kein Klickereignis. Aus diesem Grund wird das Akkordeon normalerweise mit jQuery erstellt, sodass wir dem Überschriftentext ein Klickereignis zuordnen können.
Wir müssen das Klickereignis in CSS nachahmen, was durch die Verwendung von :Ziel Pseudoklassenselektor.
3. Verwendung von :Ziel Pseudo-Klassenauswahl
:Ziel erlaubt uns, die Fragmentkennung zu formatieren. Manchmal verwenden wir ein On-Page-Ankertag, um auf einen Ort auf der Seite zu zeigen. Beim Klicken auf den Link das Ich würde im Anker-Tag wird zum Ziel, und Sie können dies mit der :Ziel Wähler.
Um dies in das Akkordeon einzufügen, müssen wir einen Link um die Überschrift einfügen, der auf eine zeigt Ich würde der Folie.
Über uns
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc Viverra Velit Leo, sitzen amet elementum mi. Fusce posuere nunc mi mi tempus malesuada. Curabitur Facilisis Rhoncus Eros Eget Placerat. Aliquam sempre mauris sitzt gerade aus 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. Maecenas elite quam, Egestas und Placerat non, Fringilla vel eros. Nam vehicula elementum nulla sed follat. Phasellus eu erat enim. Präsentiert bei magna non massa dapibus scelerisque in eu lorem.
.Akkordeonabschnitt: Ziel Hintergrund: #FFF; Polsterung: 10px; .accordion section: target: hover background: #FFF; .akkordion abschnitt: ziel h2 breite: 100%; .accordion section: target h2 a color: # 333; Polsterung: 0; .accordion section: target p display: block; .akkordeonabschnitt h2 a padding: 8px 10px; Bildschirmsperre; Schriftgröße: 16px; Schriftgewicht: normal; Farbe: #eee; Textdekoration: keine;
Der obige Code ändert die Größe der Folie an den Rest des Akkordeons und ändert die Hintergrundfarbe in Weiß. Der Absatz wurde ausgeblendet. Jetzt müssen wir den Absatz anzeigen.
Wenn Sie nun auf die Überschrift des Akkordeons klicken, ändert sich der Stil der Folie, um den Inhalt der Folie anzuzeigen.
4. Horizontales Akkordeon
Der obige Code erstellt das allgemeine Akkordeon. Jetzt können wir die CSS-Änderungen für die Unterschiede zwischen dem horizontalen und dem vertikalen Akkordeon vornehmen. Beide Akkordeons haben die gleiche Funktionalität, aber das Styling der Überschriften wäre unterschiedlich.
.horizontaler Abschnitt Breite: 5%; Höhe: 250px; -Moz-Übergang: Breite 0,2 s Erleichterung; -webkit-übergang: Breite 0,2 s Erleichterung; -o-Übergang: Breite 0,2 s Erleichterung; Übergang: Breite 0,2s Bequemlichkeit;
Zuerst setzen wir die Breite der Schlagzeile auf 5%, so ist es eine geschlossene Folie. Da der Abschnitt sowohl die Überschrift als auch der Inhalt für die Folie ist, müssen Sie die Animation hinzufügen, um den Inhalt mithilfe der Übergangseigenschaft anzuzeigen.
/ * Positionieren Sie die Nummer der Folie * / .horizontal section: after top: 140px; links: 15px;
Die Position der Zahl auf der Folie ist die gleiche Position in jeder geschlossenen Überschrift. Diese wird anders als die vertikalen Überschriften positioniert.
/ * Kopfzeile der geschlossenen Folie * / .horizontaler Abschnitt h2 -webkit-transform: drehen (90 Grad); -Moz-Transformation: drehen (90 Grad); -o-transform: drehen (90 Grad); verwandeln: drehen (90 Grad); Breite: 240px; Position: relativ; links: -100px; oben: 85px; / * Bei geöffneter Folie mit der Maus * / .horizontal: target width: 73%; Höhe: 230px; .horizontal: target h2 top: 0px; links: 0; -webkit-transform: drehen (0 Grad); -Moz-Transformation: drehen (0 Grad); -o-transform: drehen (0 Grad); umwandeln: drehen (0 Grad);
Der obige Code ändert die Größe der Folie an den Rest des Akkordeons. Die Überschrift wurde vertikal gedreht, um die Überschrift nach unten zu laufen. Jetzt müssen wir bei geöffneter Folie den Text in horizontaler Richtung ändern, indem der Text wieder auf 0 Grad gedreht wird.
5. Vertikales Akkordeon
Das vertikale Akkordeon funktioniert genauso wie das horizontale Akkordeon, es sei denn, wir müssen das ändern Höhe anstatt der Breite und wir müssen die Ausrichtung des Textes nicht ändern.
.Vertikalschnitt Breite: 100%; Höhe: 40px; -Webkit-Übergang: Höhe 0,2s Bequemlichkeit; -Moz-Übergang: Höhe 0,2 s Erleichterung; -o-Übergang: Höhe 0,2 s Erleichterung; Übergang: Höhe 0,2s Bequemlichkeit; / * Höhe der Folie einstellen * / .vertical: target height: 250px; Breite: 97%;
Auf der Ziel Bei einem vertikalen Akkordeon werden wir das ändern Höhe der Überschrift, um die Folie anzuzeigen.
.Vertikalschnitt h2 Position: relativ; links: 0; oben: -15px; / * Position der Zahl auf der Folie einstellen * / .vertical section: after top: -60px; links: 810px; .vertical section: target: after left: -9999px;
Das oben genannte wird das ändern Position des Überschriftentextes auf der geschlossenen Folie. Bei geschlossener Folie müssen wir das einstellen Position der Nummer, die sich rechts vom Akkordeon befindet. Wenn die Folie geöffnet ist, müssen Sie diese Zahl in der Überschrift ausblenden, wenn das Ziel festgelegt ist, damit wir die linke Position vom Bildschirm aus ändern.
Wenn Sie nun auf die Überschrift des Akkordeons klicken, ändert sich der Stil der Folie, um den Inhalt der Folie anzuzeigen.
Anmerkung des Herausgebers: Dieser Beitrag wird von geschrieben Paul Underwood für Hongkiat.com. Paul ist ein PHP-Webentwickler aus Bristol, UK. Er schreibt Tutorials über Webentwicklung: Hauptthemen sind PHP, jQuery, CSS3 und HTML5. Er zeichnet auch nützliche Code-Schnipsel auf Paulund.co.uk auf.
