Menu CSS com background image

Este menu permite trocar a imagem de fundo e produzir efeito no momento que o usuario passa sobre a opção:

Será utilizado HTML, CSS e Javascript. Vamos ao código, já com as explicações:

<html>
<head>
<style type="text/css">

/* classe para quando o mouse sair da opção */
.itemOn{
padding-left:10px;
padding-top:2px;
background-image: url(b1.jpg);
}

/* classe para quando o mouse passar na opção */
.itemOver{
padding-left:10px;
padding-top:2px;
background-image: url(b2.jpg);
}

/* Observe que este CSS apenas troca a imagem de fundo de b1.jpg para b2.jpg */
</style>
</head>

<body>
<table cellpadding='0' cellspacing='0'>
<tr>
<td nowrap>

<div class="itemOn"
onmouseover="this.className='itemOver';"
onmouseout="this.className='itemOn';">
<a href="#menuum"> MENU UM </a>
</div>
</td>

<td nowrap>

<div class="itemOn"
onmouseover="this.className='itemOver';"
onmouseout="this.className='itemOn';">
<a href="#menudois"> MENU DOIS </a>
</div>
</td>
</tr>
</table>
</body>
</html>

Bom trabalho !

Anúncios

Deixe um comentário

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s