Pages

Menu acordeon com abashorizontal apenas com css para Blogger

Gente linda, tudo bem?

Hoje eu venho ensinar o menu acordeon acima que fica super charmoso e não usa javascript, é feito apenas com css. Perfeito né?

Vamos lá?

Faça o download do seu template e em seguida acesse o html do seu blogger. Encontre a tag abaixo:

]]></b:skin>

Cole acima dessa tag o código abaixo:

/*------ Menu Acordeon no post do blog  -----*/ 



.sc-accordion > h3 .anchor { 
font-family: Arial; 
padding: 3px 7px; 
color: #272727; 
margin: 0 8px 0 0; 
.sc-accordion > h3 a { 
text-decoration: none; 
font: normal 18px oswald; 
color: #272727; 
border-bottom: 1px solid #eee; 
display: block; 
padding: 0 0 0.6em 0; 
.sc-accordion .trigger { 
border-bottom: 1px solid #DDD; 
padding: 0 0 0.5em 0; 
margin: 0 0 0.5em 0; 
display: none; 
    font-family: arial; 
font-size: 16px; 
.sc-accordion > h3.toggle { 
margin: 0 0 0.5em; 
.sc-accordion > h3 a.active { 
border: none; 
padding: 0; 
}   
.sc-accordion > h3 a.active .anchor, .sc-accordion > h3 a.active { 
color: #272727; 
}   
  .sc-accordion > h3 a:hover { 
color: #272727; 



.accordion {
   margin: 10px;   
   dt, dd {
      padding: 10px;
      border: 1px solid black;
      border-bottom: 0; 
      &:last-of-type {
        border-bottom: 1px solid black; 
      }



dl.accordion {
    color: #272727;
    font-size: 20px;
    font-family: Arial;
}


      a {
        display: block;
        color: black;
        font-weight: bold;
      }
   }
  dd {
     border-top: 0; 
     font-size: 12px;
     &:last-of-type {
       border-top: 1px solid white;
       position: relative;
       top: -1px;
     }
  }
}

Em seguida, abra uma página estática ou encontre o local onde você deseje que o menu apareça e cole o código abaixo:

<div id="contato">
<center>
<div style="padding-bottom: 10px;">
Local Friend</div>
</center>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<dl class="accordion">
<dt style="text-align: justify;">
<a href="https://www.blogger.com/blogger.g?blogID=3828783627340243747">
<span style="font-size: large;">Panel 1</span></a></dt>
<dd><div style="text-align: justify;">
<span style="font-family: inherit;">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</span></div>
</dd>
<br />
<dt style="text-align: justify;">
<a href="https://www.blogger.com/blogger.g?blogID=3828783627340243747">
<span style="font-size: large;">Panel 2</span></a></dt>
<dd><div style="text-align: justify;">
<span style="font-family: inherit;">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</span></div>
</dd>
<br />
<dt style="text-align: justify;">
<a href="https://www.blogger.com/blogger.g?blogID=3828783627340243747">
<span style="font-size: large;">Panel 3</span></a></dt>
<dd><div style="text-align: justify;">
<span style="font-family: inherit;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</span></div>
</dd>

</dl>

Salve e está pronto!

Nenhum comentário:

Postar um comentário