Avec la conception de la zone des extraits de code «terminée» - nous pouvons maintenant passer à une certaine interactivité (lire: JavaScript).
Nous ajoutons un rollover super boiteux pour les liens de gauche juste pour avoir quelque chose, mais nous savons que nous changerons cela plus tard. Ensuite, nous nous sommes mis à écrire du JavaScript. Lors de la première visite de la page, la première catégorie (HTML) sera active. Active, ce qui signifie qu'il a la classe «active» sur l'élément de liste pour HTML. CSS affecte cette classe, lui donnant une valeur z-index, qui élève visuellement le lien au-dessus de l'ombre et le connecte à la ligne de couleur unie séparant les deux colonnes.
L'astuce va être lorsque vous cliquez sur une catégorie différente, pour supprimer la classe active sur la catégorie actuellement active et l'appliquer à celle qui vient d'être cliquée. C'est vraiment assez trivial, juste quelques lignes de jQuery dans un script que nous ne chargeons que sur cette page. De plus, la liste des extraits de code dans la colonne de droite doit afficher le bon ensemble de liens, ce qui n'est encore qu'une modification de classe et une simple manipulation d'affichage / masquage.
Il ne reste plus qu'à styliser les pages pour des extraits de code individuels.