- Escrito por CGM
- Publicado em Internet
- Lido 7608 vezes
- tamanho da fonte diminuir o tamanho da fonte aumentar o tamanho da fonte
- Imprimir
- Comments (2)
Animação de Menu com jQuery
jQuery
Cada dia que passa mais me apaixono pelo jQuery. Essa fantástica biblioteca permite que até iniciantes em JavaScript consigam resultados impressionantes. Esse artigo não tem o intuito de se aprofundar em jQuery nem HTML/CSS e sim demonstrar como é possível conseguir bons efeitos com pouquíssimo código.
Para os completos iniciantes em HTML/CSS, sugiro o site http://maujor.com/ que contém artigos e tutorias interessantes sobre o assunto. Para quem deseja se aprofundar em jQuery, não conheço lugar melhor que http://docs.jquery.com/Main_Page (em inglês).
Você pode baixar os arquivos referentes a este artigo aqui.
Passo 01 - HTML básico e estilos
Vamos começar pelo inÃcio, com um html básico e uma lista de links. Salve o código abaixo em um arquivo chamado menu.html:
Animação de Menu com jQuery
Por enquanto essa lista não lembra nem de longe um menu. É ai que entra um pouquinho de CSS. Salve o código abaixo em um arquivo chamado menu.css na mesma pasta do arquivo menu.html:
.menu { margin: 0px; padding: 0px; height: 30px; list-style: none; background: #913C3E; } .menu li{ float: left; padding: 0px 4px 0px 4px; text-align: center; font-weight: bold; color: #FFFFFF; line-height: 30px; border-left: 2px solid #000000; background: #913C3E; position: relative; } .menu li a, .menu li a.active { text-decoration: none; color: #FFFFFF; }
Faça as seguintes alterações no arquivo menu.html(linhas 06 e 09):
Animação de Menu com jQuery
...e com o poder da folha de estilo em cascata, nossa lista começa a se parecer com um menu:
Passo 02a - Código jQuery
Agora começa a mágica: entra em cena jQuery! Salve o código abaixo em um arquivo chamado menu.js na mesma pasta dos outros dois arquivos:
$(document).ready(function(){ $("ul.menu li").hover( function() { var margem = -30; if($(this).is(':first-child')||$(this).is(':last-child')){ var margem = 0; } $(this).animate({marginLeft: margem, paddingRight: "34px"}, "slow"); }, function() { $(this).animate({marginLeft: "0px", paddingRight: "4px"}, "slow"); }); return false; });
Algumas explicações sobre o código:
$(document).ready(function(){
Faz com que o código rode o quanto antes possÃvel, antes mesmo da página ser completamente carregada.
$("ul.menu li").hover(
Seleciona todos os itens (<li>) pertencentes à listas (<ul>) que façam uso da classe ".menu" e atribui o primeiro código passado como parâmetro ao evento mouseenter("entrar" com o mouse) e o segundo ao evento mouseleave("sair" com o mouse) de cada um deles.
if($(this).is(':first-child')||$(this).is(':last-child')){ var margem = 0; }
Ao passar o mouse por cima (evento hover) de um item (<li>) - referenciado aqui através de $(this) - fazemos uma condicional (if) para testar se ele é o primeiro ou último elemento da lista (<ul>) para podermos diferenciar um pouco a animação dos elementos que estão no "meio".
$(this).animate({marginLeft: margem, paddingRight: "34px"}, "slow");
A função .animate() serve para animar propriedades CSS (no nosso caso, "marginLeft" e "paddingRight") com uma duração em milisegundos("slow" equivale a 600).
As linhas de 03 a 08 fazem parte do primeiro parâmetro da função .hover(), ou seja, o evento mouseenter do elemento. As linhas 10 e 11 são do evento mouseleave
$(this).animate({marginLeft: "0px", paddingRight: "4px"}, "slow");
O valor das propriedades animadas no mouseleave deve coincidir com o valor original (definido em CSS) para que os elementos retornem à posição original.
Passo 02b - Usando o código jQuery
Para podermos usar o código que fizemos precisamos referenciar a biblioteca jQuery e o arquivo que criamos anteriormente (menu.js) na seção da nossa página (arquivo menu.html):
Animação de Menu com jQuery
Salve o arquivo menu.html e o abra no seu navegador. O seu menu deve parecer com o abaixo:
Se você passar o mouse rapidamente por todos os itens do menu, vai reparar que todos vão ser animados ao mesmo tempo. O jQuery cria uma fila de eventos para cada objeto e vai executando um após o outro até executar o último evento dessa fila. Cada vez que você passar o mouse em um item do menu, as animações de entrada e saÃda de mouse (mouseenter e mouseleave) ficam pendentes nessa fila.
Vamos fazer uma pequena modifÃcação no arquivo menu.js para que a animação anterior seja suspensa e iniciada uma nova. Digite .stop(true) depois de $(this) nas linhas 08 e 11:
$(document).ready(function(){ $("ul.menu li").hover( function() { var margem = -30; if($(this).is(':first-child')||$(this).is(':last-child')){ var margem = 0; } $(this).stop(true).animate({marginLeft: margem, paddingRight: "34px"}, "slow"); }, function() { $(this).stop(true).animate({marginLeft: "0px", paddingRight: "4px"}, "slow"); }); return false; });
A função .stop(true) para a animação atual e limpa a fila de eventos do elemento. O restante da instrução então inicia uma nova animação. Teste o resultado:
Passo 03 - Inserindo Ãcones no menu
Agora vamos inserir Ãcones nos itens do menu que só aparecerão quando passar com o mouse por cima, dando um efeito muito bacana. Você encontra os Ãcones usados no exemplo aqui(descompacte na mesma pasta do arquivo menu.html). Começamos fazendo alterações na lista (<ul class="menu"> ) no arquivo menu.html, inserindo as imagens para cada item:
Animação de Menu com jQuery
Também precisamos incluir o estilo para essas imagens. Insira o código abaixo no final do arquivo menu.css:
.menu li img { height: 16px; top: 7px; right: -25px; position: absolute; filter: alpha(opacity=0); opacity: 0.0; }
As linhas 6 e 7 fazem exatamente a mesma coisa: alteram o nÃvel de opacidade(transparência) do elemento, sendo 0.0 (0 no caso de filter: alpha) totalmente transparente e 1.0 (100 no caso de filter: alpha) totalmente opaco. A diferença é que a linha 6 será apenas reconhecida no Internet Explorer e a 7 nos outros navegadores.
Agora basta incluir a animação dos Ãcones. Inclua as linhas 09 e 13 no arquivo menu.js:
$(document).ready(function(){ $("ul.menu li").hover( function() { var margem = -30; if($(this).is(':first-child')||$(this).is(':last-child')){ var margem = 0; } $(this).stop(true).animate({marginLeft: margem, paddingRight: "34px"}, "slow"); $("img", this).stop(true).animate({right: "5px", opacity: "100"}, "fast"); }, function() { $(this).stop(true).animate({marginLeft: "0px", paddingRight: "4px"}, "slow"); $("img", this).stop(true).animate({right: "-25px", opacity: "0"}, "fast"); }); return false; });
A função $("img", this) também pode ser usada como $(this).find("img") e, no nosso caso, localiza os elementos com tag <img> dentro da tag <li> pela qual foi disparada o evento hover. Veja o resultado final:
Esperamos que tenham gostado. Estamos abertos à sugestões para novos artigos. Até breve!
CGM
A CGM é uma empresa especializada em desenvolvimento de projetos de informática e sistemas personalizados.
A sólida parceria desenvolvida com seus clientes na última década atestam a vocação da CGM Automação no desenvolvimento de programas especÃficos com o que é de mais moderno em informática. Nossos profissionais comprovam uma longa experiência profissional, que é compartilhada com cada um de nossos clientes.
Website.: www.cgmautomacao.com.br
Comentários