Com o design da área de snippets “pronto” - podemos agora avançar para alguma interatividade (leia: JavaScript).
Adicionamos um rollover superlame para os links à esquerda apenas para termos algo, mas sabemos que vamos mudar isso mais tarde. Em seguida, começamos a escrever algum JavaScript. Ao visitar a página pela primeira vez, a primeira categoria (HTML) estará ativa. Ativo, o que significa que tem a classe “ativa” no item da lista para HTML. CSS afeta essa classe, dando a ela um valor de índice z, que eleva visualmente o link acima da sombra e o conecta à linha de cor sólida que separa as duas colunas.
O truque será, ao clicar em uma categoria diferente, remover a classe ativa da categoria ativa no momento e aplicá-la à recém-clicada. É muito trivial, na verdade, apenas algumas linhas de jQuery em um script que carregamos apenas nesta página. Além disso, a lista de trechos na coluna certa precisa mostrar o conjunto correto de links, que novamente é apenas alguma mudança de classe e manipulação simples de mostrar / ocultar.
Tudo o que resta agora é estilizar as páginas para fragmentos individuais.