Hoje vou ensinar como criar um menu horizontal em css nos padrões tableless. Esse tipo de menu é muito usado por sua vantagem de economizar espaço e dar uma boa aparência com rápido carregamento da pagina. Resumindo, um menu leve e pratico para deixar seu site mais bonito e mais leve sem perder as boas praticas de programação web.
Para utilizar o menu basta copiar o código e colar em um bloco de notas e salvar com extensão ponto html. Para quem já entende os códigos html e css pode separar o css em outros arquivos ponto css.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Menu Horizontal em CSS</title><!–Â –>
<style type=”text/css”>
#menu ul{
background:#000; /* cor de fundo preto você pode alterar */
padding:0; /* espaçamento 0 por padrão */
margin:0; /* margem 0 por padrão */
float:left; /* alinha a lista a esquerda */
list-style:none; /* indica que a lista não terá nenhum tipo de marcador */
width:100%; /* é a largura do menu , 100% indica a tela toda */
font:12px Arial; /* determina o tamanho da fonte e o tipo */
}
#menu ul li{
display:inline; /* indica que a lista vai ser em forma de linha */
}
#menu ul li a{
background:#000; /* determina a cor de fundo para os links no nosso caso preto*/
float:left; /* flutua os itens para o lado direito */
margin:0 4px 0 0;/* determina a margem para cada li */
padding:10px 7px 0 7px; /* aqui é uma das parte mais importante que indica o espaçamento entre a borda e a fonte */
text-decoration:none; /* indica que o link não vai ter nenhum tipo de decoração*/
color:#FFF; /* determina a cor da letra dentro das Tags A */
height:28px; /* determina o tamanho do link no menu */
}
#menu ul li a:hover{
background:#F00; /* aqui é definido a cor do fundo quando o mouse passa em cima */
}
</style>
</head>
<body>
<!– Aqui é a área para colocar os itens do menu. Cada LI representa um item do menu assim você coloca os itens que precisar –>
<div>
<ul>
<li><a href=”#”>Pagina Inicial</a></li>
<li><a href=”#”>Nossa Localização</a></li>
<li><a href=”#”>Produtos</a></li>
<li><a href=”#”>Serviços</a></li>
<li><a href=”#”>Contato</a></li>
</ul>
</div>
</body>
</html>
Você também pode incrementar esse código, pode adicionar mais links e personalizar a seu gosto. Caso você tenha alguma duvida deixe um comentário que eu entrarei em contato para ajudar a implementar esse código. Se você tiver mais alguma sugestão entre em contato que estarei postando mais códigos.
