Menu com CSS

Podemos estar criando um menu somente CSS sem Javascript. Isso deixa o menu mais flexível e compatível com a maioria dos navegadores, o que é extremamente recomendado pela W3C.

1 - No seu arquivo html, crie a estrutura com listas não ordenadas como mostra a imagem. É importante colocar os IDs de forma correta e construir o HTML como na imagem.



2 -Agora você irá escrever a CSS desse menu:

*{
    margin:0px;
    padding:0px;
}

Comentário: O seletor universal (*) tira as margens e preenchimentos das listas.

#navCima{
    list-style-type:none;
    font-family:Verdana, Geneva, sans-serif;
    font-size:0.7em;
    width:900px;   
}

Comentário: A regra #navCima tira os marcadores da lista , formata a fonte e define a largura do menu.

#navCima li{
    position:relative;
    float:left;
    text-align: center;
}

Comentário: Para o item da lista, definimos que eles flutuam a esquerda, que o seu texto fica ao centro e sua posição é relativa.

#navCima li ul{
    display:none;
    position:absolute;
    top:26px;
    float:left;
    width:900px;
    list-style-type:none;
}

Comentário: Para a sublista (que é o submenu), definimos que ele tem posição absoluta, desloca do topo 26px e a opçãp display esconde essas listas.

#navCima li a{
    display:block;
    float:left;
    line-height:2.3em;
    background-color:#8e7c48;
    text-decoration:none;
    color:#FFF;
    width:130px;
    background-repeat: repeat-x;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #e4d5ac;
   
}

Comentário: Nos links, definimos para a listas aparecerem com a opção display, que a largura de cada item da lista é de 130px e o retso são configurações para as fontes.

#navCima li a:hover{
    background-color:#CCC;
}

#navCima li:hover ul{
    display:block;
}

#navCima li #sof{
    left:-131px;
    float:left;

}

Comentário: Essa é uma regra importante, definimos que a lista de id #sof desloca da esquerda -131px. Isso altera sua posição.

#navCima li #des{
    left:-262px;
    float:left;
}

Comentário: Como o submenu #des é o segundo submenu ele desloca da esquerda -262px.

Observe na imagem como fica o menu:

Comentários

  1. Estou case lá estou tentando fazer. esse menu o coisa complicada srsrs

    ResponderExcluir
  2. Olá tudo bem?

    Fiz tudo como manda aqui e nas vídeo aulas.
    Quero saber como posso centralizar o menu na página, já que tem poucos item.

    Parabéns pelo seu trabalho, você é uma pessoa super doce. Adorei ser seu aluno.

    Grato,

    Edison

    ResponderExcluir
  3. Olá Edison!

    Você pode inserir uma div ao redor do seu menu com seu respectivo id, e na regra css (no caso seu id) colocar margin:auto

    Abraços,

    Ana

    ResponderExcluir
  4. Na Sua Video Aula de número 5 (Criando Site HTML5 E CSS3), chega um momento que você fala que você não vai explicar como fazer o menu em css, pq já tem no blog ...

    Você se refere a esse tutorial ?

    Att,

    Dennis Alencar

    ResponderExcluir
  5. Olá Dennis!

    Pode ser... ou então esse:

    http://www.anapaulaweb.com.br/2009/06/tutorial-de-um-menu-css-na-horizontal.html

    Abraços,

    Ana

    ResponderExcluir
  6. Olá Ana Paula !
    Estou na aula 5 tentando fazer o menu, mas está dando o seguinte erro:
    na hora em que eu vou criar os links acaba empurrando a div conteudo para fora da estrutura do site.
    O que devo fazer para resolver esse erro ?

    ResponderExcluir
  7. Olá!

    Pode me mandar um e-mail apmmiranda@gamil.com com os arquivos.

    Abraços,

    Ana

    ResponderExcluir
  8. Olá, Ana Paula

    Nao estou conseguindo fazer o menu, ja montei conforme o lik que você me mandou, porem quando tento transportar para o menu para linha criada para o menu ele simplismente nao vai. tem alguma dica para me ajudar.

    Abraço

    Cido

    ResponderExcluir
  9. Olá Cido!

    Só vendo seus arquivos... Pode me mandar por e-mail.

    Abraços,

    Ana

    ResponderExcluir
  10. Olá Ana Paula,
    Estou a tres dias tentando sair da vídeo aula 5 mas não consigo construir o menu, no site que estou construindo estou passo-a-passo, tenho um arquivo código fonte, site.css e menu css.
    Copiei todo o codigo css do menu porem a lista nao ordenada nao aloca na barra do menu, teria um passo-a-passo detalhado para eu construir esse menu?
    Grato!
    parabéns pelo site!

    Sammuel

    ResponderExcluir
  11. Olá Samuel!

    Vc pode dar uma olhada nesse menu: http://www.anapaulaweb.com.br/2009/06/tutorial-de-um-menu-css-na-horizontal.html

    Ou me mandar os arquivos que dou uma olhada.

    Abraços,

    An@

    ResponderExcluir
  12. Muito grato quebrei mais um pouco a cabeça mas deu certo.
    Abs

    ResponderExcluir
  13. Saudações!
    Parabens Ana Paula Miranda pelos videos sobre Html5 e css3.

    Sou o Osvaldo da Cruz, estou com problema no menu, não consigo configura-lo porque o menu.css esta a dar bug, sera que podias me ajudar? obrigado.
    osvaldo.sga@gmail.com

    ResponderExcluir
  14. Olá Osvaldo!

    Podes me mandar um e-mail apmmiranda@gmail.com que dou uma olhada...

    Abraços,

    Ana

    ResponderExcluir
  15. Boa tarde !! Não estou conseguindo tirar os pontos pretos da lista desordenada que está parecendo nome :(

    ResponderExcluir
  16. Olá Adair!

    Só vendo seus arquivos... Se quiseres me mandar um e-mail...

    Ana

    ResponderExcluir
  17. Como deixar o menu selecionado apos clicar nele

    ResponderExcluir
  18. Podes olhar aqui: http://www.anapaulaweb.com.br/2013/01/item-selecionado-do-menu-com-css.html

    ResponderExcluir
  19. ola

    esto tendo dificuldades quanto a criação do menu. seria viável que você disponibiliza-se o arquivo para download para uma comparação?

    grato.

    ResponderExcluir
  20. Olá!

    Podes me mandar um e-mail...

    Abraços,

    Ana

    ResponderExcluir
  21. Boa noite estou levando uma surra. ta saindo algo de errado mais não sei o que é! tem como me ajudar???

    ResponderExcluir
  22. Olá!
    Ana não consigo fazer o menu da aula 5, já tentei de tudo...ajuda

    ResponderExcluir
  23. Olá, Ana. Boa noite.
    Se eu lher enviar meu projeto em .zip, voce cria o menu pra mim, do seu modo, importando o menu.css?
    Não consigo cria-lo de forma alguma e já faz 3 dias que estou tentando.
    Por gentileza, aguardo resposta no e-mail lh.simon@hotmail.com
    Minha gratidão será eterna se voce me ajudar!

    Até mais!

    ResponderExcluir
  24. Ana, como eu crio esse arquivo menu.css?

    ResponderExcluir

Postar um comentário

Deixe seu comentário ou dúvida:

Postagens mais visitadas deste blog

Estrutura básica de documento em HTML5

Adição e subtração de paths no Photoshop CS4