jQuery: Menu com Animação
Bom dia pessoal,
Faz um tempinho que não falo de jQuery aqui no blog. Agora estou começando a mexer com a parte de animação da biblioteca, e pra mostrar como é simples fazer animações vou demonstrar como criar um menu animado usando jQuery. O resultado você pode conferir aqui.
Eu sei que é um efeito simples, mas a intenção é justamente essa, pois esse será um post introdutório sobre animações com jQuery. Portanto, mãos a obra!
1 – Como sempre, não se esqueça de carregar no cabeçalho de sua página o script do jQuery. Caso você não o tenha, baixe em jQuery.com
<head> <script language="javascript" src="jquery-1.3.2.min.js"></script> </head>
2 – A marcação html do menu é a seguinte:
<div id="menu"> <a href="#">HOME</a> <a href="#">SOBRE</a> <a href="#">PROJETOS</a> <a href="#">DÚVIDAS</a> </div>
Obviamente você pode ter quantos links quiser, direcionando-os para onde quiser. Só siga a estrutura de ter uma div com o id “menu” em volta dos links.
3 – E agora vamos ao CSS. Há algumas observações a serem feitas aqui:
#menu {
border-top: 2px solid #000000;
overflow: hidden;
}
a, a:visited {
border-top: 8px solid #0099FF;
position: relative;
top: -4px;
font-size: 13px;
display: block;
width: 80px;
float: left;
text-align: center;
text-decoration: none;
color: #0099FF;
margin: 0 5px;
font-family: Trebuchet MS, Verdana, Arial;
}
- Na linha 3, é muito importante o uso do overflow hidden, pois ele manterá escondido as bordas dos links quando estes estão inativos.
- Na linha 7, é definida a borda superior dos links com 8px.
- Na linha 8 e 9, posicionamos os links 4px acima de sua posição normal, o que juntamente com o overflow hidden faz com que a borda tenha 4px de sua espessura escondida.
- As outras linhas são responsáveis pela estilização padrão dos links.
4 – Agora vamos para o script responsável pela animação:
$(document).ready(function() {
var linkMenu = $("#menu a");
linkMenu.hover(
function() {
$(this).css("color", "#FF6600");
$(this).css("border-color", "#FF6600");
$(this).stop().animate({top: "0px"}, "fast");
},
function() {
$(this).css("color", "#0099FF");
$(this).css("border-color", "#0099FF");
$(this).stop().animate({top: "-4px"}, "fast");
}
);
});
- Na linha 1, declaramos a função que ficará disponível assim que todo o documento terminar de ser lido.
- Na linha 2, guardamos em uma variável o seletor dos links, no caso todos os links (tag <a>) dentro do elemento com id “menu”.
- Na linha 3, chamamos a função hover, que determinará o que fazer ao passar o mouse pelos links do menu.
- Da linha 4 a 8, declaramos a função que será executada ao passar o mouse sobre os links. Na linha 5 e 6 mudamos a cor do texto dos links e da borda. Na linha 7 chamamos a função animate() do jQuery. Como primeiro atributo desta função declaramos a mudança no atributo top do css dos links para o valor de 0px (inicialmente ele está em -4px lembra?). Como segundo atributo determinamos o tempo que a animação irá durar. Você pode utilizar os valores padrões “slow”, “normal” e “fast” ou definir um valor específico em ms (1000 para 1 segundo por exemplo). A chamada de stop() antes da chamada do animate() determina que toda animação que estiver em execução deve ser interrompida antes do início da outra animação.
- Da linha 9 a 12, declaramos a função que será executada na saída do mouse sobre os links. As linhas seguintes fazem o efeito contrário ao da função anterior, fazendo os links voltarem a sua aparência padrão.
Isso faz com que ao passar o mouse sobre um link, ele é deslocado 4px para baixo, mostrando os 8px da espessura de sua borda. Ao tirar o mouse, ele é deslocado novamente para cima e metade da borda superior é escondida.
Você deve estar se perguntando o porquê de eu não alterar diretamente o width da borda na animação, e não o posicionamento do link. Adivinha? o Internet Explorer e seu incrível suporte a javascripts não consegue interpretar a animação corretamente com essa abordagem, portanto optei por essa solução demonstrada acima.
Dúvidas, críticas, sugestões? Deixe um comentário! Até a próxima!
Muito bom, vou tentar aplicar aqui.