Primeiro de tudo fazer um menu é a coisa mais simples do mundo, e quando eu digo "menu" não é só aquele menu que fica abaixo do texto do seu welcome, é aquele "menu" que fica na página de tutoriais, na lista dos seus afiliados etc., e tal. Então em baixo estará uma base bem simples para que você possa utilizar em qualquer lugar, ela tem todos os códigos necessários para um simples menu, você só vai ter o trabalho de modificar, certo? Cole o código do quote abaixo acima de ]]></b:skin>
.menu {
padding-top: 2px; /* Acolchoamento de cima */
padding-bottom: 2px; /* Acolchoamento de baixo */
padding-left: 3px; /* Acolchoamento da esquerda */
padding-right: 3px; /* Acolchoamento da direita */
margin: 1px; /* Espaço entre um menu e outro */
background: #303030;
border: #000 1px solid;
color: #fff;
text-shadow: 1px 1px #999;
font-family: 'Trebuchet MS';
text-align: center; /* Alinhamento do texto (centro) */
font-size: 10px;
width: 50px; /* Tamanho (Largura) do menu */
display: inline-block; /* Blocos do menu em linha */
}
<div class=" menu "><a href="link">Seu texto do menu</a></div>
Obs: Abaixo estará uma simples explicação sobre algumas propriedades bem básicas do css.
✧ A diferença entre div class e div id.
<div class='none'> = Simples, a class define o efeito, o estilo e estrutura do seu menu .none{
<div id= 'none'> = A ID só aparece uma vez para cada "div" que você criar #none{
✧ Elementos simples de um menu.
Padding = Acolchoamento do menu, espaços internos de cima, de baixo, da esquerda e direita.
Você pode usá-los assim:
— padding: 0px; (Nesse caso todos os lados terão o mesmo tamanho)
— padding: 0px 0px 0px 0px;
— padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
Você pode usá-los assim:
— padding: 0px; (Nesse caso todos os lados terão o mesmo tamanho)
— padding: 0px 0px 0px 0px;
— padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
Margin = Espaços externos do menu, margem da esquerda, direita, de cima e de baixo.
Você pode usá-los assim:
— margin: 0px; (Nesse caso todos os lados terão o mesmo tamanho)
— margin: 0px 0px 0px 0px;
— margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
Você pode usá-los assim:
— margin: 0px; (Nesse caso todos os lados terão o mesmo tamanho)
— margin: 0px 0px 0px 0px;
— margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
Width = A largura dele, você escolhe, pixel (px), porcentagem (%), etc.
Heigt = A altura dele, você escolhe, pixel (px), porcentagem (%), etc.
Display = Permite que você escolha como o bloco do seu menu ficará, exemplos básicos:
— Inline: Significa "na linha" ou seja, ele não terá nada ao lado, seguirá reto.
— Inline-block: Bloco em linha, o menu ficará em "caixas" uma ao lados da outra.
— Inline: Significa "na linha" ou seja, ele não terá nada ao lado, seguirá reto.
— Inline-block: Bloco em linha, o menu ficará em "caixas" uma ao lados da outra.
Outline = É uma linha desenhada em torno do elemento, pode ser dentro quando se deixa os números negativos.
— outline-color: Definirá a cor da sua linha.
— outline-style: Estilo da linha, pode ser dashed, dotted, solid, double, etc.
— outline-offset: Ele determina a distância entre o elemento (menu) e a linha. O número quando negativo servirá para deixar a linha do lado interno, ou seja, dentro do elemento.
— outline-width: Determina a largura da linha.
Você pode usá-lo de uma forma mais simples, assim:
outline: dotted 1px black; outline-offset: - nº px; (Mesma coisa que os itens de cima, só que de maneira encurtada)
— outline-color: Definirá a cor da sua linha.
— outline-style: Estilo da linha, pode ser dashed, dotted, solid, double, etc.
— outline-offset: Ele determina a distância entre o elemento (menu) e a linha. O número quando negativo servirá para deixar a linha do lado interno, ou seja, dentro do elemento.
— outline-width: Determina a largura da linha.
Você pode usá-lo de uma forma mais simples, assim:
outline: dotted 1px black; outline-offset: - nº px; (Mesma coisa que os itens de cima, só que de maneira encurtada)
Font-weight = Essa propriedade define o quão grossa ou fina uma letra deve ser.
— lighter: Como já diz o nome a fonte ficará mais fina.
— bold: A fonte digamos que em "negrito".
— normal: A fonte normal.
Line height = Vai controlar as entrelinhas, ou seja a distância de cada linha para outra.
Text transform = Transformação do texto, pode ser em maiúsculo, minúsculo etc, exemplos:
— Uppercase: Todas as letras em maiúsculo.
— Lowercase (Ou capitalize): Todas as letras em minúsculo.
— None: Texto normal.
— Uppercase: Todas as letras em maiúsculo.
— Lowercase (Ou capitalize): Todas as letras em minúsculo.
— None: Texto normal.
Text decoration = Decoração do seu texto, abaixo uns exemplos mais usados.
— Underline: Seu texto sublinhado, com uma linha em baixo.
— Line through: Coloca uma linha sobre o seu texto, o famoso "riscado".
— Underline: Seu texto sublinhado, com uma linha em baixo.
— Line through: Coloca uma linha sobre o seu texto, o famoso "riscado".
Letter spacing = Espaço entre todas as LETRAS.
Word spacing = Espaço entre todas as PALAVRAS.
Text align = Alinhamento do seu texto, coloca-se em center, left, right ou justify.
Float = Flutuação, em que lado ficará seu "elemento": center, right, left ou bottom.
Position = É de longe a mesma coisa que float. Ele especifica qual vai ser o método utilizado para posicionar um elemento no blog. Pode ser absolute, relative, fixed, static, etc.
Font size = Tamanho do texto, e você pode defini-los em diferentes modos, exemplos:
— Px; O mais usado, você definiu em 12px? A letra vai ter exatos 12 pixels de altura.
— Em; É a mais complicada, você define o número (1, 2, 3...) pelo número normal da página.
— %; Porcentagem você trabalhará com o percentual.
— pt; Significa valores de PONTO, polegadas como na "vida real".
— Px; O mais usado, você definiu em 12px? A letra vai ter exatos 12 pixels de altura.
— Em; É a mais complicada, você define o número (1, 2, 3...) pelo número normal da página.
— %; Porcentagem você trabalhará com o percentual.
— pt; Significa valores de PONTO, polegadas como na "vida real".
Bom, fiz os mais simples, espero que gostem e ajude alguém! \o
Unico tutu de menu que consegui entender , obrigada <3
ResponderExcluirMe inspirei no seu "negrito , italico e bla bla bla " se não quiser avise-me que eu tiro ^-^
Por nada Cat! ^3^
ExcluirTem certeza que só se "inspirou" anjo? Porque o código é exatamente o mesmo e3e
A mas , você não colocou oque devemos usar no gadget e.e
ResponderExcluirAqui (http://static.tumblr.com/74tqsur/qYOn1dcgm/p.txt), foi mal mesmo (∩︵∩)
ExcluirAqui o clima ta melhorando aos poucos .
ResponderExcluirDoida pra ver o lay *u* , essa cor é mesmo linda .
Eu já sabia fazer , mas voçe explica bem direitinho u.u tomara que ajude ne *3*
● Geekegirlie.blogspot.com || G² Official ♥
Obrigada Celly ♥
ExcluirEu já vi vários tutoriais mas nunca consegui criar um menu descente. Mas com o seu, acho que conseguirei melhor. Você explicou direitinho e explicou coisas que eu não sabia, irá me ajudar muito *o*.
ResponderExcluir@P-Kpoppers
Yaay, obrigada Amy >3<
ExcluirEu também sou assim Mack, isso aconteceu com Arctic Monkeys, eu ouvi uma música, e quando fui ver, já tinha o album inteiro deles no meu celular >3< Adorei o tutorial, muito útil!
ResponderExcluiruns-killed.blogspot.com
Gente, também me aconteceu isso com AM >3< Obrigada ♥
ExcluirEu acho que aqui também o cima está melhorando! De vez em quando chove por aqui! Teve um dia que veio um vento SUPER forte com chuva :T AWWN Mack! ♥ Espero ansiosa pelo novo layout do TMR, as cores são perfeitas *---* Eu nunca me interessei em aprender a fazer um menu sabe? Não tive aquele incentivo ~ mas eu já fiz um e fiquei super feliz com o resultado, mas isso foi á alguns tempos. Adorei a explicação! Aprendi mais coisas :D ^-^
ResponderExcluirWhow ~ Awwn, muito obrigada Marry! (´∀`)♡
ExcluirI think this is among the most important information
ResponderExcluirfor me. And i am glad reading your article.
But want to remark on some general things, The site style is perfect, the articles is really excellent : D.
Good job, cheers
My blog post :: gamestop hours champaign
Glad you enjoyed! Thank you for so nice comment :D
ExcluirAmei o post *_* tá tudo muito bem explicadinho, vou tentar fazer um menu <3, sério, esse post ajudou pra caramba :D
ResponderExcluirhttp://doze-primaveras.blogspot.com.br/
Nhaw, que bom que gostou Gii <3
ExcluirAmore, mas o que eu coloco no gadget de HTML/Java Script ?!
ResponderExcluirObrigada <3
http://doze-primaveras.blogspot.com.br/
Aqui (http://static.tumblr.com/74tqsur/qYOn1dcgm/p.txt), foi mal mesmo (∩︵∩)
ExcluirEu era viciada em fazer menus dei uma parada agora confesso que é divertido -n, eu gostei do tutorial acho que vai ajudar bastante o pessoal. Ansiosa para o novo lay você sempre deixa eles perfeitos.
ResponderExcluirhttp://love-is-html.blogspot.com.br/
AHSIAUHSIASH Eu também q Obrigada ♥
ExcluirÓtimo tutorial, Eu estou viciada em Vocaloid, desde que comecei usar o Lay da Miku.
ResponderExcluirPs: Como você consegue ser tão diva? ç-ç
Beijinhos~
sugarynyah.blogspot.com
Awn, obrigada Marie ♥
ExcluirOoi amr ! Queria muito saber como vc fez aquele menu de redes sociais seu q ta diwo !!! Se puder me deixa o link de onde vc aprendeu ou faz um tutorial explicando ! Obg =)
ResponderExcluirBlog meu - http://cottoon-caandy.blogspot.com.br/
Tutorial perfect! A explicação foi simples mas goiabinha de entender ♥
ResponderExcluirObrigada Mack por clarear a mente de uma jovem perdida em meio a tantos ings ~huehuheuh~
Awe ~ Que bom que deu para entender, Verônica! Obrigada pelo comentário e boa sorte ♥
Excluir