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.
#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.
Tudo bem ^^ seus menus estão ficando cada vez melhores ^^ :3.
ResponderExcluirSó uma coisa verifica os seus afiliados, tem uns que estão desativados, e abre vaga para outros blogs ^^ o//
Mr-Exemplar.blogspot.com.br
Obrigada :3
ExcluirÉ, 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'
Faz tempo que não apareço aqui,eu gosto muito dos seus tutoriais,eles sempre me ajudam muito quando vou fazer algum layout.
ResponderExcluirEu 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
Oi flor, tudo bem?
ResponderExcluirAdorei esse menu, parecido com o outro mas eu gostei muito.
xoxo
Candy Bomb
Oi Isa, como vai?
ResponderExcluirQualquer 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/
Oi,bom eu já tentei vários e vários menus,até da certo,mas fica no canto esquerdo do blog.
ResponderExcluirO que eu faço? Poderia me ajudar? Aguardo a resposta amandittagomes.blogspot.com.br