Pages

Menu acordeon com abas lado a lado 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 abas lado a lado ***/

@import url(http://fonts.googleapis.com/css?family=Raleway:100,200,300);
@-webkit-keyframes animation_name {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes animation_name {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes animation_name {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes animation_name {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes animation_name {
  from {
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  to {
    opacity: 1;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
@-moz-keyframes animation_name {
  from {
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  to {
    opacity: 1;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
@-o-keyframes animation_name {
  from {
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  to {
    opacity: 1;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
@keyframes animation_name {
  from {
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  to {
    opacity: 1;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
@-webkit-keyframes animation_name {
  from {
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }
  to {
    opacity: 1;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}
@-moz-keyframes animation_name {
  from {
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }
  to {
    opacity: 1;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}
@-o-keyframes animation_name {
  from {
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }
  to {
    opacity: 1;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}
@keyframes animation_name {
  from {
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }
  to {
    opacity: 1;
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}
@-webkit-keyframes animation_name {
  from {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -webkit-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
  }
  to {
    opacity: 1;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -webkit-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
  }
}
@-moz-keyframes animation_name {
  from {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -webkit-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
  }
  to {
    opacity: 1;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -webkit-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
  }
}
@-o-keyframes animation_name {
  from {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -webkit-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
  }
  to {
    opacity: 1;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -webkit-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
  }
}
@keyframes animation_name {
  from {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -webkit-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
  }
  to {
    opacity: 1;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform-origin: 0% 50% 50%;
    -ms-transform-origin: 0% 50% 50%;
    -webkit-transform-origin: 0% 50% 50%;
    transform-origin: 0% 50% 50%;
  }
}
@-webkit-keyframes animation_name {
  0% {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes animation_name {
  0% {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes animation_name {
  0% {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animation_name {
  0% {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes animation_name {
  from {
    opacity: 1;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes animation_name {
  from {
    opacity: 1;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes animation_name {
  from {
    opacity: 1;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animation_name {
  from {
    opacity: 1;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes animation_name {
  from {
    top: 20px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
@-moz-keyframes animation_name {
  from {
    top: 20px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
@-o-keyframes animation_name {
  from {
    top: 20px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
@keyframes animation_name {
  from {
    top: 20px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes animation_name {
  from {
    top: -20px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
@-moz-keyframes animation_name {
  from {
    top: -20px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
@-o-keyframes animation_name {
  from {
    top: -20px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
@keyframes animation_name {
  from {
    top: -20px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
/* used for wrapper animation after the load of the page */
@-webkit-keyframes animation_name {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes animation_name {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes animation_name {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes animation_name {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.tabs-wrapper {
  margin: 5% 10% 0 10%;
}
.tabs-wrapper input[type=radio] {
  display: none;
}
.tabs-wrapper label {
  transition: background 0.4s ease-in-out, height 0.2s linear;
  display: inline-block;
  cursor: pointer;
  color: #DBDBD3;
  width: 20%;
  height: 3em;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: #525252;
  text-align: center;
  line-height: 3em;
}
.tabs-wrapper label:last-of-type {
  border-bottom: none;
}
.tabs-wrapper label:hover {
  background: #667876;
  /*@include transform (translate(0,-0.2em));*/
}
@media screen and (max-width: 1600px) {
  .tabs-wrapper label {
    width: 15%;
  }
}
@media screen and (max-width: 900px) {
  .tabs-wrapper label {
    width: 20%;
  }
}
@media screen and (max-width: 600px) {
  .tabs-wrapper label {
    width: 100%;
    display: block;
    border-bottom: 2px solid #4D4C47;
    border-radius: 0;
  }
}
@media screen and (max-width: 600px) {
  .tabs-wrapper {
    margin: 0;
  }
}

#tab1:checked + label, #tab2:checked + label, #tab3:checked + label, #tab4:checked + label {
  background: #B8B63E;
  color: #F2F2F2;
}

.tab-body {
  position: absolute;
  top: -9999px;
  
  padding: 10px;
}

.tab-body-wrapper {
  background: #F7EEC6;
  border-top: #B8B63E 5px solid;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-animation-delay: 0.2s;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-name: show;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-delay: 0.2s;
  -moz-animation-duration: 1.5s;
  -moz-animation-name: show;
  -moz-animation-fill-mode: forwards;
  -o-animation-delay: 0.2s;
  -o-animation-duration: 1.5s;
  -o-animation-name: show;
  -o-animation-fill-mode: forwards;
  animation-delay: 0.2s;
  animation-duration: 1.5s;
  animation-name: show;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 600px) {
  .tab-body-wrapper {
    border: none;
    border-radius: 0;
  }
}

#tab1:checked ~ .tab-body-wrapper #tab-body-1, #tab2:checked ~ .tab-body-wrapper #tab-body-2, #tab3:checked ~ .tab-body-wrapper #tab-body-3, #tab4:checked ~ .tab-body-wrapper #tab-body-4 {
  position: relative;
  top: 0px;
  /* Choose one */
  /* @include animation(0.2s,0.8s,content-opacity); */
  /* @include animation(0.2s,0.8s,content-rotate-x); */
  /* @include animation(0.2s,0.8s,content-rotate-y); */
  /* @include animation(0.2s,0.8s,content-rotate-both); */
  /* @include animation(0.2s,0.8s,content-pop-in); */
  /* @include animation(0.2s,0.8s,content-pop-out); */
  /* @include animation(0.1s,1s,content-slide-bot); */
  -webkit-animation-delay: 0.1s;
  -webkit-animation-duration: 1s;
  -webkit-animation-name: content-slide-top;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-delay: 0.1s;
  -moz-animation-duration: 1s;
  -moz-animation-name: content-slide-top;
  -moz-animation-fill-mode: forwards;
  -o-animation-delay: 0.1s;
  -o-animation-duration: 1s;
  -o-animation-name: content-slide-top;
  -o-animation-fill-mode: forwards;
  animation-delay: 0.1s;
  animation-duration: 1s;
  animation-name: content-slide-top;
  animation-fill-mode: forwards;
}

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 class="tabs-wrapper">
<input checked="checked" class="tab-head" id="tab1" name="tab" type="radio" />        <label for="tab1">Aba 1</label>        <input class="tab-head" id="tab2" name="tab" type="radio" />        <label for="tab2">Aba 2</label>        <input class="tab-head" id="tab3" name="tab" type="radio" />        <label for="tab3">Aba 3</label>        <input class="tab-head" id="tab4" name="tab" type="radio" />        <label for="tab4">Aba 4</label>        <br />
<div class="tab-body-wrapper">
<div class="tab-body" id="tab-body-1">
<h1>
Título Aqui</h1>
Bla bla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla bla.</div>
<div class="tab-body" id="tab-body-2">
<h1>
Título Aqui</h1>
Bla bla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla bla.</div>
<div class="tab-body" id="tab-body-3">
<h1>
Título Aqui</h1>
Bla bla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla bla.</div>
<div class="tab-body" id="tab-body-4">
<h1>
Título Aqui</h1>
Bla bla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla blabla bla bla bla bla bla bla.</div>
</div>
</div>

Salve e está pronto!

Nenhum comentário:

Postar um comentário