Gostou do blog ? então curta nossa página no Facebook:

Criar um menu expansível no blog

Recebi um recado ou um comentário pedindo para eu postar no blog como criar um menu expansível 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 alterar o texto como você quizer links ou imagens:

Para colocar o menu expansível no blog siga as seguintes instruções:

1° entre na pagina editar html e procure pela tag </head> e coloque esse código abaixo antes dela:

<script src="http://cidadeweb.110mb.com/SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>

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 alterar as cores que usamos veja como formatar texto, modificar bordas e fazer botões e modifique os estilos CollapsiblePanelContent(conteúdo), depois de ter feitos as suas alterações 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:

<div id="CollapsiblePanel1" class="CollapsiblePanel"><div tabindex="0" class="CollapsiblePanelTab">título do menu</div><div class="CollapsiblePanelContent">Conteúdo Oculto</div></div><script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
//-->
</script>

Altere onde esta escrito titulo do menu por a palavra que você quiser para quando alguém clicar nele vai abrir o resto do menu e mostrar tudo que tem dentro daquele menu. E escreva o conteúdo oculto você deve colocar o que desejar links, imagens, enfim qualquer coisa, e tome cuidado com a largura do blog.


Quando for usar o menus e os conteúdo oculto não precisa apenas repetir a ultima parte do código que é para ser colocada pela pagina layout, não e preciso fazer alterações Mas necessário fazer alguns ajustes, repare que no inicio aparece:

<div id="CollapsiblePanel1" class="CollapsiblePanel1">

e no final:

var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});

Onde estar CollapsiblePanel1 continue com a contagem modificando no inicio e no final para CollapsiblePanel2 e assim por diante, mas cuidado para não esquecer de alterar nenhum deles(um no começo e duas vezes no final) , também cuidado para não confundir a letra l com o numero 1 quando for modificar a contagem.


Referências: dicas para blogs

2 comentários:

lany74 disse...

Parabéns!!! Funciona perfeitamente no IE mas quando coloco no mozilla não funciona pode me explicar porque?

▬☻•☼João-Bishop☼•☻▬ disse...

brother como assim va umpouco mais acima nao entendi pode me espliuca quero muito botar isso no meu blogger brigado desd jáh

© 2010 | Rei do Bloguinho |Todos os direitos reservados
topo ↑