4 Möglichkeiten, fantastische CSS-Akkordeons zu erstellen
Inhaltliche Akkordeons bilden ein nützliches Designmuster. Sie können sie für viele verschiedene Zwecke verwenden: für Menüs, Listen, Bilder, Artikelausschnitte, Textausschnitte und sogar Videos
Die meisten Akkordeons sind darauf angewiesen JavaScript, hauptsächlich auf jQuery, Da jedoch der Einsatz fortschrittlicher CSS3-Techniken weit verbreitet ist, können wir auch schöne Beispiele dafür finden Verwenden Sie nur HTML und CSS, die sie in Umgebungen mit deaktiviertem JavaScript zugänglich machen.
Das Erstellen von ausschließlich CSS-Akkordeons kann eine schwierige Aufgabe sein. In diesem Beitrag werden wir versuchen, dies zu tun die wichtigsten Konzepte verstehen, die Entwickler verwenden, wenn sie eines erstellen müssen.
Beim Erstellen von reinen CSS-Registerkarten gibt es normalerweise zwei Hauptansätze, von denen jeder zwei häufige Anwendungsfälle hat. Der erste Ansatz nutzt verborgene Formularelemente, während der zweite Gebrauch macht CSS Pseudo-Selektoren.
1. Die Optionsfeldmethode
Die Radio Button-Methode fügt jeder Registerkarte des Akkordeons einen ausgeblendeten Radioeingang und ein entsprechendes Label hinzu. Die Logik ist einfach: Wenn der Benutzer eine Registerkarte auswählt, aktivieren Sie im Wesentlichen das Optionsfeld, das zu dieser Registerkarte gehört, genauso wie beim Ausfüllen eines Formulars. Wenn sie auf die nächste Registerkarte des Akkordeons klicken, wählen sie das nächste Optionsfeld usw.
In dieser Methode, Es darf nur eine Registerkarte geöffnet sein zur selben Zeit. Die Logik des HTML-Codes sieht ungefähr so aus:
Inhaltstitel (hier nicht das h1-Tag verwenden)
Einige Inhalte…
p>
Du musst Fügen Sie für jede Registerkarte ein eigenes Radio-Label-Paar hinzu im Akkordeon. Der HTML-Code allein gibt nicht das gewünschte Verhalten an, Sie müssen auch die entsprechenden CSS-Regeln hinzufügen. Sehen Sie, wie Sie dies erreichen können.
Vertikale Registerkarten mit fester Höhe
Bei dieser Lösung (siehe Abbildung unten) versteckte der Entwickler den Radioknopf mit Hilfe von Anzeige: keine; In der Regel hat er dem Label-Tag eine relative Position zugewiesen, die den Titel jedes Registers enthält, und eine absolute Position zum entsprechenden Label: nach Pseudoelement.
Letzterer hält den Griff mit einem grünen Pluszeichen markiert, das die Registerkarten öffnet. Die geschlossenen Laschen verwenden auch einen grün markierten Griff “-” Zeichen. Im CSS werden die geschlossenen Tabs mit Hilfe der Element + Element-Auswahl ausgewählt.
Sie müssen auch den Inhalt der geöffneten Registerkarte mit einer festen Höhe festlegen. Wählen Sie dazu mit Hilfe des CSS-Selektors element1 ~ element2 den Hauptteil der geöffneten Registerkarte (oben im HTML-Code mit der tab-content-Klasse gekennzeichnet) aus.
Die grundlegende Logik des CSS ist hier die folgende:
Eingabe [Typ = Radio] Anzeige: keine; label position: relativ; Bildschirmsperre; label: after content: "+"; Position: absolut; rechts: 1em; Eingabe: Aktiviert + Label: Nach Inhalt: "-"; Eingabe: überprüft ~ .tab-content height: 150px;
Das vollständige CSS finden Sie hier auf Codepen. Das CSS ist ursprünglich in Sass geschrieben, aber wenn Sie auf klicken “Kompiliert anzeigen” können Sie die kompilierte CSS-Datei sehen.
Bildakkordeon mit Radioknöpfen
Dieses schöne Bildakkordeon verwendet die gleiche Radioknopfmethode, jedoch anstelle von Etiketten den Entwickler hier verwendet den HTML-Tag figcaption das Akkordeonverhalten zu erreichen.
Die CSS ist etwas anders, hauptsächlich, weil in diesem Fall die Registerkarten nicht vertikal sondern horizontal platziert werden. Der Entwickler verwendete den CSS-Selektor element + element (der im vorherigen Fall zur Auswahl der Umschaltelemente verwendet wurde), um sicherzustellen, dass die Kanten der abgedeckten Bilder weiterhin sichtbar bleiben.
Lesen Sie die ausführliche Anleitung zur Erstellung dieses eleganten CSS-Akkordeons.
2. Die Checkbox-Methode
Bei der Checkbox-Methode wird anstelle des Optionsfelds der Checkbox-Eingabetyp verwendet. Wenn der Benutzer eine Registerkarte auswählt, aktiviert er grundsätzlich das entsprechende Kontrollkästchen.
Der Unterschied zu der Radio Button-Methode besteht darin, dass es Es ist möglich, mehrere Registerkarten gleichzeitig zu öffnen, Genauso wie es möglich ist, mehrere Kontrollkästchen in einem Formular zu markieren.
Auf der anderen Seite schließen sich die Registerkarten nicht von selbst, wenn der Benutzer auf eine andere klickt. Die Logik des HTML-Codes ist dieselbe wie zuvor. Nur in diesem Fall müssen Sie das Kontrollkästchen für den Eingabetyp verwenden.
Inhaltstitel (hier nicht das h1-Tag verwenden)
Einige Inhalte…
p>
Checkbox Akkordeon mit fester Höhe
Wenn Sie Inhaltsregisterkarten mit fester Höhe wünschen, ist die Logik des CSS ungefähr die gleiche wie in der Optionsfeld-Option. Es wurde lediglich der Eingabetyp von Radio zu Kontrollkästchen geändert. In diesem Codepen-Stift können Sie sich den Code ansehen.
Kontrollkästchen Akkordeon für Flüssigkeitshöhe
Wenn mehrere Registerkarten gleichzeitig geöffnet sind, kann die Anzeige der Registerkarten mit fester Höhe die Benutzererfahrung negativ beeinflussen, da die Höhe des Akkordeons erheblich anwachsen kann. Dies kann verbessert werden, wenn Sie Ändern Sie die feste Höhe in Flüssigkeitshöhe; Das heißt, die Höhe der geöffneten Registerkarten wird entsprechend der Größe des Inhalts, den sie enthalten, vergrößert oder verkleinert.
Dazu müssen Sie Ändern Sie die feste Höhe des Registerkarteninhalts auf eine maximale Höhe, und relative Einheiten verwenden:
Eingabe: Geprüfter ~ Tab-Inhalt max-height: 50em;
Wenn Sie die Funktionsweise dieser Methode besser verstehen möchten, können Sie sich diesen Codepen ansehen.
3. Die: Zielmethode
: target ist einer der Pseudo-Selektoren von CSS3. Mit seiner Hilfe können Sie ein HTML-Element auf folgende Weise mit einem Ankertag verknüpfen:
Titel des Tabs
Inhalt des Tabs
Wenn der Benutzer auf den Titel eines Registers klickt, wird der gesamte Abschnitt dank geöffnet :Ziel Pseudo-Selektor und die URL wird auch in das folgende Format geändert: www.some-url.com/#tab-1.
Die geöffnete Registerkarte kann in CSS mit Hilfe von formatiert werden Abschnitt: Ziel … Regel. Wir haben hier auf hongkiat ein großartiges Tutorial darüber, wie man mit dem nur schöne CSS-only-Akkordeons erstellen kann :Ziel Methode in vertikalen und horizontalen Layouts.
Der Hauptmangel des :Ziel Methode ist das Sie ändert die URL, wenn der Benutzer auf die Registerkarten klickt. Dies wirkt sich auf den Browserverlauf aus und der Zurück-Button des Browsers führt den Benutzer nicht zur vorherigen Seite, sondern zum vorherigen Zustand des Akkordeons.
4. Die: hover-Methode
Dieser letztere Mangel kann überwunden werden, wenn wir das nutzen :schweben CSS-Pseudo-Selektor statt :Ziel, In diesem Fall reagieren die Registerkarten jedoch nicht auf den Klick, sondern auf das Hover-Ereignis. Der Trick hier ist, dass Sie müssen verstecken Sie die nicht verdeckten Elemente, oder verringern Sie ihre Breite oder Höhe - abhängig vom Layout der Registerkarten
Das schwebende Element muss sichtbar gemacht oder auf volle Breite / Höhe eingestellt werden, damit das Akkordeon funktioniert.
Die folgenden 3 Nur-CSS-Akkordeons wurden alle mit der: hover-Methode erstellt. Klicken Sie auf die Links unter den Screenshots, um sich den Code anzusehen.
Horizontales Bildakkordeon
Schiefes Akkordeon
Durch Hover aktiviertes Akkordeon mit Standardstatus
