01/02/2013

Tutorial: Menu Tabs

||

Ai blogueiros da madrugada,  isso parece frase de locutor de rádio né? Mas trago um rápido tutu para vocês, ou quase rápido. Ele se chama "Menu Tabs", ele é um modelo mais antigo do famoso menu que passa o mouse por cima da imagem , aparece uma palavra abaixo. Não sei explicar bem esses bagulhos, então dêem uma dentada aqui e vejam o menu, ele esta bem em cima das postagens. Gostou? Quer aprender como se faz? Então dêem outra dentada para abrir a postagem e siga-me os bons.
O tutorial eu peguei no blog KW, então credite, o menu é originalmente do tumblr Things to help you, então credita também. Agora sim vamos ao tutorial.

 Como sempre aquela parte chata, blá blá blá painel mais blá blá blá ir ate o seu HTML e procure por ]]></b:skin>, acima dele adicione esse bendito código:

#nav {
font-family: Georgia, cursive;
text-transform: uppercase;
width: 60px;
height: 20px; 
background: #dda4c4;
padding: 5px;
text-align: center;
 margin: 10px;
align: left;
font-size: 20px;
 font-weight: none;
margin-bottom: 3px;
 float: left;
cursor: hand;
 -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease; border-radius: 3px;
 line-height: 20px;
}

#nav a{
color: #ffffff;
}

#ops {
background: transparent;
color: #ae539a;
width: 80px;
font-family: Georgia;
font-size: 18px;
text-align: center;
margin-top: 10px;
text-transform: none;
opacity: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}

#nav:hover #ops {
opacity: 1; 
-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;
}

O código e bem fácil de entender, mas caso precise de explicação, veja a imagem neste link. Nela, estão explicadas as partes mais importantes do código. Agora depois de tudo pronto, salve. Blá, blá, blá vá ate seu layout agora.

Abra um novogadget de HTML/JavaScript, cole dentro dele:

<div id="nav">
<a href="link"> 01 <div id="ops">  Home </div></a></div>
 Se quiser mais caixinhas do menu é só repetir, todo o código. Blá blá blá ate mais tarde irei ver um bom dorama agora, beijos e boa noite a todos.

5 comentários:

  1. Bruno1/2/13

    A parte to blá blá blá foi ilario

    ResponderExcluir
  2. kkkkkkk
    Amei o seu tutu, rápido.
    Você optou por não, descrever como todos os outros fazem.
    Adorei....

    ResponderExcluir
  3. eu nem consegui ver >.< #DESAPONTADAAQUI, mas deve ser lindo, pq esse tumblr é mtt bom!!! ^^"
    kissus~

    ResponderExcluir
    Respostas
    1. Poxa que pena, que não conseguiu ver.. mas realmente é muito bom

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram