CSS3 Toggler - Vertikales Menu zum Auf- und Zuklappen - Tag 16 im CSS3 Adventskalender 2011

CSS3 Toggler - Vertikales Menu zum Auf- und ZuklappenAuf- und Zuklappen (toggle-effect) ohne JavaScript - Fließend animierte Übergänge bei Slide- oder Aufklapp-Effekten von Webseiten-Elementen wie beispielsweise einem Menü, wurden bisher meistens mit JavaScript umgesetzt. Die CSS3 Pseudoklasse :target und die Negationspseudoklasse :not(), zusammen mit dem CSS3-Modul Transition, ermöglichen ein solches "Bewegungsmuster". Nur eben ganz ohne JavaScript! Das heißt, dass die durchaus beliebten "Akkordeon- oder auch Toggle-Effekte" ausschließlich via CSS umgesetzt werden können! Das heißt auf der anderen Seite dann natürlich auch das Requests für JavaScript eingespart werden könnten. Das interessante an diesen nun mittlerweile vorhandenen Möglichkeiten mit CSS3 ist, dass für das Verhalten von Elementen und Inhalten JavaScript Konkurrenz von CSS bekommt. Und Konkurrenz belebt bekannterweise das Geschäft. Wie das genau geht, zeigt der nun folgende Workshop!

Modernes Webdesign mit CSS - Das neue Buch!

Akkordeon- bzw. Toggler-Menu - Die HTML-Struktur

Das HTML-Grundgerüst dieses Navigationsmenüs besteht aus drei Menüpunkten li, die die Titel von drei CSS3 Workshops meines aktuellen Buches Modernes Webdesign mit CSS enthalten, welche sich in einer Überschrift zweiter Ordnung h2 befinden. Nach dem Aufklappen des jeweiligen Überschriftenelementes werden ein in einem Paragraphen p befindlicher Ausschnitt der Abbildung des Workshops, sowie eine in einem span-Element befindliche Beschreibung zu diesem Workshop sichtbar.

CSS3 Toggler - HTML-Code
<ul class="tutorialMenu">
    <li id="coffeecards">
        <h2><a href="#coffeecards">CoffeeCards</a></h2>
        <p>
            <span>CSS3 Eigenschaften: Transform ...</span>
        </p>
    </li>
    <li id="blogcomments">
        <h2><a href="#blogcomments">BlogComments</a></h2>
        <p>
            <span>CSS3 Eigenschaften: Border-Radius, ...</span>
        </p>
    </li>
    <li id="onlineform">
        <h2><a href="#onlineform">OnlineForm</a></h2>
        <p>
            <span>CSS3 Eigenschaften: MediaQueries, ...</span>
        </p>
    </li>
</ul>

Eine ähnliche HTML-Struktur besitzt das hier im Blog bereits veröffentlichte Beispiel CSS3 Menu mit Slide-Effekt. Dieses wurde allerdings noch ohne die Negationspseudoklasse :not() realisiert, was allerdings dazu führt das die zur Überschrift h2 hinzugehörigen Inhalte aus dem Paragraph p für ältere Browserversionen nicht zugängig sind, da diese bei diesem "alten Ansatz" verschlossen bleiben. Ein "Fehlverhalten" welches mit diesem CSS3 Tutorial behoben werden soll. Auf Basis dieser HTML-Struktur dieses Tutorials ist die Darstellung ohne CSS-Eigenschaften, noch sehr spartanisch und alles andere als ansehnlich.

CSS3 Toggler - HTMLDarstellung des CSS3 Togglers auf HTML-Basis ohne CSS

Da dieses Tutorial seinen Fokus auf die auf- und zuklappbaren Elemente und die darin befindlichen Inhalte legt, gehe ich an dieser Stelle nicht näher auf die Implementierung der gekachelten grauen Hintergrundgrafik und das Ausblenden des list-style-types der Listenpunkte ein.

Anklickbare Elemente (Überschriften) gestalten

Die verlinkten und somit auf- und zuklappbaren Überschriftenelemente erhalten alphatransparente Hintergrundfarben. Diejenigen Browser dies diese nicht darstellen erhalten eine RGB-Fallback. Bitte beachten Sie, dass diese Angaben ausschließlich für Browser gelten, die die im weiteren Verlauf folgenden Pseudoklassen :target und :not nicht (!) unterstützen. Dazu gehören von den aktuell relevanten Browsern in erster Linie alle Versionen des Internet Explorers kleiner gleich Version 8.

Überschriften gestalten und ausrichten
.tutorialMenu h2 {
    margin:5px 0;
    padding:0;
}
.tutorialMenu h2 a {
    font-size: 18px;
    display: block;
    font-weight: normal;
    color:#FFF;
    text-decoration:none;
    margin:0;
    padding:10px;
    background:rgb(144,144,144); /* Fallback */
    background:rgba(255,255,255,.3);
}

Diese beiden Pseudoklassen werden im späteren Verlauf des Workshops dafür sorgen, dass Inhalte ein- und ausgeblendet werden können und zusätzlich noch die Gestaltung der Überschriften h2 übernehmen.

CSS3 Toggler - geschlossene ElementeInitiale Darstellung des CSS3 Togglers - Die drei Überschriften sind geschlossen. Bei Ansätzen mit JavaScript, würde diese zu diesem Zeitpunkt nun wahrscheinlich die Klasse inactive oder closed besitzen.

Um die drei Bereiche dieses Menüs nicht alle auf einmal aufgeklappt betrachten und je nach Größe des Viewports scrollen zu müssen, kommen nun zwei Pseudoklassen ins Spiel, die es in Kombination mit der CSS3-Eigenschaft transition ermöglichen, Elementen den Auf- und Zuklappmechanismus zuzuweisen.

Gestalten der ein- und ausblendbaren Inhalte

Damit die in den Elementen enthaltenen Inhalte auch für Nutzer alter Browser wie beispielsweise dem IE 6 zugänglich sind, wurde den Elementen, die auf diese Weise eingeblendet werden, die Negationspseudoklasse :not() vorangestellt. Direkt danach wird in Klammern aufgeführt, für welche Pseudoklasse diese Negationspseudoklasse gilt. Das Verstecken bzw. Ausblenden der Inhalte formulieren wir also über einen Selektor mit dem Konstrukt :not(:target) (siehe Zeile 1). Da der IE kleiner gleich 8 mit diesen Anweisungen nichts anfangen kann, macht er an dieser Stelle auch nichts und zeigt einfach alle Menüpunkte aufgeklappt an. Da natürlich auch diese "negierten Elemente" gestaltet werden müssen, weisen wir den Überschriften h2 für den inaktiven Zustand eine wechselnde Hintergrundeigenschaft zu.

"inaktive" Überschriften gestalten
.tutorialMenu :not(:target) h2 a {
    background: rgb(59,59,59);/* Fallback */
    background: rgba(0,0,0,.4);
}

Die Spezifikation des :target Selektors - Sogenannte Ankerindikatoren im Uniform Resource Identifier (kurz URI) - stehen am Ende der Adresse, beginnend mit dem Zeichen #, gefolgt von einem idealerweise eindeutigen Namen. Angewendet auf dieses aus meinem Buch stammenden Workshop könnte ein Beispiel wie folgt lauten:

http://webstandard.kulando.de/static/css3-toggler/#coffeecards

Existiert innerhalb eines HTML-Dokumentes ein Element, das die ID coffeecards besitzt (siehe HTML-Code Zeile 3), dann springt der Cursor direkt an die auf diese Weise definierte sogenannte "Sprungmarke". Die Pseudoklasse :target in Kombination mit der Negationspseudoklasse :not() ermöglicht es, für genau dieses Verhalten dem Browser eine gesonderte Gestaltung anzubieten (siehe CSS-Code Zeilen 2 und 3). Der Vorteil dieses Ansatzes, man benötigt keine Klassen "active" oder "inactive" für die entsprechenden Elemente und das sorgt für performanten und schlanken HTML-Code. Als nächstes widmen wir uns dem fokussierten Zustand eins Menüpunktes bei MouseOver.

