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

Schreibe einen Kommentar

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