Menu javascript e CSS sprites para redes sociais

O Fazer o meu Site está disponibilizando para download grátis um  menu javascitp e CSS sprite, uma técnica ensinada aqui mesmo no blog: CSS Sprite – criando um menu animado para criar um menu animado com imagens de background em arquivo único, deixando o menu bem mais leve e reduzindo o número de requisições http diminuindo assim o tempo de carregamento da página.

O processo é o mesmo e o menu é animado com três estágios diferentes: normal, mouse sobre e ao clicar. Todas as imagens estão reunidas em um só arquivo.

O código css é o responsável sozinho pelo processo de animação. O menu foi montado em um javascript externo para ser incluído como um Gadget no blog ou site, com configuração muito simples, veja um exemplo abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- |||||||| COMEÇO CÓDIGO BOTÕES SOCIAIS ||||||||| -->
<script language="JavaScript" src="menu-redes-sociais.js"></script>
<script>
comeco_menu()
item_menu('perfil twitter','descrição','_blank','twitter')
item_menu('perfil facebook','descrição','_blank','facebook')
item_menu('perfil google mais','descrição','_blank','googlemais')
item_menu('url feed','descrição','_blank','rss')
fim_menu()
</script>
<!-- |||||| FIM CÓDIGO BOTÕES SOCIAIS ||||||| -->

É super simples trocar as posições dos botões apenas trocando a classe css que é passada no último parâmetro, ou simplesmente inverter a ordem de inclusão da função item_menu.

Será fácil trocar a imagem por imagens de botões diferentes e reajustar o menu, principalmente se ler o artigo sobre criação de css sprites já citadado, porém se desejar colocar uma nova imagem e que se adapte a qualquer cor de fundo, sem criar um serrilhado que dá uma  aparência não muito profissional dependendo da cor de fundo onde será colocado o menu; o ideal será  salvar a nova imagem em PNG-24 e fundo transparente.

No Photoshop você pode fazer isso facilmente em “Salvar para web” escolhendo a devida opção:

Isso deixará a imagem um pouco mais pesada, portanto se pretende colocar o menu em apenas um site ou blog, para deixar mais leve pode usar o método de deixar o serrilhado da cor de fundo do site/blog onde o menu ficará.

No Photoshop isso é feito da seguinte forma:

Coloca uma cor de fundo na imagem do menu que coincida ou seja muito próxima da cor de fundo do blog, clica em “salvar para web” e escolha PNG-8.

Na caixa de cores clique na cor que você escolheu como cor de fundo, que coincidirá com a cor de fundo do blog e depois clique no pequeno ícone transparente para suprimir essa com, deixando o serrilhado da cor do fundo do blog e fincando imperceptível então.

Em geral, esse processo não é necessário quando as imagens  não possuem formas arredondadas. Botões totalmente quadrados por exemplo, dispensam essa técnica.

Clique no link para baixar o Menu javasript css sprites de redes sociais.

Aproveite e aprenda como criar um Menu em javascript com DOM nível 2.

Até a próxima.