Menu superior com HTML e CSS
Última atualização quarta-feira, 12 maio 2010 01:38 Escrito por Márcio Silva quarta-feira, 12 maio 2010 01:30
Um barra muito comum em sites às vezes se torna trabalhosa de se desenvolver quando se tem pouca familiaridade com HTML e CSS é a barra superior. Neste tutorial você verá como construir um menu Superior/Barra superior para seu site.
Primeiramente precisamos idealizar como será nosso menu. Neste caso, farei um menu superior que se estende por toda largura do navegador, no entanto os menus se concentrarão numa área limitada ao centro com a largura do site que é de 940px.
O HTML inicial é o mostrado abaixo:
<!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=iso-8859-1" />
<title>Teste</title>
<style type="text/css">
@import url('css.css');
</style>
</head>
<body>
<div id="menu">
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portifólio</a></li>
<li><a href="#">Empresa</a></li>
<li><a href="#">Clientes</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">Fórum</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</body>
</html> |
O DIV menu será responsável pela cor de fundo do menu que será estendida em toda a largura do navegador. Já a TAG container será responsável pelo alinhamento dos itens do menu ao centro da página.
Seguimos agora para o css, crie um arquivo css.css e salve no mesmo diretório do arquivo HTML. Primeiramente vamos zerar alguns atributos do HTML para que o menu fique colado na parte interna do navegador.
html, body{width:100%; height:100%; padding:0; margin:0;} |
Agora vamos estilizar o fundo do menu aplicando uma altura e cor de fundo. Neste caso estou aplicando uma imagem de 30px de altura e 1px de largura.
#menu{width:100%; background:url(bg.png) repeat-x; height:30px} |
Por padrão a tag ul possui um valor de margin e padding atribuído, e este fato difere entre os navegadores. Portanto devemos zerar estes atributos como mostrado abaixo:
#menu ul{padding:0; margin:0; list-style:none} |
Agora iremos aplicar estilos aos links do menu. Até agora o menu ainda não está em linha. Para colocá-lo em linha existem diversas formas, aqui veremos uma delas que consiste em aplicar um float:left ou float:right na tag a e depois aplicar um display:block. Veja como ficou abaixo já aplicando alguns atributos de formatação.
#menu ul li a { float:left; display:block; width:100px; font:12px Helvetica, Geneva, sans-serif; text-decoration:none; color:#FFF; text-align:center; padding-top:5px; font-weight:bold; border-left:1px solid #666; border-right:1px solid #999; height:25px; } |
Veja que a altura do link é 25px, que é exatamente a altura do div menu menos o valor do padding dos links. Esta conta serve para alinhar os itens do menu verticalmente.
Agora aplicamos um efeito que ao passar o mouse em cima do menu ele muda de cor.
#menu ul li a:hover{background:#FFF; color:#444;} |
E para finalizar colocamos os itens do menu ao centro da página.
.container{margin:0 auto; width:940px} |
Versões mais antigas do IE não vão renderizar corretamente o menu em linha, podendo deixar o menu em formato de escada. Para corrigir isso basta adicionar a seguinte linha:
#menu ul li{float:left} |
Veja o menu superior em funcionamento.
Leia também:
- Layout com 100% de altura
- Criando Plugins no CakePHP
- Instalando FFMPEG-0.6 no Ubuntu 10.04
- Dica: Repositório de ícones
- Usabilidade
- Criando Plugins no WordPress: O Básico
- Dica: Guia sobre Expressões Regulares
- Dicas de Otimização: Alocação dinâmica de memória para uma Matriz
- Uma história ágil de guerra
[...] This post was mentioned on Twitter by Márcio Silva, devfordummies. devfordummies said: New post: Menu superior com HTML e CSS http://www.devfordummies.com/2010/05/menu-superior-com-html-e-css/ [...]