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

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:

E o css:

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.

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:

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

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:

Simples, não?

E com o ícone do Twitter, teremos:

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:

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

[wpdm_file id=38]

Bom, por hoje é só.

CarlosHPS Webdesogner 8)

Webtutoriais:8A60DFD2

Gostou desta postagem?

Então, inscreva-se GRÁTIS e receba todas as novidades e atualizações do CarlosHPS Blog.

Tudo ok, até agora! Entre em seu e-mail e confirme seu cadastro =]


Posts Relacionados
Comentários ( 4 )
  1. Eduardo
    4 de maio de 2014 at 1:16
    Responder

    Rapaz muito show …ajudou bastante

    • CarlosHPS Webdesigner
      6 de maio de 2014 at 23:02
      Responder

      Valeu pela força, Eduardo.

      Abs.

      CarlosHPS Webdesigner 8)

Deixe uma resposta
Captcha Clique para atualizar o código