Artigos e Tutoriais Para Desenvolvedores Web

Como Criar um Topo de Site com Menu CSS: Parte 2

Postado em CSS, Fireworks, HTML, Tutoriais, Web Design | 2 comentários



Na primeira parte desta série do tutorial como criar um topo de site com menu CSS com o Fireworks, HTML e utilizando a técnica de sprites CSS, 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?!

Clique na imagem abaixo e veja o resultado final do tutorial como criar um topo de site com menu CSS:

Como Criar um Topo de Site com Menu CSS: Parte 2

Antes de iniciar o tutorial, baixe as imagens que serão utilizadas:

Download da fonte: Asphyxiate

Download da fonte: Asphyxiate

Download dos ícones RSS e Twitter

Download dos ícones RSS e Twitter

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

Fig. 01: Organização das camadas

Com isso, poderemos criar os itens do menu como mostrado na imagem abaixo:

Fig. 02: Itens do menu

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

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

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

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>Como Criar um Topo de Site com Menu CSS: Parte 2 | CarlosHPS Blog</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><!-- fim da div #pagina-->
</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*/
	margin: 0 auto; /*centraliza o conteúdo da pagina*/
	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*/
	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 com lista não formatada para o menu

Fig. 06: Resultado parcial com lista não formatada para o menu

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: alinhamento da lista - menu horizontal css

Fig. 07: alinhamento da lista – menu horizontal css

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: formatando links do menu horizontal com css

Fig. 08: formatando links do menu horizontal com css

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? :P rsrsrs Vamos à prática.

Fig. 09: Posicionamento dos links na imagem master

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

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

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:

/*********************************************************************
***********************************************************
Desenvolvido por: CarlosHPS Webdesigner
[www.carloshps.com.br/blog]
para o tutorial "Como Criar um Topo de Site com Menu CSS: Parte 2"
Todos os direitos reservados
Versão 1.5 | 15/01/2010
Atualizado em: 15/09/2013
***********************************************************
**********************************************************************/
/*----------------------------------------------------------
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*/
	margin: 0 auto; /*centraliza o conteúdo da pagina*/
	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*/
	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;
}

Veja o resultado final do tutorial Como Criar um Topo de Site com Menu CSS: Parte 2.

Bom, por hoje é só.

CarlosHPS Webdesogner 8)

Webtutoriais:8A60DFD2

2 Comentários

Junte-se à conversa e poste um comentário.

  1. Eduardo
    Rapaz muito show …ajudou bastante

Trackbacks/Pingbacks

  1. Como Criar um Topo de Site com Menu CSS: Parte 1 - CarlosHPS Blog - […] Como Criar um Topo de Site com Menu CSS: Parte 2 […]
  2. Script Hunter » 27 Finest Adobe Fireworks Tutorials - […] Read More on Creating a Web Site Top Menu with CSS: Part 2 […]

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>