Menu Sanfona
Oi gente, como pediram na Ask, eu procurei e achei no blog Mundo Blogger um tutorial fácil então confiram:
RESULTADO
1 - Procure a Tag ]]></b:skin> : e coloque o código a seguir antes dela:
2 - Depois coloque esse código a onde quer que apareça:
RESULTADO
1 - Procure a Tag ]]></b:skin> : e coloque o código a seguir antes 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; }
2 - Depois coloque esse código a onde quer que apareça:
<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>Não esqueça de mudar o ENDEREÇO-DA-SUA-IMAGEM.
Créditos: Mundo Blogger
Primeiramente: Cara, que blog lindo, muitooooo perfeito! E sobre o tutorial: Eu amei o menu e o tutu, está bem explicadinho! *-*
ResponderExcluirhttp://sweet-fanfic.blogspot.com.br/
Obrigada <3
ResponderExcluirQue tag devo procurar?
ResponderExcluir]]>
Excluir