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:Kaum zu glauben: kein JavaScript ist für diese schicke Accordion-Box notwendig
Transitions sind sehr praktisch, um spielend einfach eine Animation zu bauen - in diesem Falle für das Ausklappen der Accordion-Box.
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 😉
5 Antworten auf Accordion Boxen mit CSS3