Med designen för utdragsområdet "gjort" - kan vi nu gå in i lite interaktivitet (läs: JavaScript).
Vi lägger till en superlama rollover för länkarna till vänster bara så att vi har något, men vi vet att vi kommer att ändra det senare. Sedan började vi faktiskt skriva lite JavaScript. När du besöker sidan för första gången kommer den första kategorin (HTML) att vara aktiv. Aktiv, vilket innebär att den har klassen ”aktiv” på listobjektet för HTML. CSS påverkar den klassen och ger den ett z-indexvärde, vilket visuellt höjer länken ovanför skuggan och ansluter den till den heltäckande färglinjen som skiljer de två kolumnerna.
Tricket kommer att vara när du klickar på en annan kategori, för att ta bort den aktiva klassen i den aktuella aktiva kategorin och tillämpa den på den nyligen klickade. Det är ganska trivialt, bara några rader med jQuery i ett skript som vi laddar bara på den här sidan. Dessutom måste listan med utdrag i höger kolumn visa rätt uppsättning länkar, vilket återigen bara är klassförändring och enkel visning / döljmanipulation.
Allt som finns kvar nu är att utforma sidorna för enskilda utdrag.