The Moon Reverse ミ✩: Tutorial - Criando um menu (Base e explicando alguns códigos)

13 de julho de 2015

Tutorial - Criando um menu (Base e explicando alguns códigos)

Boa noite corações! ヾ(☆▽☆) Só eu que estou sentindo o clima por aqui "melhorar" mas bem pouquinho, tipo, bem lento mesmo? Eu não sei, vai ver aqui em casa o clima está mais fresco e eu tenho essa sensação. Mas enfim, como vocês estão? q Acabei desviando o assunto. Bom me perguntaram na ask algumas vezes a seguinte pergunta "Como fazer um menu?" Gente, podem se acalmar porque eu sei que existe milhões de tutoriais explicando por aí, mas como sugeriram eu irei explicar basicamente do que você precisa e qual a função dos códigos, juntamente disponibilizarei uma base bem simples para que vocês possam fazer um menu  sem dificuldades.



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;
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;
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.
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)
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.
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".
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".
Bom, fiz os mais simples, espero que gostem e ajude alguém! \o

textsms      25 comentários

  1. Unico tutu de menu que consegui entender , obrigada <3
    Me inspirei no seu "negrito , italico e bla bla bla " se não quiser avise-me que eu tiro ^-^

    ResponderExcluir
    Respostas
    1. Por nada Cat! ^3^
      Tem certeza que só se "inspirou" anjo? Porque o código é exatamente o mesmo e3e

      Excluir
  2. A mas , você não colocou oque devemos usar no gadget e.e

    ResponderExcluir
    Respostas
    1. Aqui (http://static.tumblr.com/74tqsur/qYOn1dcgm/p.txt), foi mal mesmo (∩︵∩)

      Excluir
  3. Aqui o clima ta melhorando aos poucos .
    Doida 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

    ResponderExcluir
  4. Eu 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*.

    @P-Kpoppers

    ResponderExcluir
  5. Eu 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!

    uns-killed.blogspot.com

    ResponderExcluir
    Respostas
    1. Gente, também me aconteceu isso com AM >3< Obrigada ♥

      Excluir
  6. Eu 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 ^-^

    ResponderExcluir
  7. I think this is among the most important information
    for 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

    ResponderExcluir
  8. Amei o post *_* tá tudo muito bem explicadinho, vou tentar fazer um menu <3, sério, esse post ajudou pra caramba :D

    http://doze-primaveras.blogspot.com.br/

    ResponderExcluir
  9. Amore, mas o que eu coloco no gadget de HTML/Java Script ?!
    Obrigada <3

    http://doze-primaveras.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Aqui (http://static.tumblr.com/74tqsur/qYOn1dcgm/p.txt), foi mal mesmo (∩︵∩)

      Excluir
  10. Eu 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.

    http://love-is-html.blogspot.com.br/

    ResponderExcluir
  11. Ótimo tutorial, Eu estou viciada em Vocaloid, desde que comecei usar o Lay da Miku.
    Ps: Como você consegue ser tão diva? ç-ç
    Beijinhos~
    sugarynyah.blogspot.com

    ResponderExcluir
  12. Ooi 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 =)
    Blog meu - http://cottoon-caandy.blogspot.com.br/

    ResponderExcluir
  13. Tutorial perfect! A explicação foi simples mas goiabinha de entender ♥
    Obrigada Mack por clarear a mente de uma jovem perdida em meio a tantos ings ~huehuheuh~

    ResponderExcluir
    Respostas
    1. Awe ~ Que bom que deu para entender, Verônica! Obrigada pelo comentário e boa sorte ♥

      Excluir

O blog não é mais atualizado com novas postagens. Mas fique à vontade para perguntar algo do seu interesse, seja relacionado às postagens ou dúvidas que lhe inquietam, estou algumas vezes entrando no blog e certamente verei se tiver comentários pendentes. Obrigada pela visita, leitor!

Este blog não é mais atualizado com novas postagens!
Ps.: Que saudade, cara... Alguém ainda vivo por aqui em 2020?