fokussierte Überschriften gestalten
.tutorialMenu h2 a:hover,
.tutorialMenu h2 a:active,
.tutorialMenu h2 a:focus {
    background:rgb(144,144,144);/* Fallback */
    background:rgba(255,255,255,.3);
}

Hierzu wird den drei möglichen Zuständen :hover, :active und :focus eine hellere leicht transparente Hintergrundfarbe zugewiesen (mit Fallback für Browser die keine RGBA-Werte umsetzen können), so dass dem Benutzer visuell dieser Farbwechsel deutlich vor Augen geführt wird.

CSS3 Toggler - MouseoverDarstellung des CSS3 Togglers bei MouseOver der Überschrift "CoffeeCards"

Da bis auf den MouseOver-Effekt vom Akkordeon- bzw. Toggler-Menu noch nicht viel zu sehen, wird in den nächsten Arbeitsschritten dafür gesorgt dass die Inhalte nach Anklicken der Menüpunkte eingeblendet werden.

Toggler-Effekt vorbereiten

Für alle Browser, die die Pseudoklasse :target und die Negationspseudoklasse :not() und deren Eigenschaften umsetzen können, wird nun der Ein- und Ausblend-Effekt umgesetzt. Zunächst wird sichergestellt, dass im geschlossenen Zustand der Menüpunkte weder die Hintergrundgrafik noch die Autoreninfo sichtbar sind, sondern erst nach Aktivieren des Menüpunktes sichtbar werden. Dazu bekommt das Absatzelement p initial eine Höhe von Null Pixel (siehe Zeile 4).

inaktiven Zustand definieren & Bilder zuweisen
.tutorialMenu :not(:target) p {
    padding:0;
    margin:0;
    height:0;
    overflow: hidden;
}
...
.tutorialMenu #coffeecards p,
.tutorialMenu #blogcomments p,
.tutorialMenu #handcraftedCSS p {
    background: url(coffee-cards.jpg) top left no-repeat;
    position:relative;
}
.tutorialMenu #onlineform p {
    background-image: url(blog-comments.jpg);
}
.tutorialMenu #onlineform p {
    background-image: url(online-form.jpg);
}

Die in der folgenden Abbildung enthalten Screens der drei hier verwendeten Workshop-Beispiele, werden als Hintergrundgrafik mittels der nächsten Eigenschaften sichtbar gemacht (siehe Zeilen 8 bis 19).

CSS3 Toggler - BilderinhalteDarstellung der Hintergrundbilder die im aufgeklappten Zustand eines Elementes sichtbar werden

Um die Ausschnitte der drei CSS3 Tutorial und die darin verwendeten CSS3 Eigenschaften und Module im aufgeklappten Zustand in voller Höhe betrachten zu können, wird nun die Höhe des einzublendenden bzw. in den älteren IE-Versionen stets geöffneten Bereiches auf 295 px festlegen.

Höhe für aktiven Zustand definieren
.tutorialMenu p {
    height:295px;
}
...

Das heißt, je größer der Wert für die Höhe dieses Bereichs ist, desto höher ist später auch der ein- und auszublendende Bereich. Der an dieser Stelle angegebene Wert von 295 px orientiert sich an den Größen der Grafiken der Workshopscreens die alt Hintergrundgrafik eingeblendet werden.

Toggler-Effekt - Inhalte ein- bzw. ausblenden

Jetzt widmen wir uns dem CSS3-Modul welches erst zum eigentlichen Entstehen dieses Workshops geführt hat - CSS3 Transition. Diese Eigenschaft ermöglicht es die eingangs genannten, fließenden animierten Übergänge. In diesem Fall soll sie dem Menö einen "Slide- bzw. Toggle-Effekt" zuweisen, so wie ihn die meisten von Euch sicherlich bereits kennen - mit hoher Wahrscheinlichkeit allerdings auf Basis von JavaScript. Das heißt, beim Klick auf einen der drei Menüpunkte werden die in den Absätzen befindlichen Inhalte ein- bzw. ausgeblendet. Dieses Bewegungsverhalten können Sie zudem mit der Eigenschaft ease-in zeitlich steuern. Die hier gewählte Dauer von 1,5 Sekunden ist natürlich ein wenig hoch gegriffen. Da dieser Workshop aber auch einen Demonstrationscharakter besitzen soll, bekommen Sie so die Möglichkeit, den Effekt besser zu nachzuvollziehen, als beispielsweise bei 0,25 Sekunden ;o)

