23/08/13
Tadaima, minnas, relembro que este é um blog de testes só para eu planear o layout e postar tutos criados por mim. Ou seja, se pegarem algo, créditos. Desta vez trouxe um menu que não mexe com HTML, simplesmente precisa que se adicione um gadgets de HTML/Javascript e se adicione lá dois códigos. Foi adaptado do Menu Halloween criado pelo Byel.
Para ver como fica, aqui está a preview:
Então, no gadget cole estes dois códigos:
<div class="menusurpresa" ><a href="LINK DA PÁGINA"><font color="#fff">NOME QUE APARECE</font></a></div>
<style>
/******** menu surpresa by anilyan leounear ********/
.menusurpresa {
background: url(url da imagem que quer);
text-decoration: none;
background-repeat: no-repeat;
width: 100px;
height: 30px;
font-family: 'Lobster';
color: #fff;
font-size: 20px;
text-align: center;
margin: 1px 1px 1px 1px;
cursor:hand;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transition-duration: .60s;
}
.menusurpresa:hover {
text-decoration:none;
letter-spacing: 1px;
height: 117px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transition-duration: .60s;
}
</style>
O primeiro código, você pode repetir tantas vezes quantas precisar. Caso não tenha notado, é o normal para adicionar um link com efeito, neste caso, o efeito menu surpresa. Em link da página, coloca o link da página a que quer redirecionar, e em nome, o nome que quer que apareça no menu. Pode usar o c+odigo de dividir em duas colunas aí, se quiser e souber (se não sabe aprenda no google).
O segundo código, colado no mesmo gadget, só deve ser escrito uma vez. A única coisa que pode substituir nele é a url da imagem, por uma imagem criado por si ou não - eu disponibilizo modelos que sei que funcionarão no fim deste post. Se você fizer imagens mais largas, troque o 100px em width pela largura da sua imagem, e o mesmo para outras alterações de valores. #Enjoy.
Ah, e outra coisa: POR AMOR DE DEUS NÃO FAÇA O CÓDIGO NÃO FUNCIONAR RETIRANDO UMA VÍRGULA QUE SEJA!!! Pronto, já expliquei tudo.
Então, as imagens estão aqui»»
