Spass mit CSS – eine Zeitlinie

Ich wollte für mich einmal versuchen, eine kleine Aufgabenstellung ohne Code (JavaScript) nur mit CSS Bordmitteln zu lösen – ok, tatsächlich ist das Beispiel hier aus einem AngularJS Projekt und etwas abstrahiert, aber vielleicht hilft ja schon die Idee. Gegeben ist eine Zeitlinie mit Datumswerten (im Beispiel auf Jahre vereinfacht) mit einer mehr oder weniger langen Beschreibung pro Datum (hier habe ich einfach aus dem deutschen Wiki ein bißchen was zu Windows zusammengesucht, die Links ins Wiki sind natürlich als Quellenreferenz im Beispiel mit drin). Erreichen will ich im Wesentlichen eine vertikale Zeitlinie mit Kurztexten (hier einfach immer nur die erste Zeile des vollen Textes), die man auf Wunsch aufklappen kann (hier ziemlich sinnfrei und dumm über ein CSS :hover gelöst – nicht praxistauglich). Wichtig ist, dass das Ein- und Ausblenden der Langtexte die Zeitlinie ohne Programmcode einigermassen erhält. Also so soll das aussehen:

Zeitlinie

Im HTML sollen dabei aber nur die eigentlichen Daten stehen, möglichst wenig Styling Schnick-Schnack, so was wie das hier:

Daten

Die Lösung sieht man dann hier – einfach mit der Maus über die Texte fahren. Der kleine Knubbel und die Linie sind einfach SVG Hintergründe (backgound-image) im CSS, geschickt positioniert und skaliert. Wird ein Text expandiert, so bleibt der Knubbel stehen und die Linie dehnt sich über die gesamte Höhe aus.

Nett und gar nicht so schwer.

Happy Coding

Jochen

Bookmark the permalink.

Comments are closed.