Fazendo um Menu com MouseOver e MouseOut (Menu RollOver)
Um menu RollOver é aquele menu que muda alguma coisa quando o mouse passa sobre um item do menu, normalmente muda as cores de fundo, mas pode mudar imagens também. Nesse post vou mostrar o código HTML para gerar o menu e também um pouco de Javascript que precisaremos para fazer a mudança.
Primeiro mostrarei o código, HTML, Javascript e um pouco de CSS. Depois vai as explicações e um exemplo de funcionamento.
Código HTML do Menu
Primeiro o código HTML do menu:
<div id="menu"> <div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"> <a href="http://www.seudominio.com/index.html">PRINCIPAL</a></div> <div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"> <a href="http://www.seudominio.com/empresa.html">A EMPRESA</a></div> <div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"> <a href="http://www.seudominio.com/noticia.html">NOTÍCIAS</a></div> <div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"> <a href="http://www.seudominio.com/boletim.html">BOLETINS</a></div> <div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"> <a href="http://www.seudominio.com/artigo.html">ARTIGOS</a></div> <div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"> <a href="http://www.seudominio.com/bancoimagem.html">GALERIAS</a></div> <div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"> <a href="http://www.seudominio.com/link.html">LINKS ÚTEIS</a></div> <div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);"> <a href="http://www.seudominio.com/faleconosco.html">FALE CONOSCO</a></div> </div>
Esse menu é feito sem tabela (tableless), que é um “novo” conceito de desenvolvimento de páginas. Para ser feito assim, normalmente usa-se muito a tag <div>. No código acima temos um <div> externo, que tem uma classe associada a ele, essa classe veremos na segunda parte do código. Dentro desse <div> externo, temos um <div> interno para cada item do menu. Cada <div> interno tem os atributos class, onmouseover e onmouseout, explicados abaixo:
class
- esse atributo é usado para definir uma classe de estilo (CSS) para uma tag, e todas as tags dentro dessa tag herdam parte desse estilo.
onmouseover
- esse atributo especifica uma ação a fazer quando o mouse passar por cima do que essa tag exibe, no nosso caso um item do menu. E esse atributo executa um script em Javascript, logo a função que está lá dentro (mouse_over_menu(this);) é uma função Javascript.
onmouseout
- esse atributo especifica uma ação a fazer quando o mouse sai de cima do que essa tag exibe, no nosso caso, quando o mouse sair de cima de um item do menu, esse atributo diz que é para executar a função “mouse_out_menu(this);“, essa é uma função Javascript.
Código CSS (estilos).
A seguir vem o código da classe de estilos (CSS):
<style type="text/css">
#menu{
width:160px;
height:263px;
background-color:#fff;
}
.itemOn{
width:150px;
height:23px;
padding-left:10px;
padding-top:2px;
background-color:#fff;
}
.itemOn a{color:#336600; text-decoration:none; font-size:16px; font-weight:bold;}
.itemOn a:hover{text-decoration:none; font-size:16px; font-weight:bold;}
.itemOver{
width:150px;
height:23px;
padding-left:10px;
padding-top:2px;
background-image: url(bg-menu.gif);
}
.itemOver a{color:#fff; text-decoration:none; font-size:16px; font-weight:bold;}
.itemOver a:hover{text-decoration:none; font-size:16px; font-weight:bold;}
</style>
O estilo para o identificador menu (#menu), define a largura (width), altura (height) e cor de fundo (background-color) do menu. Podemos ver que o <div> externo do nosso menu está com esse identificador (id=”menu’), Ele irá receber esses estilos para começar a construção do nosso menu rollover.
Para saber um pouco mais sobre folha de estilos (CSS) acesse: Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.
Como vemos nos estilos acima, a única diferença entre as classe de estilo ItemOn e ItemOver é que o último tem uma imagem de fundo (background-image).
Agora a única coisa que falta fazer é o nosso código em Javascript para fazer a troca das classes de estilo dos itens do menu quando o mouse passar por cima ou sair de cime do item.
O Javascript do Menu
Como sempre, o código depois as explicações:
function mouse_over_menu(objDiv)
{
objDiv.className = 'itemOver';
}
function mouse_out_menu(objDiv)
{
objDiv.className = 'itemOn';
}
Vou explicar o básico sobre funções em Javascript. Para definir uma função em Javascript você deve escrever o cabeçalho da função seguido do corpo da função. No cabeçalho da função você deve colocar a palavra function seguida do nome da sua função (no caso das funções acima, mouse_over_menu e mouse_out_menu, respectivamente), seguido dos parametros passados para a função, entre parenteses.
O corpo da função deve estar todo entre chaves, e nele você coloca códigos Javascript para fazerem o que você quiser. No nosso menu, esse código vai apenas mudar a classe de estilo do objeto do elemento passado pelos parametros da função. Lá no nosso código HTML, podemos ver que foi passado um this como parametro da função, esse this indica que é para passar o objeto do elemento de onde a função está sendo chamada. No nosso caso, cada item do menu vai ser passado como um objeto Javascript para podermos modificar a sua classe.
O Código inteiro – Menu RollOver
Abaixo vai como ficaria o código inteiro do nosso menu rollover.
<html>
<head>
<style type="text/css">
#menu{
width:160px;
height:263px;
background-color:#fff;
}
.itemOn{
width:150px;
height:23px;
padding-left:10px;
padding-top:2px;
background-color:#fff;
}
.itemOn a{color:#336600; text-decoration:none; font-size:16px; font-weight:bold;}
.itemOn a:hover{text-decoration:none; font-size:16px; font-weight:bold;}
.itemOver{
width:150px;
height:23px;
padding-left:10px;
padding-top:2px;
background-image: url(bg-menu.gif);
}
.itemOver a{color:#fff; text-decoration:none; font-size:16px; font-weight:bold;}
.itemOver a:hover{text-decoration:none; font-size:16px; font-weight:bold;}
</style>
<script language="JavaScript">
function mouse_over_menu(objDiv)
{
objDiv.className = 'itemOver';
}
function mouse_out_menu(objDiv)
{
objDiv.className = 'itemOn';
}
</script>
</head>
<body>
<div id="menu">
<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
<a href="http://www.seudominio.com/index.html">PRINCIPAL</a></div>
<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
<a href="http://www.seudominio.com/empresa.html">A EMPRESA</a></div>
<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
<a href="http://www.seudominio.com/noticia.html">NOTÍCIAS</a></div>
<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
<a href="http://www.seudominio.com/boletim.html">BOLETINS</a></div>
<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
<a href="http://www.seudominio.com/artigo.html">ARTIGOS</a></div>
<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
<a href="http://www.seudominio.com/bancoimagem.html">GALERIAS</a></div>
<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
<a href="http://www.seudominio.com/link.html">LINKS ÚTEIS</a></div>
<div class="itemOn" onmouseover="mouse_over_menu(this);" onmouseout="mouse_out_menu(this);">
<a href="http://www.seudominio.com/faleconosco.html">FALE CONOSCO</a></div>
</div>
</body>
</html>
Nesse link você pode ver esse código funcionando: Menu RollOver
Se gostou comente. 
Gostaria de saber como criar submenus.
Obs: parabéns pelo tutorial aí,vou testar em meu “projeto” de site.
outubro 22nd, 2009 at 19:07Eu tentei apenas copiar e colar no meu site,para só fazer algumas modificações,mas não funcionou,se alguém puder me dar uma dica…
outubro 22nd, 2009 at 19:12LOL….lá vou eu de novo.
Consegui fazer funcionar,mas,não consigo posicioná-lo onde quero.
Se uso o método que sei,o menu fica no lugar mas os links não funcionam.
Obs:
É mais ou menos isso que eu uso para posicionar as coisas no meu site.
outubro 22nd, 2009 at 19:28Ola Felippe, tudo bem?
Eu dei uma olhada no teu site, e você não está conseguindo colocar o menu onde você quer porque a imagem que está escrito “Felippe Amorim” é muito grande (tem 1200px × 1000px) e o fundo dela é preto, confundindo com o fundo preto do site. Então, o menu fica em baixo dessa imagem. Para você vizualizar melhor o problema, coloque uma borda nessa imagem (style=”border: 2px solid red”), ai você vai ver qual o tamanho total dela.
Abraços.
outubro 22nd, 2009 at 19:51Obrigado pela ajuda,já estou conseguindo visualizá-lo.
Mas agora o problema é outro (rsrsrs).O link tá lá certinho,da cor que eu quero,ainda não está onde eu quero mas depois vou mudar isso (junto com o nome e o endereço para onde o link leva etc),mas quando passo o mouse,por um dos linkis do menu,forma um retângulo branco em volta do link,não dando para ver o que está escrito.
outubro 23rd, 2009 at 12:03Peço que vocês me ajudem.
Bom,vocês já devem esta até me achando chato,mas lá vai…
consegui arrumar o problema do retângulo branco,consigo posicioná-lo onde quero e tudo mais.
outubro 23rd, 2009 at 12:42Porém os links só funcionam se estiverem entre os 230px a partir do topo.
Olá Felippe, desculpa a demora em responder, ainda estás com algum problema no menu?
Se sim, deixe também o endereço de onde eu posso ver o que você já fez, para poder ajuda-lo melhor.
Abraços.
novembro 5th, 2009 at 13:23Muuito massa, pegou aqui sim e meu site ficou muito legal com isso, olha valeu!
dezembro 17th, 2009 at 22:37Valeu Renato, estamos abertos a dúvidas e sugestões.
dezembro 18th, 2009 at 8:04Desejo um Excelente 2010 para vc e sua familia.
Dificil encontrar alguem que escreve, explica, ensina, comenta, divide conhecimentos de uma forma clara, vc parece um professor “dos antigos”.
Aproveitando, estou procurando ensinamento de como fazer um menu vertical na DIV esquerda e ao clicar no item, apresentar o resultado na DIV direita (como num frame). Voce pode ensinar?
Parabens pela boa vontade de contribuir. Grato
janeiro 2nd, 2010 at 18:21Ola Flavio, Feliz 2010 e obrigado.
Vamos ao assunto, para fazer o que você quer, temos, mais ou menos, 3 maneiras de fazer:
1 – Com iframe (ou frame), sendo esse o modo antigo;
2 – Com Ajax, pegando do servidor somente o conteúdo do div que se quer mostrar;
3 – Sem Ajax e sem frame, quando clicar no menu, baixar todo o site novamente, porém, no lado da programação, podemos colocar isso em templates, para economizar linhas de código.
Acho que o que você quer é o segundo método, com Ajax, isso?
A seu pedido, estou preparando um post sobre isso.
Abraços, e qualquer dúvida, sugestão, correção e/ou reclamação, por favor, não hesite em comentar.
janeiro 4th, 2010 at 8:27Gostaria de saver onde modifica no codigo para que o menu fica na posição Horizontal, pode me dar a dica 0nde modificar no codigo, obrigado.
fevereiro 24th, 2010 at 9:42gostaria de saber como fazer para que o menu fique na posição horizomtal, onde tenho que alterar no codigo, obrigado, uma outra coisa como definir que a primeira cor do texto seja preto,tendo o mesmo efeito ficando branco ao passar o mouse.
fevereiro 24th, 2010 at 9:46vlw me ajudou muito
abril 13th, 2010 at 22:40Muito bom o tutorial! Parabénsssss!! Aprendiii muityooooo com ele
abril 15th, 2010 at 15:05Olá amigo você sabe como fazer esse menu em HORIZONTAL?
julho 16th, 2010 at 18:41já quebrei a cabeça aqui e não consegui mudar…
Abraços e muito obrigado.
Olá Pablo, para fazer esse menu na horizontal, você tem que trocar as tags que são do tipo “block” para do tipo “inline”. Talvez em vez de tags “div” você possa utilizar tags “span”. Eu não testei aqui, mas se não funcionar ai, eu testo aqui e adiciono no post o menu na vertical.
setembro 16th, 2010 at 15:08Obrigado por comentar.
Obrigado pelo comentário.
setembro 16th, 2010 at 15:34Abraço.
Olá Gilvanio, para a primeira pergunta, você pode mudar as tags que são do tipo “block” para tags que são do tipo “inline” no código HTML do menu, talvez trocando as tags “div” por tags “span”. Não testei ainda aqui, mas deve funcionar. Se não funcionar, eu adiciono nesse post um tópico sobre como fazer esse menu horizontal.
A sua segunda dúvida: Você deve mexer na classe de estilo “itemOn a”, isso ai diz que todas as tags “a” dentro de tags que estão com a classe “itemOn”, devem aplicar esse estilo. Mude o estilo “color: #336600;” para “color: #000000″ que deve resolver.
.itemOn a{color:#000000; text-decoration:none; font-size:16px; font-weight:bold;}
Obrigado pelo comentário.
setembro 16th, 2010 at 15:58Abraço.
Ótimo, parabens, gostei mesmo…
outubro 13th, 2010 at 3:14