Como Criar um Topo de Site com Menu CSS: Parte 2
Olá, pessoal
Na primeira parte deste tutorial, criamos a base do nosso topo, inserindo alguns efeitos simples, porém poderosos quanto ao resultado final. Em sequência, complementaremos o topo colocando o menu principal e dois ícones para o RSS e o Twitter e, em seguida, aplicaremos a técnica sprites com o css para dar “vida” a este menu e ícones, ok?!
Vamos lá, então.
Pré-Requisitos
- Familiaridade com o Fireworks CS3 ou CS4.
- Familiaridade quanto às linguagens [x]html e css.
- Facilidade quanto ao manuseio de algum editor de texto (bloco de notas) ou editor html (Dreamweaver, Notepad++, etc)
- Realizar o download da fonte e dos ícones abaixo:
-
Download da fonte: Asphyxiate
-
Download dos ícones RSS e Twitter
Objetivos
- Criar o menu css aplicando a técnica sprites.
PARTE 01 – Criação do Topo do Site
1º Passo – Criando os Itens do Menu e Inserindo os Ícones
Pessoal, no arquivo-final disponibilizado na primeira parte, todo o conteúdo foi desenvolvido em uma pasta chamada layout. Como vamos trabalhar com outras ações, devemos criar um segunda chamada menu. Tudo isso é para mantermos organizado nosso trabalho e termos maior facilidade quanto à manipulação dos novos itens a serem criados.
-
Fig. 01: Organização das camadas
Com isso, poderemos criar os itens do menu como mostrado na imagem abaixo:
-
Fig. 02: Itens do menu
2º Passo – Exportando Itens do Menu
Terminado a inserção dos itens, agora deveremos transformá-los em apenas uma imagem para, em seguida, exportamos.
Para isso, devemos selecionar todos os itens e agrupá-los (CTRL+G). Em seguida, criaremos um novo arquivo (CTRL+N) e colaremos os itens copiados. Vale ressaltar que o fundo deste novo arquivo deve estar transparente.
-
Fig. 03: Criação da imagem master
Agora, para exportarmos com o fundo transparente, que poderá ser no formato GIF ou PNG, acessemos o menu File > Export Wizard… Vejamos as telas abaixo:
-
Fig. 04: Exportação no formato PNG com fundo transparente
Devemos dar um nome para o arquivo e, como sugestão, menu.png.
Pronto, pessoal…
Aplicando esta mesma técnica, vamos exportar também o topo, mas sem os itens do menu e ícones com o nome topo.png.
3º Passo – Preparando os Arquivos HTML e CSS Iniciais
Como sempre, vamos criar uma pasta onde armazenaremos os arquivos e imagens a serem utilizados para a montagem do topo e do menu.
-
Fig. 05: Organização dos arquivos
Nosso arquivo HTML inicial será este:
< !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>CarlosHPS Webdesigner | Como Criar um Topo de Site com Menu CSS: Parte 2</title>
<link href="menu-estilo.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body><div id="pagina">
<div id="topo">
<ul id="menu">
<li id="rss"><a href="#">RSS</a></li>
<li id="twitter"><a href="#">Twitter</a></li>
<li id="home"><a href="#">Home</a></li>
<li id="portfolio"><a href="#" >Portifólio</a></li>
<li id="contato"><a href="#">Contato</a></li>
</ul>
</div><!-- fim da div topo-->
</div>
</body>
</html>
E o css:
/*----------------------------------------------------------
Configurações Gerais
----------------------------------------------------------*/
*{
margin: 0; /*Zera todo o espaçamento EXTERNO entre as DIV's*/
padding: 0; /*Zera todo o espaçamento INTERNO das DIV's*/
}
/*----------------------------------------------------------
Configurações da div PAGINA que receberá a imagem de fundo
----------------------------------------------------------*/
#pagina{
background-image: url(imagens/topo.jpg); /*endereçamento da imagem*/
background-repeat: no-repeat; /*evita a repetição da imagem*/
background-position: top center; /*posicionamento da imagem: topo e centro*/
background-attachment: fixed; /*fixando a imagem de fundo*/
width: 960px; /*largura da div*/
height: 400px; /*altura da div*/
}
/*----------------------------------------------------------
Configurações da ID da lista TOPO que receberá os itens do menu
----------------------------------------------------------*/
#topo{
position: relative; /*posicionamento relativo da div*/
left: -35px; /*distanciamento da margem esquerda relativa a div*/
top: 256px; /*distanciamento do topo relativo a div*/
}
Com isso, teremos até aqui o seguinte resultado parecido com a imagem abaixo. Caso não esteja exatamente igual, não se preocupe, pois isso variará de acordo com o navegador e a sua versão.
-
Fig. 06: Rasultado parcial
4º Passo – Alinhando e Convertendo Listas em Menus
Vamos, agora, retirar os marcadores das listas, alinharmos cada lista em seu lugar e colocarmos uma na horizontal.
/*----------------------------------------------------------
Configurações dos itens do menu
----------------------------------------------------------*/
ul#menu{
width: 672px; /*largura do menu*/
height: 76px; /*altura do menu*/
margin: 0 auto; /*centraliza o conteúdo do menu*/
list-style: none; /*retira os marcadores dos itens do menu*/
text-align: center; /*centraliza o conteúdo do menu para IE 5+*/
}
ul#menu li{
display: inline; /*deixa todos os itens da lista na horizontal*/
}
E o resultado até aqui, será este:
-
Fig. 07: Resultado parcial - alinhamento das divs
5º Passo – Formatando os Links
Chamamos de Imagem Master a imagem que contém todas as ações dos menus. Lembram que a exportamos (Fig. 03) no início do tutorial?
Pois bem, trataremos os links apenas com duas ações: link (que é a configuração inicial do link) e hover (que é a configuração quando o mouse está sobre o link).
De acordo com a imagem abaixo, a primeira sequência de imagens se refere ao LINK e a sequência debaixo, ao HOVER e cada uma tem uma altura diferenciada devido ao tipo e formatação do link.
-
Fig. 08: Alturas do links
Com este detalhes, podemos criar as formatações iniciais para os links:
ul#menu li a{
height: 49px; /*altura de todos os links do menu*/
float: left; /*flutuação à esquerda*/
text-indent: -5000px; /*recuo para posicionar o texto dos links*/
}
ul#menu li a:hover{
height: 76px; /*altura do link quando o mouse estiver sobre o mesmo*/
}
6º Passo – Posicionando a Imagem Master
Agora que a “brincadeira” vai ficar legal 
Links criados e menu formatado, agora vamos trabalhar o posicionamento da imagem master de maneira que ela fique exatamente localizada sob cada link. Para isso, precisamos trabalhar com uma certa precisão, a posição x e y de cada link representado pela imagem.
Não entendeu nada? 
rsrsrs Vamos à prática.
-
Fig. 09: Posicionamento dos links na imagem master
Percebamos que todas as áreas da imagem, traçando linhas-guias nas extremidades delas podemos ter, com exatidão, suas dimensões. Além do espaço entre elas. Mas o principal é traçarmos uma linha imaginária, como se fosse um eixo cartesiano (lembra disso?), vejamos abaixo:
-
Fig. 10: Posicionamento através dos eixos x e y
Com base na lógica acima, a configuração do nosso primeiro link, o RSS, ficará da seguinte forma:
ul#menu li#rss a{
width: 36px; /*largura do ícone RSS*/
background: url(imagens/menu.png) no-repeat 0px 0px; /*inserção da imagem que não se repetirá e se posicionará em x=0 e y=0*/
margin-right: 17px; /*distância entre o ícone RSS e o do Twitter*/
}
ul#menu li#rss a:hover{
background: url(imagens/menu.png) no-repeat 0px -70px; /*inserção da imagem que não se repetirá e se posicionará em x=0 e y=-70*/
}
Simples, não?
E com o ícone do Twitter, teremos:
ul#menu li#twitter a{
width: 50px;
background: url(imagens/menu.png) no-repeat -53px 0px;
margin-right: 30px;
}
ul#menu li#twitter a:hover{
width: 50px;
background: url(imagens/menu.png) no-repeat -53px -70px;
margin-right: 30px;
}
-
Fig. 11: Formatação do link:hover
É isso aí, pessoal.
Obedecendo a mesma sequência lógica e devidos ajustes, nosso código css final deverá ficar assim:
/*----------------------------------------------------------
Configurações Gerais
----------------------------------------------------------*/
*{
margin: 0; /*Zera todo o espaçamento EXTERNO entre as DIV's*/
padding: 0; /*Zera todo o espaçamento INTERNO das DIV's*/
}
/*----------------------------------------------------------
Configurações da div PAGINA que receberá a imagem de fundo
----------------------------------------------------------*/
#pagina{
background-image: url(imagens/topo.jpg); /*endereçamento da imagem*/
background-repeat: no-repeat; /*evita a repetição da imagem*/
background-position: top center; /*posicionamento da imagem: topo e centro*/
background-attachment: fixed; /*fixando a imagem de fundo*/
width: 960px; /*largura da div*/
height: 400px; /*altura da div*/
}
/*----------------------------------------------------------
Configurações da ID da lista TOPO que receberá os itens do menu
----------------------------------------------------------*/
#topo{
position: relative; /*posicionamento relativo da div*/
left: -35px; /*distanciamento da margem esquerda relativa a div*/
top: 256px; /*distanciamento do topo relativo a div*/
}
/*----------------------------------------------------------
Configurações dos itens do menu
----------------------------------------------------------*/
ul#menu{
width: 672px; /*largura do menu*/
height: 76px; /*altura do menu*/
margin: 0 auto; /*centraliza o conteúdo do menu*/
list-style: none; /*retira os marcadores dos itens do menu*/
text-align: center; /*centraliza o conteúdo do menu para IE 5+*/
}
ul#menu li{
display: inline; /*deixa todos os itens da lista na horizontal*/
}
ul#menu li a{
height: 49px; /*altura de todos os links do menu*/
float: left; /*flutuação à esquerda*/
text-indent: -5000px; /*recuo para posicionar o texto dos links*/
}
ul#menu li a:hover{
height: 76px; /*altura do link quando o mouse estiver sobre o mesmo*/
}
ul#menu li#rss a{
width: 36px; /*largura do ícone RSS*/
background: url(imagens/menu.png) no-repeat 0px 0px; /*inserção da imagem que não se repetirá e se posicionará em x=0 e y=0*/
margin-right: 17px; /*distância entre o ícone RSS e o do Twitter*/
}
ul#menu li#rss a:hover{
background: url(imagens/menu.png) no-repeat 0px -70px; /*inserção da imagem que não se repetirá e se posicionará em x=0 e y=-70*/
}
ul#menu li#twitter a{
width: 50px;
background: url(imagens/menu.png) no-repeat -53px 0px;
margin-right: 30px;
}
ul#menu li#twitter a:hover{
width: 50px;
background: url(imagens/menu.png) no-repeat -53px -70px;
margin-right: 30px;
}
ul#menu li#home a{
width: 103px;
background: url(imagens/menu.png) no-repeat -147px 0px;
margin-right: 15px;
}
ul#menu li#home a:hover{
width: 150px;
background: url(imagens/menu.png) no-repeat -120px -73px;
margin-right: -5px;
margin-left: -27px;
}
ul#menu li#portfolio a{
width: 165px;
background: url(imagens/menu.png) no-repeat -277px 0px;
margin-right: 25px;
}
ul#menu li#portfolio a:hover{
width: 170px;
background: url(imagens/menu.png) no-repeat -277px -73px;
margin-right: 20px;
}
ul#menu li#contato a{
width: 156px;
background: url(imagens/menu.png) no-repeat -475px 0px;
}
ul#menu li#contato a:hover{
width: 200px;
background: url(imagens/menu.png) no-repeat -475px -73px;
}
E o nosso topo, assim:
Bom, por hoje é só.
CarlosHPS Webdesogner 
Autor: CarlosHPS Webdesigner – Colunista do Portal MXSTUDIO
Não deixem de me fazer uma visita:
- BLOG: www.carloshps.com.br/blog
- CURSOS ONLINE: www.carloshps.com.br/cursos
- PORTFÓLIO: www.carloshps.com.br/
Escrito por CarlosHPS Webdesigner
on janeiro 15, 2010. Arquivado em CSS.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Olá carlos, quebra essa pra mim. to fazendo um blog de ajuda a doentes mentais pois sou estudante de Psicanalise e estou precisando de um topo de site. Voce poderia contruir um pra mim? as medidas são 920×120. Pode vir escrito Doutor Divã e uma foto transada de freud ou de uma cabeça humana doidona sei lá. Se puder meu me avise por e-mail onde fazer o download. Obrigado.