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 {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.
background: #fundoaopassarorato;
}
menuzinho a {
color: #cornormal;
text-decoration: none;
font-weight: normal;
}
menuzinho a:hover {
color: #coraopassarorato;
text-decoration: none;
font-weight: normal;
}
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 (^▽^)/
Que legal, vou tentar ''fazer''!
ResponderExcluirhttp://morango-sabor.blogspot.com.br/
Obrigada <3
Excluir~ Espero que consiga.
Eu também vou tentar fazer *-* Eu já fiz um até ! Beijos, Dazzle.
ResponderExcluirEspero que consiga, Boa Sorte.
ExcluirComplicado, OSKAKSA' Vou tentar fazer -q
ResponderExcluirBeijos,
Juu-Chan do Nescau com Nutella.
ASHUASH' Não é não. Rápido, só parece difícil.
Excluir~ Espero que consiga, Boa Sorte. >3<