29 de nov. de 2013

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

22 comentários:

  1. Ele é muito lindo :3

    etcforme.blogspot.com

    ResponderExcluir
  2. Que menu divo, e a sua explicação é ótima, realmente *-*

    htmlandresources.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada! Eu gosto de explicar tudinho porque assim a pessoa entende o que está fazendo, ao invés de só copiar e colar ^^

      Excluir
  3. Que lindo!!! Bem explicado^^

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
  4. Achei lindo! Ficou muito bem explicado seu tutorial. *^*
    Beijos ~
    unlocked-land

    ResponderExcluir
  5. Achei muito lindoo <3

    http://oficial-dozeprimaveras.blogspot.com.br/

    ResponderExcluir
  6. Obrigada Mari(olha a intimidade)
    Acho que vou colocar no novo Lay, ou nesse mesmo!

    ResponderExcluir
    Respostas
    1. Obrigada Kim! (olha a intimidade² usahushu)

      Vai ficar lindo no seu blog!

      Excluir
  7. Muito explicadinho e fofo , espero usar ele alguma vez
    Mudei de blog e esqueci de te dizer e já sigo akie õ/
    candytendy.blogspot.com
    Visita õ/ ?

    ResponderExcluir
  8. Ótimo menu, esse dias eu estava procurando um tuto dele e não achei *-----*

    Meu Mundo, Meu Estilo || Minha Pequena Crise

    ResponderExcluir
    Respostas
    1. É porque é só um efeito, eu que fiz uma gambiarra pra servir de menu hehe'

      Excluir
  9. Adorei o teu jeito de fazer tutoriais, muito bem explicado! Pretendo usar esse menu no próximo layout! Adorei.

    Beijos, Tiptoe ♥ Espero sua visita *3*

    ResponderExcluir
    Respostas
    1. Eu gosto de explicar bem direitinho, pra não ter erro ^^

      Obrigada pela visita!

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!