Vamos aprender a criar um menu que quando passa o mouse por do menu ele muda de cor.
Para isso usaremos o Javascript, tem outras formas de fazer a mesma coisa, mas vou mostrar em uma das formas mais praticas.
Vamos usar a seguinte função para isso.
<script>
function muda(esse)
{
if (esse.bgColor=='#cccccc')
{
esse.bgColor='#dddddd';
}
else
{
esse.bgColor='#cccccc';
}
}
</script>
Explicação basica sobre a função.
Ela verifica se a celula onde o mouse está em cima está com a cor #cccccc se estiver ela poe a cor #dddddd caso contrario ela coloca novamente a cor #cccccc.
Por isso sempre cada chamada da função no caso onmouseover e onmouseover(proximo codigo) sempre vao mostrar cores opostas, criando o efeito de quando o mouse estiver em cima muda de cor depois volta ao normal.
Agora que já temos a função vamos ao código html do menu.
<table width="150">
<tr bgcolor="#cccccc" onMouseOver="muda(this)" onMouseOut="muda(this)"><td>Link 1</td></tr>
<tr bgcolor="#cccccc" onMouseOver="muda(this)" onMouseOut="muda(this)"><td>Link 2</td></tr>
<tr bgcolor="#cccccc" onMouseOver="muda(this)" onMouseOut="muda(this)"><td>Link 3</td></tr>
<tr bgcolor="#cccccc" onMouseOver="muda(this)" onMouseOut="muda(this)"><td>Link 4</td></tr>
</table>
Nas linhas dessa table agora, nós apenas chamamos a função em JS criada lá em cima, e ela se encarrega de fazer o processo com o onmouseover e o onmouseout.
Para adicionar mais linhas basta copiar uma linha da tabela e duplical-la.
É isso.
Abraços.
