Pedido: Menu Agitaded

Delícia ein

Olá Gente! como vão?! 

Hoje eu irei postar um tutorial que nossa querida dona do blog Kiss Of Gloss pediu, mais antes quero falar que tentarei colocar o layout novo sexta-feira porque quinta tenho de ir à aula de violão então acho que não irei ter tempo para colocá-lo, então acho que irá demorar um pouco mesmo, à menos que eu saia mais cedo da escola, isso seria sorte.

Esse foi o pedido:

Esse é o menu que usamos em nosso layout atual [marrom e rosa] vejam:

Preview on line aqui 

Primeiro quero ressaltar que achei esse menu em um tumblr, mais procurei em tudo e não achei, então procurei o código no HTML do A.N mesmo e trouxe para cá, sendo que depois até que achei no Single temes, então créditos à eles, bem, fiz minhas modificações no tutorial para passá-lo do tumblr para o blog, vamos aprender?

Cole isso acima de ]]></b:skin>:

/*********** Menu Agitated *****************/

/* Animação */

@-webkit-keyframes gangorra {

from {-webkit-transform: rotate(10deg);}

to {-webkit-transform: rotate(-10deg);}

}

@-moz-keyframes gangorra {

from {-moz-transform: rotate(10deg);}

to {-moz-transform: rotate(-10deg);}

}

@-o-keyframes gangorra {

from {-o-transform: rotate(10deg);}

to {-o-transform: rotate(-10deg);}

}

/* Menu */

mn {display: inline-block;

font-family: 'Fjalla One', cursive;

font-size: 25px; /* Tamanho da fonte */

background: #ffffff; /* Cor de fundo do menu */

padding: 2px;

text-align: center;

text-transform: uppercase;

border-radius: 5px;

color: #B03060; /* Cor da fonte */

cursor: pointer;

text-shadow: 2px 2px 0px #DB7093; /* Sombra nas palavras do menu */

width: 90px; /* Tamanho do Menu */

}

mn:hover {

    -webkit-animation-name: gangorra;

    -webkit-animation-duration: .01s;

    -webkit-animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;

-moz-animation-name: gangorra;

    -moz-animation-duration: 0.1s;

    -moz-animation-timing-function: linear;

    -moz-animation-iteration-count: infinite;

    -moz-animation-direction: alternate;

-o-animation-name: gangorra;

    -o-animation-duration: 0.1s;

    -o-animation-timing-function: linear;

    -o-animation-iteration-count: infinite;

    -o-animation-direction: alternate;}

e cole isso em um HTML/ jasvacript para usar o menu:

<a href="LINK"><mn>NOME</mn></a>

<a href="LINK"><mn>NOME</mn></a>

<a href="LINK"><mn>NOME</mn></a>

<a href="LINK"><mn>NOME</mn></a>

<a href="LINK"><mn>NOME</mn></a>

<a href="LINK"><mn>NOME</mn></a>

Espero que tenham gostado do tutorial, é super fácil de personalizar, use essa tabela de cores para facilitar.

Beijos!