Menu com efeito Fade usando CSS
abril 23rd, 2008Quem foi que disse que somente no Flash é possível fazer sites com efeitos coloridos, piscantes e animados? Já ouviram falar em CSS + :hover + Gif ? rsrs… 
Gostaria de aprender a fazer um menu como este 
1º Passo:
Abra um editor de html e crie duas listas. Nomeie cada lista com class’s diferentes. Como no meu exemplo: “eskerda” e “direita”.
<ul class="eskerda">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="direita">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
2º Passo:
Usando um editor de imagens que faça gifs animados (eu usei o Adobe ImageReady), você vai criar o efeito que você quer que apareça quando o mouse for passado em cima do botão.
Faça a imagem exatamente do tamanho do botão que você pretende criar. Por isso é bom já imaginar o que você quer fazer antes de começar.
No meu caso, eu imaginei fazer um grande menu, com botões do tamanho de 300x60px, então foi exatamente esse tamanho que fiz a minha imagem. Fiz um degradê de verde para a cor de fundo do meu botão, que no caso é ‘cinza escuro’ ou #666666 como preferir chamar.
Ao salvar o gif, NÃO SALVE COM LOOP INFINITO.
Se você acabou de descobrir que não sabe fazer gifs animados, leia esse tutorial.
3º Passo:
No CSS, insira o código abaixo:
*{padding:0; margin:0;}
body{
background-color:#CCCCCC;
font-family:"Tahoma",Arial, Helvetica, sans-serif;
font-size:11px;
}
.lista, .direita{
float:left;
}
.lista li{
list-style:none;
width:300px;
height:35px;
background-color:#666666;
padding:25px 15px 0px 15px;
color:#CCCCCC;
border-bottom:1px solid #333;
border-top:1px solid #999;
border-left:1px solid #333;
border-right:1px solid #999;
}
.lista li:hover{
list-style:none;
width:300px;
height:35px;
background-color:#666666;
padding:25px 15px 0px 15px;
color:#ffffff;
cursor:pointer;
background-image:url(hover2.gif);
background-repeat:no-repeat;
}
Este CSS está todo ‘comentado’, para que você entenda o que cada propriedade vai fazer com seu menu. Se você quiser, pode deletar os comentários (texto que está entre /* … */), não afetará o resultado final.
Pronto! Agora visualize sua página.
Você pode usar outras cores ou criar outros efeitos… vai da sua criatividade!
abril 23rd, 2008 at 17:21
a quebra de linha não está funcionando
abril 25th, 2008 at 15:21
po bacana… uma economia e tanto de trabalho!
ainda nao tinha visto essa pelas minhas andanças!
novembro 9th, 2008 at 12:06
Muito bom mais o efeito não aparece no Microsoft Internet Explorer.
Espero respostas obribado.
março 13th, 2010 at 20:53
Muito bom, agora sobre o IE…eles q se movam pra evoluir…todos estão e pq eles nao?, nao vamos ficar criando soluções pra empresa de nome e com tanta grana e isso só dificulta no desenvolvimento nosso, pq o senhor Bill nao segue o ex: FIREFOX e outros…e as pessoas tratem de atualizarem seus navegadores ou mudem pros tops, FIREFOX, OPERA CHROME etc….
menu ficou show de bola.
março 1st, 2011 at 06:40
thanks your advice to me,it is do available to me!