Postagens

Mostrando postagens de Junho, 2009

Tutorial de um Menu CSS na Horizontal

Imagem
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…