Tutorial - Menu Arrow

 

Bom dia novamente, leitores.

Antes, queria dar um aviso rápido: Para quem estava querendo o link de download do Photoshop, eu achei um do CS5 disponível. Como sabem, esses links ficam inativos rapidamente por ser proibido disponibilizar um programa pago em sites de hospedagem de arquivos, então sugiro para os que realmente querem ter o Photoshop, que baixem ele agora mesmo enquanto há disponibilidade. O tamanho é de somente 122 MB. Download.

Voltando a normalidade, trouxe outro tutorial de menu e este é bem simples igual o outro. Talvez ele seja até mais simples, pois o efeito é bobinho, mas não deixa de ser fofo. Ao passar o mouse sobre as caixinhas do seu menu, aparecem setinhas e é daí que vem o nome "Arrow". Achei ele bem fofo para quem gosta de menus pequenos assim como eu.

1. Vá até editar HTML e procure por ]]></b:skin>. Acima dessa tag cole o seguinte:

@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}

.arrow {margin: 1px; text-align: center; font: 8px handy; text-transform: uppercase; display: inline-block; position: relative; color: #000000; width: 45px; padding: 3px; text-decoration: none; background-color: #CORDOFUNDO; border: 2px solid #CORDABORDA;}

.arrow:hover { background-color: #CORDOFUNDOHOVER; border: 2px solid #ef7aa1;}

.arrow:hover:after {

content: ''; width: 0; height: 0; position: absolute; left: 50%; 

margin-left: -2px; bottom: 0; border-width 9px; border-style: solid; border-color: transparent transparent #CORDASETA transparent;}

Edite todas as informações em negrito, trocando as palavras pelo que elas indicam. Cor do fundo hover, para quem não sabe, é a cor do fundo da caixinha ao passar o mouse. Após editar, salve.

2. Em um gadget de HTML/JavaScript, cole o seguinte:

<a href="SEULINK" class="arrow">Menu</a>

<a href="SEULINK" class="arrow">Menu</a>

<a href="SEULINK" class="arrow">Menu</a>

<a href="SEULINK" class="arrow">Menu</a>

Prontinho. Bem simples, não é mesmo? Com sua criatividade ele pode ficar ainda melhor.