Dauer des Slide-Effektes definieren
.tutorialMenu :not(:target) p {
    -moz-transition: height 1.5s ease-in;
    -webkit-transition: height 1.5s ease-in;
    -o-transition: height 1.5s ease-in;
    transition: height 1.5s ease-in;
}
...

Beachtet bitte, dass diese auf dem CSS3-Transition Modul basierenden Eigenschaften momentan mit den webkit-betriebenen Browsern wie Safari und Google Chrome, allen 11er-Version des Opera-Browsers und ab Firefox Version 4 funktionieren (siehe folgende Abbildung). Das bedeutet, dass knapp 90Prozent aller Leser dieses Blogs, diesen CSS3 Toggler in "voller Pracht" begutachten können ;o)

CSS3 Toggler - aufgeklapptes aktives ElementDarstellung des CSS3 Togglers bei geöffnetem Element. Bei Ansätzen mit JavaScript, würde der Menüpunkt "CoffeeCards" zu diesem Zeitpunkt nun wahrscheinlich die Klasse active oder open besitzen.

Das Auf- und Zuklappen funktioniert auch im IE9, allerdings ohne den Slide-Effekt. Ein Zustand mit dem man allerdings durchaus leben kann. Wer also möchte und über die enstprechende browserversion verfügt, kann sich die Demo-Version dieses CSS3 Toggler Tutorials gern auch live ansehen.

View CSS3 Toggler Demo

CSS3 Toggler - Browser-Support

Da der Internet Explorer erst seit Version 9 die Pseudoklassen :target und :not() unterstützt, ignorieren all seine Vorgängerversionen diesen Auf- und Zuklappmechanismus. Daher bekommen die Anwender dieser älteren IE-Versionen, alle Inhalte im aufgeklappten Zustand zu Gesicht.

CSS3 Toggler - Browser-SupportBrowser-Support des CSS3 Togglers (betrifft die jeweils letzte aktuelle Version)

Für all diejenigen, für dieser Ansatz für eigene Web-Projekte aufgrund eines zu hohen Anteils an Besuchern mit älteren Versionen des IEs nicht in Frage kommt, die können diesen Slide-Effekt mit jQuery relativ unkompliziert und schnell umsetzen. Im nächsten Beitrag zum CSS3 Adventskalender 2011 hier im Webstandard-Blog, wird es darum gehen den geschlossen und aufgeklappten Zustand der Menüpunkte (Überschriften h2) durch ein Pfeil-Icon zu verdeutlichen. Das Interessante daran, es wird keine Sprite mit mehreren Icons des Pfeils verwendet, sondern lediglich ein einziges. Um zu erfahren, wie man auch dies ausschließlich mit CSS3 umsetzen kann und dabei alle Browserversionen unterstützt die bereits dieses CSS3 Tutorial hier umsetzen konnten, müsst ihr euch noch bis Sonntag gedulden.

