Criação de sites, softwares e sistemas inteligentes.

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!

Última modificação emTerça, 23 Setembro 2014 17:01
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  

0 # Bianco 27-06-2010 03:00
:lol: Muito legal a iniciativa de exibir tutorial relacionado a tenologia no site. Parabéns, muito bem explicado.
Responder | Responder com citação | Citar
0 # Jonathan Casanova 10-01-2012 19:18
Muito bom exemplo. A simplicidade de um codigo em jQuery com um resultado sensacional. :D
Responder | Responder com citação | Citar

Adicionar comentário


Código de segurança
Atualizar