07 julho 2015

Menu Rotate

| |
Oi! Quero pedir desculpa pela falta de diversidade do blog. O meu último post foi sobre o menu stretch e agora eu estou aqui com outro tutorial sobre menus. Eu planejava postar algo relacionado a gifs, mas o tutorial é bem grande, então deixei de lado. Prometo que minha próxima postagem será diferente.









1 - Abra a estrutura do seu blog. Aperte F3 e procure por ]]>< . Acima desse trecho, cole:

#isa-hello:hover #menu-rotate-isa {
opacity: 1;
}
#menu-rotate-isa {
opacity: 0;
display:inline-block;
position:absolute;
-webkit-transition: all .60s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all .60s ease-in-out;
transition: all .60s ease-in-out;
margin-left: 5px; /* Move o menu para os lados */
margin-top: -240px; /* Move o menu para cima ou para baixo */
}
#menu-rotate-isa a {
-webkit-border-radius: 3px; /* Borda Arredondada */
-moz-border-radius: 3px; /* Borda Arredondada */
-o-border-radius: 3px; /* Borda Arredondada */
border-radius: 3px; /* Borda Arredondada */
padding: 3px;
width: 49px; /* Tamanho das caixinhas do menu */
float: left;
background-color: #B5B5B5; /* Cor do fundo */
margin-left: 2px;
font-family: 'font-family: 'Ubuntu Mono';
font-style: normal;
font-size: 11px; /* Tamanho da fonte */
text-align: center;
margin-top: 2px;
color: white; /* Cor da fonte */
text-transform: uppercase;
-webkit-transition: all 1.5s ease-out;
-moz-transition: all 1.5s ease-out;
-ie-transition: all 1.5s ease-out;
-o-transition: all 1.5s ease-out; }
#menu-rotate-isa a:hover {
color: white; /* Cor da fonte ao passar o mouse */
background-color: #B5B5B5; /* Cor do fundo ao passar o mouse */
-webkit-transform: rotatex(360deg);
-moz-transform: rotatex(360deg);
-ie-transform: rotatex(360deg);
-o-transform: rotatex(360deg);
-webkit-transition: all 1.5s ease-out;
-moz-transition: all 1.5s ease-out;
-o-transition: all 1.5s ease-out;
-ie-transition: all 1.5s ease-out;}

2 - Após visualizar e salvar, vá em Layout - Adicionar Gadget - HTML/JavaScript e cole isto.

<div id="isa-hello">
<img src="IMAGEM" alt="image" />
<br />
<div id="menu-rotate-isa">
<a href="SEU LINK">#1</a>
<a href="SEU LINK">#2</a>
<a href="SEU LINK">#3</a>
<a href="SEU LINK">#4</a>
</div>
</div>

_____

Espero que tenham gostado. Se tiver dúvidas, visite a minha ask e tire suas dúvidas.

6 comentários:

  1. Tudo bem ^^ seus menus estão ficando cada vez melhores ^^ :3.
    Só uma coisa verifica os seus afiliados, tem uns que estão desativados, e abre vaga para outros blogs ^^ o//

    Mr-Exemplar.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada :3
      É, sei que alguns estão desativados, mas estou meio sem tempo. Sobre as vagas, elas sempre tiveram abertas, só que ninguém nunca pediu kkkk'

      Excluir
  2. Faz tempo que não apareço aqui,eu gosto muito dos seus tutoriais,eles sempre me ajudam muito quando vou fazer algum layout.
    Eu gostei muito desse menu,pretendo usar futuramente!!
    E eu gosto de tutoriais de menu,eu não tenho criatividade para fazer menu,admiro quem tem!!
    O seu layout está muito bonito.

    Sarang Cute

    ResponderExcluir
  3. Oi flor, tudo bem?
    Adorei esse menu, parecido com o outro mas eu gostei muito.
    xoxo
    Candy Bomb

    ResponderExcluir
  4. Oi Isa, como vai?
    Qualquer tutorial que você poste eu gosto de ver. Os seus menus são lindos.
    Achei bem legal esse menu *uu* achei bem viciante.
    Beijos,

    http://designer-lovers.blogspot.com.br/

    ResponderExcluir
  5. Oi,bom eu já tentei vários e vários menus,até da certo,mas fica no canto esquerdo do blog.
    O que eu faço? Poderia me ajudar? Aguardo a resposta amandittagomes.blogspot.com.br

    ResponderExcluir

« »