С дизайном области сниппетов «готово» - теперь мы можем перейти к некоторой интерактивности (читай: JavaScript).
Мы добавляем супер-неудачный ролловер для ссылок слева, чтобы у нас что-то было, но мы знаем, что изменим это позже. Затем мы приступили к написанию кода JavaScript. При первом посещении страницы будет активна первая категория (HTML). Активный, то есть у него есть класс «активный» в элементе списка для HTML. CSS влияет на этот класс, давая ему значение z-index, которое визуально поднимает ссылку над тенью и соединяет ее с линией сплошного цвета, разделяющей два столбца.
Уловка будет заключаться в том, чтобы при щелчке другой категории удалить активный класс из текущей активной категории и применить его к недавно выбранной. На самом деле это довольно тривиально, всего несколько строк jQuery в скрипте, который мы загружаем только на этой странице. Кроме того, список фрагментов в правом столбце должен отображать правильный набор ссылок, что опять же представляет собой просто изменение класса и простую манипуляцию с отображением / скрытием.
Все, что осталось, - это стилизовать страницы под отдельные фрагменты.