Accordion Boxen mit CSS3

Es gibt dank CSS3 einen fast schon unfassbar einfachen Weg, um dynamisch animierte Accordion Menus bzw. Boxen zu erstellen, die beim Anklicken des Titels sich gemächlich (natürlich nach genauer Vorgabe des Schöpfers) auseinanderfalten.

Nachfolgend dazu ein Beispiel:
Accordion Menus (klick mich!)

Kaum zu glauben: kein JavaScript ist für diese schicke Accordion-Box notwendig

Alles per css3 transition

Transitions sind sehr praktisch, um spielend einfach eine Animation zu bauen - in diesem Falle für das Ausklappen der Accordion-Box.

Technik des CSS Accordions
Das erste DIV in einer Accordion-Box hat einfach eine Höhe von "0" und transition.
Der Link, der alles umschließt verweißt nicht auf eine andere Seite, sondern per Anker (#) auf das in Ihm enthaltene DIV. Über das Pseudoelement :target wird beim Anspringen eines DIVS durch Klicken des Links die Höhe des DIVS geändert und damit die transition gestartet.

Einen kleiner Workaround, der nur dem geneigten Betrachter aufgefallen sein dürfte: wenn nach der Box noch einiges an Content kommt, springt der Browser beim Klicken eines Links in der Accordion Box so weit nach oben, dass der eigentliche Inhalt aus dem sichtbaren Bereich nach oben verschwindet.
Nach einigem Tüfteln haben wir auch dafür eine sehr schöne Lösung gefunden: das innere DIV erhält einfach einen negativen Außenabstand (margin) mindestens in Höhe der Accordion Box, sodass der Browser an eine entsprechend weit oben gelegene Stelle zurückspringt. Ein gleich großes positives padding sorgt dafür, dass der Text dennoch an der richtigen Stelle angezeigt wird.

Credits gehen an darkcrimsons CSS3 Demo - Das mit dem Margin ist aber von mir 😉

Dieser Beitrag wurde unter CSS3 abgelegt und mit , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

5 Antworten auf Accordion Boxen mit CSS3

  1. aja sagt:

    Ein Test mit dem Validator von w3c liefert 6 Fehler + 1 Warning für das Beispiel/die Seite …

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.selfhtml5.org%2F2013-css3%2Faccordion-menus-mit-css3%2F%23more-803

    Ich habe mir nicht die Mühe gemacht herauszufinden, ob sich die Fehler nur auf das Drum-Herum (unzulässige Zeichen der Links/URLs für Frazenbuch & Co) beziehen bzw. in welchem Umfang der Kern des Beispiels von den Fehlern betroffen ist, … aber zumindest die Verwendung nicht zulässiger Elemente und Attribute schreckt schon ab (wenn man eine 100% standardkonforme Seite bauen möchte) …

    • html5-admin sagt:

      echt, schreckt dich das ab? Validiere doch mal so eine minimale Seite wie google.de: aktuell 24 Errors – nur in der Suchmaske… Das mit dem Validieren kann man auch übertreiben und sagt letztlich fast nichts über die Qualität der Seite…

  2. Conny R. sagt:

    Hallo Zusammen, ich habe bereits ein schickes Accordion-Menü im Contentbereich ähnlich dem oben gebastelt. Die Positionierung – damit es nicht nach oben springt, habe ich geschafft über ein positon:fixed; bei nav und beim wrapper position:absolute; – das klappt. Eine statische Mainnavi dazu ist auf der linken Seite (lt. Layout) des Contentbereiches. Nun soll nach Designvorgaben – leider von einer Designerin, die nicht viel Ahnung von Webprogrammierung hat ;-( und das Design schon abgesegnet ist – innerhalb des Accordion-Menüs, wie gesagt, es ist im Contentbereich als eine Art Subnavi – Unterseiten basteln, die über Links innerhalb des Accordion-Menü zu erreichen sind. Die Links innerhalb des Accordion-Menüs vererben sich und sehen genauso aus, wie die anker-Links siehe oben – schwarze Balken – weisse Schrift. Auch das habe ich über die important! Regel überschreiben können. Allerdings sind die Links inaktiv und funktionieren nicht – kann mir jemand helfen?

  3. Conny R. sagt:

    herzlichen Dank für die Antwort – ich hab bei den Links beim „a“ zwar eine Klasse vergeben, aber den „href“ vergessen – über Angabe im Header und der important! Regel hat es geklappt.
    Diese Seite hat mich inspiriert: http://cssmenumaker.com/builder/4117626

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *