Wer hat zwei Daumen und liebt es, die Grenzen von CSS zu erweitern? Dieser Typ. Lassen Sie uns in ein Projekt springen, das genau das tut. Es ist ziemlich experimentell und wird die semantische Polizei nicht bestehen, aber es wird Ihnen eine Menge über fortgeschrittene CSS-Taktiken beibringen und wird jede Menge Spaß machen.
Was wir bauen werden, ist ein reiner CSS-Akkordeon-Schieberegler. Sie können so viele Folien einfügen, wie Sie möchten, jede mit einzigartigem Inhalt und jede über ein Klickereignis zugänglich, und das alles ohne JavaScript. Unmöglich sagst du? Noch nie!
Was wir bauen
Das Endprodukt der heutigen Bemühungen wird ein gleitendes, animiertes und anklickbares horizontales Akkordeon-Menü sein. Wir möchten ein paar schmale Balken, die beim Klicken erweitert werden, um ausgeblendete Inhalte anzuzeigen.
Demo: Klicken Sie hier, um zu starten.
Anklickbares CSS
Wie Sie wissen, unterstützt CSS keine Klickereignisse. Wie können wir dieses Ding dazu bringen, von Folie zu Folie zu wechseln? Wir könnten den einfachen Ausweg nehmen und einen Schwebeflug verwenden, aber wo ist der Spaß dabei? Lassen Sie uns stattdessen etwas schwierigeres ausprobieren und eine Reihe von Optionsfeldern entführen.
Mit den Optionsfeldern haben wir alles, was wir brauchen: eine Gruppe von anklickbaren Elementen, bei denen nur eines ausgewählt werden kann und das ausgewählte Element leicht anvisiert und gestaltet werden kann. Perfekt! Semantisch Nicht ganz? Wenn Sie dies auf eine Art und Weise tun möchten, die unter einer Peer-Review bestehen bleibt, verwenden Sie JavaScript. Heute treiben wir einfach CSS so weit, wie es möglich ist, um zu sehen, ob wir auf dem Weg etwas lernen können.
Schritt 1: HTML-Frame
Der Bau eines neuen Webdesign-Projekts ist wie der Bau eines Hauses. Der erste Schritt ist, einen einfachen, aber soliden Rahmen zu schaffen, auf dem Sie den Rest aufbauen können. Um dies zu erreichen, legen wir etwas HTML für den Einstieg fest.
Das erste, was wir brauchen, ist eine ungeordnete Liste innerhalb eines Formularelements. Dies erscheint an diesem Punkt etwas seltsam, aber es wird in einer Minute sinnvoller.
Hier repräsentiert jedes Listenelement eine Folie. Wenn Sie fünf Folien wünschen, sollten Sie fünf Listenelemente haben. In unserem Testprojekt werden drei Folien verwendet. Warum also das Formularelement? Lass uns das als nächstes angreifen.
In jedes Listenelement werden drei Elemente eingefügt: Eingabe, Beschriftung und Div. Die Eingänge sind Optionsfelder, die mit Beschriftungen versehen sind. Zusammen bilden diese beiden Elemente unsere Akkordeonsteuerungen. Das div wird den Inhalt enthalten, der in jeder Folie enthalten sein soll.
Wie ich oben erwähnt habe, verwenden wir hier Radioknöpfe, weil sie alle Funktionen bieten, die wir benötigen, um dieses kleine Kunststück zu vollbringen. Das Problem ist natürlich, dass sie wie Optionsfelder aussehen. Wir können dies jedoch mit der Magie von CSS beheben.
Schritt 2: Überschreiben Sie die Formularstile
Unsere nächste Herausforderung ist es, hässliche Radio-Buttons hübsch zu gestalten. So sieht unser HTML-Code ohne Styling aus:
Wie Sie sehen können, haben wir zwischen den Aufzählungszeichen und den Optionsfeldern unsere Arbeit eingestellt. Zuerst aber zuerst, bevor wir irgendetwas anderes machen, werfen wir den Reset eines faulen Mannes heraus:
Dies stellt sicher, dass unsere Margen und Polsterungen in verschiedenen Browsern funktionieren und dass die Polsterung unsere explizit angegebenen Abmessungen nicht beeinträchtigt. Border-Box macht dies, indem das Standard-CSS-Box-Modell benutzerfreundlicher wird.
Löschen Sie die Listenstile
Lassen Sie uns als Nächstes etwas leichtes angehen. Diese Aufzählungspunkte können mit einem einfachen Stilblock erledigt werden, mit dem Sie sicher vertraut sind.
Blenden Sie die Radioknöpfe aus
Jetzt ist es an der Zeit, die Optionsfelder anzuvisieren und vom Bildschirm zu entfernen. Dazu setzen wir einfach ihre Position auf absolut und platzieren sie dann weit weg.
Beachten Sie, dass mein Selector hier super generisch ist. Wenn Sie dieses Objekt in ein Projekt einfügen, stellen Sie sicher, dass Sie nicht alle Eingaben auf die hier angegebene Weise als Ziel verwenden. Wirf das Ganze in ein div mit einer Klasse und ziele nur auf die Eingaben, die dieser Klasse zugeordnet sind.
Gestalten Sie das Label
Jetzt ist unser Radioknopf ausgeblendet, aber warum haben wir uns dazu entschieden? Wie werden wir das Akkordeon kontrollieren? Die Antwort ist natürlich, dass das Etikett eines Optionsfelds als alternativer Klickpunkt dient und freier gestaltet werden kann. Dies bedeutet, dass unsere Funktionalität auch bei deaktiviertem Radioknopf in den Etiketten vorhanden ist. Wir müssen sie lediglich präsentieren.
Hier habe ich meinen Code in drei Teile aufgeteilt, damit wir ihn problemlos durchgehen können. Der erste Abschnitt bestimmt den Formfaktor des Etiketts: Höhe, Breite, Rand, Überlauf usw. Wir haben die Beschriftungen grundsätzlich in große Rechtecke umgewandelt, die direkt nebeneinander liegen.
Als Nächstes werden die Stile angegeben, die das Erscheinungsbild der Etiketten bestimmen. Wir haben den Hintergrund auf grau eingestellt, den Text in der Mitte ausgerichtet (die kleinen Zahlen) und die Schriftgröße einstellen.
Schließlich richten wir einige Übergänge ein, damit die Änderungen, die wir später vornehmen werden, animiert werden.
Schritt 3: Mehr Label-Styling
Mit dem letzten Teil des Stylings haben wir unsere langweiligen alten Radioknöpfe vollständig in etwas umgewandelt, das viel näher an dem liegt, was wir erreichen wollen.
Ich mag es nicht, dass es zwischen den drei Registerkarten keine Definition gibt, also helfen wir dies zusammen mit etwas mehr Styling.
Hier haben wir den zweiten Tab so abgedunkelt, dass er sich zwischen dem ersten und dem dritten Tab hervorhebt, einen weiteren Übergang hinzugefügt und die Hover-Stile so eingestellt, dass die Tabs noch dunkler werden, wenn der Benutzer den Mauszeiger darüber legt. Dadurch werden unsere Registerkarten viel besser aussehen:
Schritt 4: Dia-HTML
Jetzt, da unsere Registerkarten so aussehen, wie wir es wollen, können wir zurückgehen und unseren HTML-Code beenden. Dieser Inhalt wäre in die Quere gekommen, wenn wir ihn zuvor eingefügt hätten, aber er sollte jetzt verborgen bleiben.