#menus tthy

Eu resolvi fazer o tutorial, porque faz tempo que prometi, então vamos lá. Por favor, leia o tutorial no tthy (entrando no tumblr) para caso alguma div não abra corretamente. Não esqueça de curti a postagem se gostar! ♥

Visualize o menu

Tudo nessa vida deve ter um valor (é, isso pareceu estranho) mas relativamente é isso. O local onde o conteúdo desse menu fica tem o valor de 300px ou seja, se no caso você vá colocar em uma sidebar de 260 ou o valor que for, lembre-se de mudar os valores e deixar da forma que mais fique certo. Às medidas são feitas corretamente, tudo é dividido corretamente. Então é só prestar atenção nos códigos e você vai se sair bem.

Eu começo o código com a div .demo, ela é onde o conteúdo do menu fica, eu a fiz apenas para ter um fundo, então você pode usar ou descartar ela. Tanto faz.

Logo em seguida vem a div .menuzito, ela é a div onde o menu fica. Na div .menuzito sem o "a" eu determinei o valor que é os 300 e o height que é 30. Essa div é o menu onde clicamos para que as informações apareçam. :)

O .menuzito a é a formatação dos links que fica dentro da div menuzito. Nela eu determino as cores, a fonte, o espaçamento e entre outras coisas. A div menuzito tem o valor de 300px certo? Eu quero dividir os blocos de links em 4 caixinhas então deveria informar o valor de 75px mas como dei um padding-left e right de 5px tiro 10 dos 75 e deixo 65px. Na hora eu resolvi por um border-right então eu tirei mais um numero dos 65px ficando então 64px e dai fica certo.

A div .caixamenuzito é a div que criei para informar o espaçamento e para o fade. O fade é o efeito que faz o conteúdo aparecer lentamente. Você pode formatar da forma que desejar.

Depois vem a div .linksmenu que é o menu que ficará dentro da caixamenuzito, que no caso você vai usar ou não.

Pronto, já expliquei o style e você pode pegá-lo aqui:

.demo {background: #fff; padding-bottom: 6px;-webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;} .menuzito {display: block; height: 30px; margin-bottom: 10px; line-height: 30px;  width: 300px; background: #846ea0; overflow: hidden;} .menuzito a {float: left; width: 64px; border-right: 1px solid #7a6694; text-transform:lowercase; background: #846ea0; padding-left: 5px;  padding-right: 5px;  text-align: center; display: inline-block;font-family: 'Open Sans', sans-serif; font-size: 12px; text-transform: uppercase; color: #fff;-webkit-transition: all 0.4s linear; -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear; transition: all 0.4s linear; font-weight: 800;  } .menuzito a:hover {color: #424140; -webkit-transition: all 0.4s linear; -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear; transition: all 0.4s linear;} .caixamenuzito {line-height: 20px; background: #eee; padding: 5px; margin: 6px; display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} .caixamenuzito {-webkit-animation: fade 2s;-moz-animation: fade 2s;-ms-animation: fade: 2s;} /* htmluv code */ @-webkit-keyframes fade {from {opacity: 0;}to {opacity: 1;}} @-o-keyframes fade {from {opacity: 0;}to {opacity: 1;}} @-moz-keyframes fade {from {opacity: 0;}to {opacity: 1;}} @-ms-keyframes fade {from {opacity: 0;}to {opacity: 1;}} @keyframes fade {from {opacity: 0;}to {opacity: 1;}} /* htmluv code */ .linksmenu {margin-top: 4px; margin-bottom: -6px;} .linksmenu a {width: 129px; background: #fff; padding: 4px; display: inline-block; color: #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 6px;} .linksmenu a:hover {color: #958aa2;}

Esse código é o que você vai usar no local onde você quer que apareça o menu rápido. Eu deixei o html todo separadinho para que você tenha noção das coisas.

<!-- demo --> <div class="demo"> <!-- imagem --> <img src="http://static.tumblr.com/t0iuumg/Lpmn10072/sdsdas.png"> <!-- fim imagem --> <!-- menuzito --> <div class="menuzito"> <a id="ask" onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('riso').innerHTML=document.getElementById('menu1').innerHTML" >O1</a> <a id="ask" onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('riso').innerHTML=document.getElementById('menu2').innerHTML" >O2</a> <a id="ask" onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('riso').innerHTML=document.getElementById('menu3').innerHTML" >O3</a> <a id="ask" onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('riso').innerHTML=document.getElementById('menu4').innerHTML" >O4</a> </div> <!-- fim menuzito --> <!-- a div riso é a div do iframe, o get element será aberta nela --> <div id="riso"> <!-- div menuzito --> <div class="caixamenuzito"> Alguma coisa aqui, exemplo, alguns tutoriais ou dicas </div> <!-- final da div caixamenuzito -->      </div> <!-- final da div riso --> </div> <!-- final da div demo -->

No html, a div riso é a do falso iframe, como já informei. É ela que informa o local onde o falso iframe irá abrir.

A parte do iframe, o local onde fica o conteúdo escondido.

Essas divs você deve por antes do fechamento do tema. Antes de </body></html> e colocar tudo o que você quiser dentro delas.

Pegue aqui as divs

Fonte usada: