Tutorial de um Menu CSS na Horizontal

A navegação é primordial para o sucesso de um site e essencial para sua identidade e usabilidade.

Para garantir que a nossa navegação fique consistente, funcione apropriadamente e esteja semanaticamente correta a forma mais adequada e montar com estilos css. Veja o exemplo:

No Html escrevemos o menu como lista desta forma:












No CSS escrevemos desta forma:

#nav{
margin:0;
padding:0;

list-style-type:none;
width:780px;
float:left;
font-family: Verdana, Geneva, sans-serif;
font-size: 0.7em;
font-weight: bold;
background:#36F;
}


#nav li{
margin:0;
padding:0;
float:left;
}

#nav a{
float:left;
width:129px;
text-align:center;
color:#d3e1e2;
text-decoration:none;
line-height:3.5;
border-right: 1px solid #a9bedf;
}

#nav a:hover{
background-color: #4B6389;
color: #3D547D;
}


Ao final nosso menu ficará como na imagem abaixo:






O propósito da navegação é ajudar os usuários a encontrar o que procuram rápida e eficientemente. Acima de tudo, a navegação deve ser clara e simples. Criatividade e usabilidade devem andar juntas na criação de um menu.

Testem e estilizem seu menu a vontade... Muita criatividade para vcs...

Comentários

  1. Muito legal...
    Agora, favor atualizar para eu ir aprendendo!!! rsrsrsrsrs

    Beijos

    ResponderExcluir
  2. que show Ana! muito legal seu blog
    vou estar acompanhando seus post's...
    já me inscrive no RSS...

    Pa.ra.béns!!!

    ResponderExcluir
  3. Ana,
    Duas questôes:
    1 - Onde está a linha que chama o CSS? Comigo só dá certo quando crio o link rel stylesheet correspondente.
    2 - Como centralizar esse menu?

    ResponderExcluir
  4. Olá Carlos!

    1- Se vc não tem um arquivo css para o seu site, podes criar um com o link padrão: link href="site.css" rel="stylesheet" type="text/css"

    2- Geralmente eu não centralizo esse menu, pois ele ocupa toda a extensão do site. Mas se vc quer centralizar qualquer elemento em relação a outro, pode criar uma div com um ID e criar a regra margin:auto.

    Abraços,

    Ana

    ResponderExcluir
  5. Ana,
    não estou conseguindo fazer esse menu
    não tem como você disponibilizar para download o arquivo menu.css ?

    obrigado

    ResponderExcluir
  6. Podes me mandar um e-mail, que lhe retorno...

    Ana

    ResponderExcluir
  7. estou enviando.
    muito obrigado pela atenção

    ResponderExcluir
  8. Ana adorei seu blog é muito bom
    mais nao consegui fazer esse menu não será que você poderia me manda os comando escrito
    por email
    pois fiz esse mais não deu certo se poderes me manda agraço

    keco
    email: kecofenix@hotmail.com

    ResponderExcluir
  9. Olá!

    O código é esse que está no blog... Qualquer coisa me mande um e-mail.

    Abraços,

    Ana

    ResponderExcluir
  10. Oi Ana Paula,
    estou acompanhando os seus vídeos no You tube (Site com Dreamweaver CS5.5...) e estou na aula V aonde vc explica que vc nao irá ensinar o menu.css porque vc encontra no blog. Pois bem, eu consegui refazer o menu acima, mas na hora que chamo ele no site que estou criando nao dá certo como no vídeo número V.....ele nao pega a configuracao do menu.css. O que estou fazendo de errado :(
    Obrigada,
    Lilian





    ResponderExcluir

Postar um comentário

Deixe seu comentário ou dúvida:

Postagens mais visitadas deste blog

Estrutura básica de documento em HTML5

Letras entrelaçadas no Photoshop CS4