clique aqui


BLOGS QUE ADMIRO ACIMA E OUTROS LINKS ABAIXO

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