Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Henrique Barcelos

Manipulando background position com jQuery

Por , em Javascript

Recommended Posts

Henrique Barcelos    290

Henrique Barcelos
Postado

Galera, aproveitei os 20 minutinhos que tive de descanso por aqui pra fazer algo que tinha vontade faz tempo: um menu animado (igual ao Flash) com jQuery...

 

O resultado está aqui:

 

http://www.megaupload.com/?d=FIZ1SEG0

 

Segue o código:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Teste Menu</title>
 <script type="text/javascript" src="[url="view-source:file:///E:/Desktop/Teste%20Menu/jquery-1.3.2.js"]jquery-1.3.2.js[/url]"></script>
 <script type="text/javascript" src="[url="view-source:file:///E:/Desktop/Teste%20Menu/jquery.bgpos.js"]jquery.bgpos.js[/url]"></script>
 <script type="text/javascript" src="[url="view-source:file:///E:/Desktop/Teste%20Menu/jquery.color.js"]jquery.color.js[/url]"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $("#nav a").css({
 backgroundPosition: "-60px -90px"
 }).mouseover(function(){
 $(this).stop().animate({
 backgroundPosition: "(0 0)"
 }, {
 duration: 500
 })
 }).mouseout(function(){
 $(this).stop().animate({
 backgroundPosition: "(-30 -90)"
 }, {
 duration: 400,
 complete: function(){
 $(this).css({
 backgroundPosition: "-60px -90px"
 })
 }
 })
 })
 });
 </script>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif;
 }
 
 ul#nav {
 overflow: hidden;
 list-style: none
 }
 
 ul#nav li {
 font-size: 10pt;
 float: left;
 }
 
 ul#nav li a:hover {
 background-position: bottom;
 }
 
 ul#nav li a {
 display: block;
 color: #FFF;
 text-decoration: none;
 width: 80px;
 height: 16px;
 padding: 16px 0;
 background: url(bg_menu2.png) no-repeat;
 text-align: center;
 }
 </style>
 </head>
 <body>
 <ul id="nav">
 <li><a href="[url="view-source:file:///E:/Desktop/Teste%20Menu/index.html#"]#[/url]">Home</a></li>
 <li><a href="[url="view-source:file:///E:/Desktop/Teste%20Menu/index.html#"]#[/url]">A empresa</a></li>
 <li><a href="[url="view-source:file:///E:/Desktop/Teste%20Menu/index.html#"]#[/url]">Contato</a></li>
 </ul>
 </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito