Mit dem Design für den Snippets-Bereich „fertig“ können wir jetzt in eine gewisse Interaktivität übergehen (lesen Sie: JavaScript).
Wir fügen einen super lahmen Rollover für die Links auf der linken Seite hinzu, damit wir etwas haben, aber wir wissen, dass wir das später ändern werden. Dann haben wir uns daran gemacht, tatsächlich JavaScript zu schreiben. Beim ersten Besuch der Seite ist die erste Kategorie (HTML) aktiv. Aktiv, dh die Klasse "aktiv" im Listenelement für HTML. CSS wirkt sich auf diese Klasse aus und gibt ihr einen Z-Index-Wert, der den Link über dem Schatten visuell anhebt und ihn mit der einfarbigen Linie verbindet, die die beiden Spalten trennt.
Der Trick wird sein, wenn Sie auf eine andere Kategorie klicken, um die aktive Klasse in der aktuell aktiven Kategorie zu entfernen und sie auf die neu angeklickte anzuwenden. Es ist wirklich ziemlich trivial, nur ein paar Zeilen jQuery in einem Skript, das wir nur auf dieser Seite laden. Außerdem muss die Liste der Snippets in der rechten Spalte den richtigen Satz von Links enthalten, was wiederum nur ein Klassenwechsel und eine einfache Manipulation zum Ein- und Ausblenden ist.
Jetzt müssen Sie nur noch die Seiten für einzelne Snippets gestalten.