My WordPress Blog

Criar um menu expansível no blog

Hoje vamos fazer um menu expansível ou então colocar algum conteúdo que só é mostrado ao clicar no título, ele funciona da seguinte maneira aparece somente o título do menu e quando clicamos ele desliza mostrando seu conteúdo e se clicar novamente ele volta a desaparecer. Você pode usar para colocar o que você quiser: texto, uma lista de links, imagens… Para colocar esse menu expansível no blog dá um pouco de trabalho, mas vale à pena, pois o efeito visual dele é muito bom.
Entre na pagina editar html e ache então coloque isso antes dessa tag:

Após isso vá um pouco mais acima e junto com os outros estilos CSS cole esse trecho:

.CollapsiblePanel {
padding: 3px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.CollapsiblePanelTab {
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: italic;
}
.CollapsiblePanelContent {
padding: 5px;
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-weight: normal;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #FFCC99;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;}
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
text-decoration: underline;
color: #0000FF;}

Para modificar as cores que usamos veja como formatar texto, modificar bordas e fazer botões e modifique os estilos CollapsiblePanelContent(conteúdo), CollapsiblePanelOpen .CollapsiblePanelTab(título quando o conteúdo é mostrado) e CollapsiblePanelTab (link para mostrar o conteúdo), reparem que usamos o código as bordas separadamente para cada lado(left, right, top, bottom) isso para fazer parecer uma caixa quando expandimos o menu, então modifique como desejar. Então clique para salvar, por enquanto ainda não aparecerá nada no seu blog.

Entre na pagina layout, adicionar gadget, html/javascript e cole esse código:

Onde está escrito título do menu é o texto que aparecerá no seu blog, quando alguém clicar nele vai abrir o resto do menu e mostrar tudo que tem dentro daquele menu. Portanto onde escrevemos conteúdo oculto você deve colocar o que desejar links, imagens, enfim qualquer coisa, apenas no caso de imagens cuidado com a largura da coluna do blog onde estará o menu, pois se a imagem for mais larga que o blog provavelmente terá problemas.

Então se for usar mais de desses menus com conteúdo oculto não precisa apenas repetir a ultima parte do código que é para ser colocada pela pagina layout, o restante que fizemos na pagina editar html não precisa de alterações. Mas necessário fazer alguns ajustes, repare que no inicio aparece: