Menu Legenda

Me pediram para ensinar o menu que estou usando no Template atual, que é esse que fica por cima da imagem. Bom, como eu gosto de compartilhar o que sei, deixei anotadinho a sugestão aqui, junto com outros posts que quero fazer e hoje estou postando o do menu. Eu baseei o código no efeito legenda, do blog Part of Me e é daí que tirei o nome. Esse menu é simples e só fica bonito se for em cima de alguma imagem, vocês podem colocar no cabeçalho como eu fiz ou em cima de uma imagem na sidebar, que também fica bonito. Quando você passa o mouse o fundo fica mais visível. Bom, como eu disse, fiz o menu baseando em outros códigos, então por favor peço que não rebloguem. Acho muito chato ficar escrevendo a postagem pra alguém vir e copiar tudo, principalmente quando é de algo que eu fiz. ;-;

Veja uma preview abaixo: (ou ali em cima, no cabeçalho mesmo)

1- Vá no HTML do seu blog e procure por ]]></b:skin>. Acima disso, cole:

.menulegenda  {
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 2.5s ease-out;
width:70px;
height:18px;
margin-top:-39px;
margin-left: -12px;
background: #fff;
opacity: 0.60;
text-align: center;
margin-bottom:-12px;
leter-spacing:1px;
}
.menulegenda:hover  {
background: #fff;
opacity: 0.90;
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 2.5s ease-out;
}

2- Em um Gadget de HTML/JavaScript, cole:

<div class="menulegenda"><a href="LINK 1">NOME 1</a></div><div class="menulegenda"><a href="LINK 2">NOME 2</a></div> <div class="menulegenda"><a href="LINK 3">NOME 3</a></div><div class="menulegenda"><a href="LINK 4">NOME 4</a></div>

Entendendo

Atenção para essa parte!

-webkit-transition: all 1.0s ease-out;
-moz-transition: all 2.5s ease-out;

Essa parte se refere ao tempo de transição do menu normal para hover (quando passa o mouse). Não mexa!

width:70px;
height:18px;

Largura e altura do menu, respectivamente. Mude de acordo com seu blog.

margin-top:-39px;
margin-left: -12px;

Essa é a parte onde você deve editar com atenção, pois se refere ao posicionamento do menu. A primeira linha é a margem do topo, o número está em negativo, portanto quanto maior o número mais o menu vai subir. A linha de baixo se refere ao posicionamento a esquerda, quanto maior o número mais para a esquerda ele vai ficar. Vá editando os números de acordo com o posicionamento do menu na imagem do seu blog, se ficar difícil, vá mudando de cinco em cinco até encontrar a posição certa.

background: #fff;

Cor de fundo do menu, altere de acordo com sua preferência.

 opacity: 0.60;

Opacidade (transparência) da cor de fundo. Recomendo um número entre 0.40 e 0.50 para imagens com fundo escuro, como preto, e deixar do jeito que está para imagem com fundo claro, como rosa ou roxo.

text-align: center;
margin-bottom:-12px;
leter-spacing:1px;

Alinhamento do texto, margem de baixo e espaçamento das letras. Recomendo não mexer.

background: #fff;
opacity: 0.90;

Cor de fundo quando passa o mouse e opacidade quando passa o mouse. 

Aplicando o menu

Agora, para aplicar o menu você deve estar atendo a uma coisa: o primeiro link é o que ficará por último na ordem do menu. Ou seja, se no Gadget você colocou o link 1 como "Home", ele ficará abaixo dos outros links. Portanto coloque primeiro os itens que você quer que fiquem embaixo, e logo depois os que quer por cima.

Os links desse menu ficam na mesma cor dos links do blog. Para alterar a cor do link você deve acrescentar  uma nova class com os códigos a:link; a:hover e a:visited; Ficando mais ou menos assim .menulegenda a:link { código aqui dentro } Caso tenham dúvidas falem comigo pela ask ou pelos comentários mesmo.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar