Menu Sonfona/ Accordion CSS3

1. Aplicar os estilos CSS3: Acesse o menu “modelo”, entre na edição HTML do seu template, não precisa clicar em “expandir modelos de widgets” e procure pela tag ]]></b:skin> e cole o seguinte código logo ACIMA dela:

/* Menu Vertical Sanfona
----------------------------------------------- */
.verticalsanfona ul {
margin: 0;
padding: 0;
list-style:none;
width: auto;
}
.verticalsanfona ul li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
list-style:none;
height:40px;
width: auto;
background-color:#f0f0f0;transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
}
.verticalsanfona ul li h3 {
display:block;
margin: 0;
padding:10px;
padding-left:20px;
height:19px;
border-top:#f0f0f0 1px solid;font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:capitalize;
color: #000;background: #cccccc url(ENDEREÇO-DA-SUA-IMAGEM) repeat;text-align: left;
font-size:16px;
}
.verticalsanfona ul li h3 a{
color: #000;}
.verticalsanfona ul li h3 a:hover{
color: #fff;}
.verticalsanfona ul li div {
margin:0;
overflow: auto;
padding:10px;
padding-left:20px;
height:220px;
}
.verticalsanfona ul li:hover {
height: 280px;
}
.verticalsanfona:hover ul li:hover h3 {
color:#fff;background: #000000 url(ENDEREÇO-DA-SUA-IMAGEM) repeat;;}
.verticalsanfona ul li h3:hover {
cursor:pointer;
}

As partes que você pode e deve editar estão destacadas em vermelho no código.
Este campos foram destacados para você conseguir identificar melhor no código os elementos que deverão ser editados por você de acordo com as cores do seu blog.
Lembrando que onde estão: url(ENDEREÇO-DA-SUA-IMAGEM) se refere ao local que você deverá inserir o endereço da sua imagem, se caso você quiser utilizar uma imagem para seu menu. Se preferir utilizar apenas cores, apague esta parte do código.

Você pode adicionar vários outros efeitos para melhorar o seu menu sanfona, como CSS3 border-radius ou sombra no texto.



2. Aplicar o HTML:
Vá no menu “layout” ? Clique em ‘Adicionar um elemento de página’? Escolha tipo ‘HTML/Javascript’ e cole o seguinte código lá:

<div class="verticalsanfona">
<ul>
<li>
<h3>Título 1</h3>
<div>Coloque aqui o conteúdo para o Titulo 1.</div></li>
<li><h3>Titulo 2</h3>
<div>Coloque aqui o conteúdo para o Titulo 2</div></li>
<li><h3>Titulo 3</h3>
<div>Coloque aqui o conteúdo para o Titulo 3.</div></li>
<li><h3>Titulo 4</h3>
<div>Coloque aqui o conteúdo para o Titulo 4</div></li>
</ul>
</div>

www.mundoblogger.com.br