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/

1.404 assinantes,
assine você também!

1 Comment to “Como Criar um Topo de Site com Menu CSS: Parte 2”

You can follow all the replies to this entry through the comments feed.

fonsell

Fevereiro 28, 2010 at 4:00 am | Permalink

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.