Tutorial CSS #01: Menu rollover com imagem
Hoje irei falar sobre como criar menu rollover com imagem. Menus rollover s茫o menus que alternam o estilo ao passarmos o mouse sobre o objeto, um mouseover da vida.
Antigamente – e ainda bato de frente com isso hoje em dia – esses menus eram criados utilizando javascript e, pelo menos, dois arquivos de imagem – uma para o menu ativo e outra quando ativado o mouseover. Um problema que muito me incomoda com essa maneira de se criar menus 茅 o fato de, quando passamos o mouse por cima no objeto ele sumir com a imagem de fundo enquanto carrega a nova imagem.
Com todas as possibilidades que o CSS nos d谩, isso muda muito. Primeiro que, n茫o precisamos mais do javascript para ativar a troca de imagem e t茫o pouco de duas imagens. Vamos a explica莽茫o.
Vamos come莽ar pela imagem que iremos utilizar no menu. Criaremos, no mesmo arquivo de imagem, os dois estilos para nosso menu conforme imagem abaixo:
Percebemos que, da metade para cima, temos a parte que aparecer谩 logo que carregarmos nossa p谩gina e, na metade de baixo, a parte que aparecer谩 quando passarmos o mouse sobre o menu. Ok Gustavo, mas como faremos isso? Simples! Primeiro criaremos nosso menu com listas desordenadas:
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="quemSomos.htm">Quem Somos</a></li>
<li><a href="contato.htm">Contato</a></li>
</ul>A m谩gica esta toda no CSS, vejamos:
a {display:block;width:100px;height:18px;background:url('bgMenu.gif') no-repeat}
a:hover {background-position:0 -18px} /* ao passar o mouse no menu, deslocar
o fundo em -18px para o topo */
Seria legal voc锚 mostrar um exemplo, pois os iniciantes podem ficam perdidos.
@Pedro Rog茅rio, valeu o toque brother. Fiz o t贸pico t茫o r谩pido no trabalho que nem pensei nisso.
Abs
Agora sim, parab茅ns pelo tutorial. Isso acontece, de vez em quando eu dou umas dessas tamb茅m.
Ol谩! Em primeiro lugar parab茅ns pelo site! O conte煤do 茅 muito interessante.
Mas n茫o consegui visualizar os exemplos que voc锚 publicou. Os links n茫o funcionam.
Abra莽o.
@Marcos,
O exemplo est谩 aqui: http://blog.gustavoribeiro.net/_exemplos/rollover.htm, testei aqui e abriu normal
@Marcos Souza,
Obrigado por reportar os links quebrados. J谩 est茫o todos ok.
Abra莽o e obrigado.