Viel Spaß mit CSS3!

  1. Marcell 16 Dez 2011, 09:02

    Das Tutorial zum Accordion-Menu im Apple-Style hat mir schon gut gefallen, aber eben genau der Aspekt, dass Browser die die dort beschriebenen Eigenschaften nicht umsetzen können war bisher ein Kriterium dieses Beispiel nicht zu verwenden. Daher verwundert es dich bestimmt nicht, dass mir der heutige Ansatz noch besser gefällt und somit praxistauglich ist.

    DANKE!


  2. Kai
    16 Dez 2011, 09:26

    Wie immer ein klasse Tutorial. Besten Dank dafür!


  3. fimbim 16 Dez 2011, 09:27

    Wie immer gut erklärt, nur haut mich der Effekt echt nicht um. Und die Slidgeschwindigkeit verjagt nach 8 Sekunden die ersten Besucher von deiner Seite :)


  4. Webstandard-Team
    16 Dez 2011, 09:51

    @fimbim: Warum die von dir angesprochene und hier im Tutorial verwendete Slidgeschwindigkeit langsam ist, steht im Artikel. Leider ist es auch nie möglich alle Leser mit den Inhalten "umzuhauen" ;o)


  5. Sebastian K. 16 Dez 2011, 10:38

    Ja super... dann spar ich mir doch gleich mal meine heutige Suche für JS für eine solche Umsetzung und mach es gleich so. Danke. Das war genau das richtige am heutigen Tag. Und 1,5 sek. sind sicherlich ein wenig viel. Da probier ich gleich mal noch andere Geschwindigkeiten aus.


  6. Heike
    16 Dez 2011, 10:50

    Vielen Dank für die detaillierte Beschreibung.


  7. Webstandard-Team
    16 Dez 2011, 11:40

    @Sebastian: Nochmal zum Argument der Aufklappdauer. Dazu steht im Text oben "Die hier gewählte Dauer von 1,5 Sekunden ist natürlich ein wenig hoch gegriffen. Da dieser Workshop aber auch einen Demonstrationscharakter besitzen soll, bekommen Sie so die Möglichkeit, den Effekt besser zu nachzuvollziehen, als beispielsweise bei 0,25 Sekunden ;o)"

    Eine JS Variante hättest du im übrigen nicht suchen müssen, auch hierzu gibt es im letzten Absatz einen Link dazu.

    @Kai & Heike: Bitte ;o)


  8. Barbara Minazzi 16 Dez 2011, 16:12

    Echt ein klasse Tutotial...
    Vielen Dank dafür und hoffe wieder bald was neues zu sehen!


  9. Patrick Zorn 17 Dez 2011, 11:54

    Ist zwar ein wirklich nettes Tut, aber DIE große Neuheit ist es ja jetzt nicht. Geht auch mit CSS2 (Pseudoklassen in Verbindung mit visibility). Natürlich ist es mit der neuen CSS Version praktikabler :-)

    Ich kann echt kaum abwarten, bis die meisten Nutzer soweit sind und Browser nutzen, die CSS3 und HTML5 richtig interpretieren.


  10. Robert 17 Dez 2011, 12:24

    Wirklich interessant.

    Warum scrollt der Browser beim Klick auf die H2s eigentlich nicht an die Position der :target-Sprungmarken (#coffecards etc.)?


  11. Webstandard-Team
    17 Dez 2011, 21:49

    @Patrick: Dieses Tutorial widmet sich dem Auf- und Zuklappen und das wird erst mit Transition zu dem was es ist, dass was du mit CSS2 beschreibst ist lediglich ein Ein- und Ausblenden, ohne jegliche "Bewegung".


  12. Thomas 19 Dez 2011, 09:56

    @Robert: Das tut es, und genau dieses Verhalten macht den Slider im produktiven Einsatz auch leider völlig unbrauchbar.

    In diesem Demo (und bei so zielmich allen Demos zu :target) sieht man das Problem nicht, da der Content einfach viel zu klein ist und somit komplett ins Browserfenster passt, wenn der Slider in einer richtigen Website eingebunden ist (und somit nach oben und unten gescrollt werden kann) Springt das Browserfenster bei jedem Klick.

    Im demo einfach mal oben und unten 500px margin hinzufügen, dann merkt man schnell, dass diese Technik leider doch keine alternative zu JavaScript ist


  13. Patrick Zorn 21 Dez 2011, 13:31

    @team

    hast recht, ich hätte den Code vielleicht doch mal in den Editor kopieren sollen :-/


  14. oliver
    30 Dez 2011, 07:36

    @Thomas

    Stu Nicholls hat eine Lösung für :target _ohne_ Jump veröffentlicht:

    http://goo.gl/YG6UH

    Das Beispiel ist nur eine Bildergalerie, aber prinzipiell sollte das auch mit einem Toggler funktionieren. Am nächsten verregneten Sonntag werde ich's mal ausprobieren umzusetzen.

    Der Kerl wird dieses Jahr 70 und ist ein Genie - schade das er sich jetzt zur Ruhe setzen will.

    @ Webstandard-Team

    Vielen Dank für das schöne Beispiel. Alles gute für's neue Jahr, hoffe das ihr mit solchen Tutorials weiter macht. Auch wenn das [noch] nicht für den produktiven Einsatz geeignet ist, sind das wichtige Fingerübungen.


  15. Webstandard-Team
    30 Dez 2011, 10:27

    @Oliver: Vielen Dank für deinen Link! Und ja, es wird auch im neuen Jahr weitere Tutorials geben ;o)


  16. oliver
    08 Jan 2012, 23:27

    Hi,

    wie versprochen - heute war ein verregneten Sonntag - habe ich mich noch mal über den 'Jump-Effekt' beim Toogler hergemacht. Und das Problem von einer völlig neuen Seite angegangen - nämlich den Toggler mit der Pseudoklasse :ckecked nachgebaut:

    CSS3-Toggler mit der Pseudoklasse :checked

    Was mich interessieren würde, wo ist der Hacken an der Sache? So weit ich erkennen kann, scheint das ganze in allen modernen Browsern zu funktionieren. Gibt's irgendwelche Probleme, die ich noch nicht erkenne? [außer den üblichen Problem, dass es der IE8 nicht versteht und es deshalb ein Fallback braucht ...]

    Oliver


  17. chrikle 09 Mär 2012, 08:31

    Hallo.

    Ein tolltes Tut - danke dafür :-)

    Eine Frage hab ich da aber noch:
    Wie kriegt man es hin, unterschiedliche Höhen für die
    einzelnen "Boxen" zu benutzen.?

    ich habe etwas herumprobiert, aber es hat nie wirklich funktioniert :-(

    Gruß
    Chris


  18. Josef Klemm 23 Apr 2012, 14:21

    Ich taste mich gerade an das Thema heran und Artikel wie dieser sind perfekt für mich. Einen großen Dank und viel Respekt für die Arbeit die dahinter steckt. Ich verfolge euren Blog weiter.


  19. Mandarin
    25 Apr 2012, 15:56

    Ich kann nur wiederholen was bereits gesagt wurde, echt hilfreiches Tutorial! Auch von mir ein dickes Danke und Propps für den Beitrag!


  20. MD 26 Apr 2012, 20:16

    Ich schließe mich da dem Mandarin an, oft hast du das Problem, dass viel zu viel getextet wird um etwas zu erklären, hier nicht. Einfach, klar, und schritt für schritt. Vielen Dank, eine Top Anleitung. empfehlenswert


  21. Marcel Wechsler
    02 Mai 2012, 08:57

    Jawohl ich kann nichts weiter hinzufügen außer, dass mit dieses Tuturial mehr als geholfen hat. Vielen Dank an dieser Stelle


  22. Steve Miske 02 Mai 2012, 20:59

    Ich steh auf solche Tutorials, einfach erklärt, step by step und vor allem mal richtig nützlich. ich möchte mich meinem "vorkommentierern" anschließen und dem Autor für diesen Artikel Dank sagen.


  23. Thomas 11 Jul 2012, 22:31

    Das ist wirklich ein guter Fundus an Informationen.
    Die CSS3 Toggler-Demo ist für gleich lange Inhalte. Habe noch nicht ganz verstanden, wie man variable Längen realisieren kann.
    Beste Grüße Thomas


  24. Max 22 Jan 2013, 11:24

    Kann mich meinen Vorredner da nur anschließen, klasse Tutorial. Auch wenn es schon etwas älter ist, ist es immernoch aktuell umsetzbar. Danke!


  25. Dirsur 24 Jan 2013, 13:35

    Damit die in den Elementen enthaltenen Inhalte auch für Nutzer alter Browser wie beispielsweise dem IE 6 zugänglich sind


  26. Moritz 07 Jun 2013, 02:49

    Super Menü, danach such ich schon ewig, ein Problem gibt es nur.
    wieso schließt sich der inhalt nicht wenn man nochmal auf den gleichen button klickt?
    wie geht das? dann ist es perfekt!

    Kann mir jemand helfen?

    Gruß Moritz


  27. Martin
    15 Okt 2013, 06:56

    Danke für dein Anleitung! Werde einige Test als Versuch mal durchführen, ob es mir am Ende auch bei einem neuen Design gefällt :)


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage