Tutorial - Fazendo seu próprio menu. (•ω•)ノ


Konnichiwa, minna-san. (ノ≧∀)ノ Vocês nem imaginam a minha alegria ao entrar na Ask do Thing HTML e ver que havia pedidos. Eu havia esquecido-me completamente que havia aquilo lá. Sei que deveria postar os pedidos lá, mas, sei lá, quero postar aqui. AHUSH' >3<

Um anônimo pediu que eu postasse um tutorial ensinado como criar um menu. Admito que não tenho tanta experiência mas criei esse, esse e esse menu. Já dá para ter uma ideia do que se pode encontrar aqui, não? Mas bem, posso dizer que fazer isso não é um bicho de sete cabeças, vamos ao tutorial?

Para começar, recomendo que vá até este link e olhe alguns dos tópicos postados. Isso irá auxilia-lo, principalmente se for iniciante, a fazer e personalizar o menu. Caso não queria, vou tentar explicar direito como fazer os passos. Espero que consiga.(*^ε^*)


Como nós já sabemos, os seletores de personalização - ou pelo menos em sua maioria - se localizam acima da tag: ]]></b:skin>. Sendo assim, você colocar todos os códigos de personalização do seu menu ou efeito neste local, deste modo:

menuzinho {
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
]]></b:skin>

Destaquei em itálico a tag já mencionada acima. O seletor menuzinho será o que denomina* o nosso menu, você pode trocar caso queira. Entre cada chave será colocada todos os códigos de personalização, tamanho, fundo, cor e outros.

*Está junto ao código de transição geral.


~Tamanho~

Para personalizar o tamanho do menu coloque, entre as chaves: padding: 3px; É esse código que define o tamanho do seu menu. Mude o número, aumentando ou diminuindo, 3 até ficar ao seu agrado. Assim, o código ficaria mais ou menos assim:

menuzinho {
padding: 3px;
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}

~Fundo e Alinhamento~

Para personalizar o fundo do menu coloque, abaixo de {: background: #cor; Modifique o código com a cor que deseja colocar no seu menu, não muito a explicar.

Agora vamos ao alinhamento do texto do menu: Em sua maioria usa-se ao centro, sendo o código: text-align: center; Ficando assim:
menuzinho {
padding: 3px;
background: #cor;
text-align: center;
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}


~Hover e Cor~

Agora, serão adicionados dois novos seletores para personalização do menu: Hover e coloração dos links, normal e hover. Para isso, deve-se adicionar após a chave de fechamento } os seguintes códigos: 

menuzinho:hover {
background: #fundoaopassarorato;
}
menuzinho a {
color: #cornormal;
text-decoration: none;
font-weight: normal;
}
menuzinho a:hover {
color: #coraopassarorato;
text-decoration: none;
font-weight: normal;
}
Facilitei a vida de todas as pessoas vivas após trazer o código já pronto. As partes que se deve mudar estão sublinhadas. Agora vamos para a aplicação do nosso menu? Acho que é a coisa mais fácil que tem.

Vá em Layout > Adicionar Gagdet > HTML/Javascript > Cole:

<a href="link_do_menu" title="Nome"><menuzinho>Nome</menuzinho></a>

Bem, editem as partes destacadas em itálico e repitam o código até ficar do jeito desejado. Espero que tenham aprendido e gostado~ Qualquer dúvida, dirija-se aos comentários, please.

Sayonara (^▽^)/

6 comentários:

  1. Que legal, vou tentar ''fazer''!

    http://morango-sabor.blogspot.com.br/

    ResponderExcluir
  2. Eu também vou tentar fazer *-* Eu já fiz um até ! Beijos, Dazzle.

    ResponderExcluir
  3. Complicado, OSKAKSA' Vou tentar fazer -q

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
    Respostas
    1. ASHUASH' Não é não. Rápido, só parece difícil.

      ~ Espero que consiga, Boa Sorte. >3<

      Excluir